diff options
CHG: Fix GItHub site CSS
10 files changed, 2893 insertions, 3063 deletions
| -rw-r--r-- | docs/components.html | 4 | ||||
| -rw-r--r-- | docs/css/docs.css | 218 | ||||
| -rw-r--r-- | docs/css/docs.min.css | 1 | ||||
| -rw-r--r-- | docs/css/spectre.css | 2663 | ||||
| -rw-r--r-- | docs/elements.html | 4 | ||||
| -rw-r--r-- | docs/index.html | 4 | ||||
| -rw-r--r-- | docs/layout.html | 4 | ||||
| -rw-r--r-- | docs/utilities.html | 4 | ||||
| -rw-r--r-- | gulpfile.js | 10 | ||||
| -rw-r--r-- | index.html | 3044 |
diff --git a/docs/components.html b/docs/components.html index 50f4f5e..36d52b7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -7,8 +7,8 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="https://github.com/picturepan2/" /> <title>Components - Spectre.css</title> - <link rel="stylesheet" href="../dist/spectre.css" /> - <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="css/spectre.css" /> + <link rel="stylesheet" href="css/docs.css" /> <link rel="stylesheet" href="font/style.css" /> </head> <body> diff --git a/docs/css/docs.css b/docs/css/docs.css new file mode 100644 index 0000000..123ec31 --- /dev/null +++ b/docs/css/docs.css @@ -0,0 +1,218 @@ +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ +/* Spectre version */ +.version::after { + content: "0.2.1"; +} +/* Spectre docs style */ +.grid-hero { + margin-bottom: 4rem; + margin-top: 10rem; +} +.grid-hero h1 { + color: #555; + font-size: 3.2rem; + font-weight: 400; +} +.grid-hero h2 { + color: #666; + font-size: 1.8rem; + font-weight: 400; + line-height: 3rem; + margin-bottom: 5rem; +} +.grid-hero h2 u { + border-bottom: .2rem solid #666; + padding-bottom: .1rem; + text-decoration: none; +} +.grid-hero .card { + background: none; + border: 0; + color: #666; + padding: 1rem; +} +.grid-hero .card .card-title { + color: #5764c6; + font-size: 1.8rem; + margin-bottom: 0; +} +.bg-grey { + background-color: #f6f6f6; + border-radius: .2rem; + padding: 1rem .5rem; +} +.bg-dark { + background: #2d3354; + color: #fff; + padding: 1rem .5rem; +} +.bg-primary { + background: #5764c6; + color: #fff; + padding: 1rem .5rem; +} +.navbar-brand .icon { + font-size: 1.3333em; + line-height: .8em; + vertical-align: -20%; +} +.grid-header .btn { + color: #666; +} +.grid-header .btn:hover, +.grid-header .btn:focus, +.grid-header .btn:active { + color: #444; + opacity: .75; +} +.grid-header .navbar-brand { + color: #444; +} +.grid-footer { + color: #888; + margin-bottom: 3rem; + margin-top: 4rem; +} +.grid-footer a { + color: #666; +} +.empty .icon { + font-size: 4rem; +} +.code { + color: #666; +} +.code .com { + color: #adadad; +} +.code .tag { + color: #4452c0; +} +.code .atn { + color: #666; +} +.code .atv { + color: #e06870; +} +.docs-content .container { + padding: 2rem 1rem; +} +.docs-content header { + padding-top: 2rem; +} +.docs-content pre { + margin-bottom: 2rem; + margin-top: 2rem; +} +.docs-content .notes { + color: #666; + margin: 4rem 0; +} +.docs-content h3, +.docs-content h4, +.docs-content h5 { + margin-bottom: 2rem; + margin-top: 2rem; +} +.example-tile-icon { + -webkit-align-content: space-around; + align-content: space-around; + -webkit-align-items: center; + align-items: center; + background: #5764c6; + border-radius: .2rem; + color: #fff; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + -ms-flex-line-pack: distribute; + font-size: 2.4rem; + height: 4rem; + width: 4rem; +} +@media screen and (min-width: 481px) { + .docs-sidebar { + padding: 6rem 0; + } + .docs-sidebar .docs-nav { + position: relative; + } + @supports ((position: -webkit-sticky) or (position: sticky)) { + .docs-sidebar .docs-nav { + position: sticky; + position: -webkit-sticky; + top: 6rem; + } + .docs-sidebar .docs-nav .nav-item a:focus { + box-shadow: none; + } + } +} +.docs-nav-clear { + display: none; +} +.show-xs { + display: none !important; +} +@media screen and (max-width: 480px) { + .show-xs { + display: block !important; + } + .grid-hero h2 { + font-size: 1.8rem; + } + .grid-hero .card { + padding: 0; + } + .section-header { + padding: 0 .5rem; + position: fixed; + top: 0; + width: 100%; + z-index: 299; + } + .section-header .btn-link { + padding-left: .6rem; + padding-right: .6rem; + } + .docs-sidebar { + background: #fff; + height: 100%; + overflow-y: auto; + padding-left: 3rem; + position: fixed; + right: 0; + top: 0; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + transition: transform .216s ease, -webkit-transform .216s ease; + transition: transform .216s ease; + transition: -webkit-transform .216s ease; + width: 24rem; + z-index: 999; + } + .docs-sidebar:target { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + .docs-sidebar:target + .docs-nav-clear { + display: block; + } + .docs-content header { + padding-top: 6rem; + } + .docs-nav-clear { + background: rgba(0, 0, 0, .15); + display: none; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + z-index: 499; + } +}
\ No newline at end of file diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css deleted file mode 100644 index c7370e7..0000000 --- a/docs/css/docs.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content h3,.docs-content h4,.docs-content h5{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding:6rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}.show-xs{display:none!important}@media screen and (max-width:480px){.show-xs{display:block!important}.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .216s ease,-webkit-transform .216s ease;transition:transform .216s ease;transition:-webkit-transform .216s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}}
\ No newline at end of file diff --git a/docs/css/spectre.css b/docs/css/spectre.css new file mode 100644 index 0000000..2f2adf8 --- /dev/null +++ b/docs/css/spectre.css @@ -0,0 +1,2663 @@ +/*! Spectre.css | MIT License | github.com/picturepan2/spectre */ +/* Manually forked from Normalize.css */ +/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +/* Document + ========================================================================== */ +html { + font-family: sans-serif; + /* 1 */ + line-height: 1.15; + /* 3 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ +} +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; +} +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; +} +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: .67em 0; +} +/* Grouping content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ +figcaption, +figure, +main { + /* 1 */ + display: block; +} +/** + * Add the correct margin in IE 8 (removed). + */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} +/** + * 1. Correct the inheritance and scaling of font size in all browsers. (removed) + * 2. Correct the odd `em` font sizing in all browsers. + */ +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ +} +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ +a:active, +a:hover { + outline-width: 0; +} +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) + */ +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; +} +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; +} +/** + * Add the correct background and color in IE 9-. (Removed) + */ +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} +sup { + top: -.5em; +} +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; +} +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; +} +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; +} +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 (changed) */ + font-size: inherit; + /* 1 (changed) */ + line-height: inherit; + /* 1 (changed) */ + margin: 0; + /* 2 */ +} +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; +} +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; +} +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ +} +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +/** + * Restore the focus styles unset by the previous rule (removed). + */ +/** + * Change the border, margin, and padding in all browsers (opinionated) (changed). + */ +fieldset { + border: 0; + margin: 0; + padding: 0; +} +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ +} +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; +} +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; +} +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; +} +/** + * Add the correct display in IE. + */ +template { + display: none; +} +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; +} +*, +*::before, +*::after { + box-sizing: inherit; +} +html { + box-sizing: border-box; + font-size: 10px; + line-height: 1.42857143; + -webkit-tap-highlight-color: transparent; +} +body { + background: #fff; + color: #333; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; + font-size: 1.4rem; + overflow-x: hidden; + text-rendering: optimizeLegibility; +} +a { + color: #5764c6; + text-decoration: none; +} +a:focus, +a:hover { + color: #3b49af; + text-decoration: underline; +} +:focus { + box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15); + outline: 0; +} +[disabled], +.disabled { + cursor: default; + opacity: .5; + pointer-events: none; +} +.btn .icon, +.toast .icon, +.menu .icon { + font-size: 1.3333em; + line-height: .8em; + vertical-align: -20%; +} +.icon-caret { + border-left: .4rem solid transparent; + border-right: .4rem solid transparent; + border-top: .4rem solid currentColor; + display: inline-block; + height: 0; + margin: 0 .2rem; + vertical-align: middle; + width: 0; +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: inherit; + font-weight: 300; + line-height: 1.2; + margin-bottom: 1.5rem; + margin-top: 0; +} +h1 { + font-size: 5rem; +} +h2 { + font-size: 4rem; +} +h3 { + font-size: 3rem; +} +h4 { + font-size: 2.4rem; +} +h5 { + font-size: 2rem; +} +h6 { + font-size: 1.6rem; +} +p { + line-height: 2.4rem; + margin: 0 0 1em; +} +blockquote { + border-left: .2rem solid #ddd; + margin-left: 0; + padding: 1rem 2rem; +} +blockquote p:last-child { + margin-bottom: 0; +} +blockquote cite { + color: #b3b3b3; +} +ul, +ol { + margin: 2rem 0 2rem 2rem; + padding: 0; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin: 1.5rem 0 1.5rem 2rem; +} +ul li, +ol li { + margin-top: 1rem; +} +ul { + list-style: disc inside; +} +ul ul { + list-style-type: circle; +} +ol { + list-style: decimal inside; +} +ol ol { + list-style-type: lower-alpha; +} +dl dt { + font-weight: bold; +} +dl dd { + margin: .5rem 0 1.5rem 0; +} +mark { + background: #ffe9b3; + border-radius: .2rem; + padding: .1em .3em; + vertical-align: baseline; +} +kbd { + background: #333; + border-radius: .2rem; + color: #fff; + padding: .1em .3em; + vertical-align: baseline; +} +abbr[title] { + border-bottom: .1rem dotted; + cursor: help; + text-decoration: none; +} +code { + background: #efefef; + border-radius: .2rem; + color: #666; + padding: .1em .3em; + vertical-align: baseline; +} +pre { + background: #f9f9f9; + line-height: 1.8rem; + margin-bottom: 1em; + margin-top: 1em; + overflow: auto; + padding: 2rem 2.5rem; + position: relative; +} +pre > code { + background: transparent; + border-left: 0; + line-height: 1.8rem; + padding: 0; +} +pre > code::before { + color: #c5c5c5; + content: attr(data-lang); + font-size: 1.2rem; + position: absolute; + right: 1rem; + top: .2rem; +} +:lang(zh), +:lang(ja), +:lang(ko), +.cjk { + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", "Helvetica Neue", sans-serif; +} +:lang(zh) ins, +:lang(ja) ins, +.cjk ins, +:lang(zh) u, +:lang(ja) u, +.cjk u { + border-bottom: .1rem solid; + text-decoration: none; +} +:lang(zh) del + del, +:lang(ja) del + del, +.cjk del + del, +:lang(zh) del + s, +:lang(ja) del + s, +.cjk del + s, +:lang(zh) ins + ins, +:lang(ja) ins + ins, +.cjk ins + ins, +:lang(zh) ins + u, +:lang(ja) ins + u, +.cjk ins + u, +:lang(zh) s + del, +:lang(ja) s + del, +.cjk s + del, +:lang(zh) s + s, +:lang(ja) s + s, +.cjk s + s, +:lang(zh) u + ins, +:lang(ja) u + ins, +.cjk u + ins, +:lang(zh) u + u, +:lang(ja) u + u, +.cjk u + u { + margin-left: .125em; +} +.table { + border-collapse: collapse; + border-spacing: 0; + text-align: left; + width: 100%; +} +.table.table-striped tbody tr:nth-of-type(odd) { + background: #f8f8f8; +} +.table.table-hover tbody tr:hover { + background: #f0f0f0; +} +.table tbody tr.active, +.table.table-striped tbody tr.active { + background: #f0f0f0; +} +.table th, +.table td { + border-bottom: .1rem solid #efefef; + padding: 1.5rem 1rem; +} +.table th { + border-color: #e2e2e2; +} +.btn { + -webkit-appearance: none; + background: #fff; + border: .1rem solid #5764c6; + border-radius: .2rem; + color: #5764c6; + cursor: pointer; + display: inline-block; + font-size: 1.4rem; + height: 3.2rem; + line-height: 1.6rem; + padding: .7rem 1.2rem; + text-align: center; + text-decoration: none; + transition: all .15s ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} +.btn:focus { + background: #f7f8fc; + text-decoration: none; +} +.btn:hover { + background: #5764c6; + border-color: #4452c0; + color: #fff; + text-decoration: none; +} +.btn:active, +.btn.active { + background: #4452c0; + border-color: #3b49af; + color: #fff; +} +.btn.btn-primary { + background: #5764c6; + border-color: #4452c0; + color: #fff; +} +.btn.btn-primary:focus { + background: #4856c1; + border-color: #3b49af; + color: #fff; +} +.btn.btn-primary:hover { + background: #404fbe; + border-color: #35419c; + color: #fff; +} +.btn.btn-primary:active, +.btn.btn-primary.active { + background: #3e4cb6; + border-color: #35419c; + color: #fff; +} +.btn.btn-primary.loading::after { + border-color: #fff; + border-right-color: transparent; + border-top-color: transparent; +} +.btn.btn-link { + background: transparent; + border-color: transparent; + color: #5764c6; +} +.btn.btn-link:focus, +.btn.btn-link:hover { + color: #35419c; +} +.btn.btn-link:active, +.btn.btn-link.active { + color: #283176; +} +.btn.btn-sm { + font-size: 1.2rem; + height: 2.4rem; + line-height: 1.4rem; + padding: .4rem .8rem; +} +.btn.btn-lg { + font-size: 1.8rem; + height: 4.2rem; + line-height: 2rem; + padding: 1rem 1.5rem; +} +.btn.btn-block { + display: block; + width: 100%; +} +.btn.btn-action { + padding-left: .2rem; + padding-right: .2rem; + width: 3.2rem; +} +.btn.btn-action.btn-sm { + width: 2.4rem; +} +.btn.btn-action.btn-lg { + width: 4.2rem; +} +.btn.btn-clear { + background: transparent; + border: 0; + color: currentColor; + font-family: sans-serif; + height: 2rem; + line-height: 1.8rem; + margin-left: .2rem; + margin-right: -.4rem; + opacity: .45; + padding: 0 .4rem; + text-decoration: none; + width: 2rem; +} +.btn.btn-clear:hover { + opacity: .85; +} +.btn.btn-clear::before { + content: "\00d7"; + font-size: 2rem; +} +.btn-group { + display: inline-flex; + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.btn-group .btn { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} +.btn-group .btn:first-of-type:not(:last-of-type) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.btn-group .btn:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + margin-left: -.1rem; +} +.btn-group .btn:last-of-type:not(:first-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -.1rem; +} +.btn-group .btn:hover, +.btn-group .btn:focus, +.btn-group .btn:active, +.btn-group .btn.active { + z-index: 9; +} +.btn-group.btn-group-block { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; +} +.form-group:not(:last-child) { + margin-bottom: 1rem; +} +.form-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #fff; + background-image: none; + border: .1rem solid #c5c5c5; + border-radius: .2rem; + color: #333; + display: block; + font-size: 1.4rem; + height: 3.2rem; + line-height: 1.8rem; + max-width: 100%; + outline: 0; + padding: .6rem .8rem; + position: relative; + transition: all .15s ease; + width: 100%; +} +.form-input:focus { + border-color: #5764c6; +} +.form-input[disabled] { + background: #eeeff2; +} +.form-input.input-sm { + font-size: 1.2rem; + height: 2.4rem; + padding: .3rem .6rem; +} +.form-input.input-lg { + font-size: 1.6rem; + height: 4.2rem; + line-height: 2rem; + padding: 1rem .8rem; +} +.form-input.input-inline { + display: inline-block; + vertical-align: middle; + width: auto; +} +textarea.form-input { + height: auto; + line-height: 2rem; +} +.has-success .form-input, +.form-input.is-success { + border-color: #32b643; +} +.has-danger .form-input, +.form-input.is-danger { + border-color: #e85600; +} +.form-input[type=file] { + height: auto; +} +.form-input-hint { + color: #888; + margin-top: .4rem; +} +.has-success .form-input-hint, +.is-success + .form-input-hint { + color: #32b643; +} +.has-danger .form-input-hint, +.is-danger + .form-input-hint { + color: #e85600; +} +.form-label { + display: block; + line-height: 1.6rem; + margin-bottom: .5rem; +} +.form-select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: .1rem solid #c5c5c5; + border-radius: .2rem; + font-size: 1.4rem; + line-height: 1.6rem; + min-width: 18rem; + outline: 0; + padding: .5rem .8rem; + vertical-align: middle; +} +.form-select[multiple] option { + padding: .2rem .4rem; +} +.form-select:not([multiple]) { + background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem; + height: 3.2rem; + padding-right: 2.4rem; +} +.form-select:focus { + border-color: #5764c6; +} +.form-select::-ms-expand { + display: none; +} +.form-select.select-sm { + font-size: 1.2rem; + height: 2.4rem; + padding: .4rem 2rem .4rem .6rem; +} +.form-select.select-lg { + font-size: 1.6rem; + height: 4.2rem; + line-height: 2rem; + padding: 1rem 2.4rem 1rem .8rem; +} +.has-success .form-select, +.form-select.is-success { + border-color: #32b643; +} +.has-danger .form-select, +.form-select.is-danger { + border-color: #e85600; +} +.form-checkbox input, +.form-radio input, +.form-switch input { + clip: rect(0, 0, 0, 0); + height: .1rem; + margin: -.1rem; + overflow: hidden; + position: absolute; + width: .1rem; +} +.form-checkbox input:focus + .form-icon, +.form-radio input:focus + .form-icon, +.form-switch input:focus + .form-icon { + border-color: #5764c6; + box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15); +} +.form-checkbox, +.form-radio { + cursor: pointer; + display: inline-block; + line-height: 1.8rem; + padding: .3rem 2rem; + position: relative; +} +.form-checkbox .form-icon, +.form-radio .form-icon { + border: .1rem solid #c5c5c5; + display: inline-block; + font-size: 1.4rem; + height: 1.4rem; + left: 0; + line-height: 2.4rem; + outline: none; + padding: 0; + position: absolute; + top: .5rem; + transition: all .15s ease; + vertical-align: top; + width: 1.4rem; +} +.form-checkbox:hover .form-icon, +.form-radio:hover .form-icon { + border-color: #929292; +} +.form-checkbox input:checked + .form-icon, +.form-radio input:checked + .form-icon { + background: #5764c6; + border-color: #5764c6; +} +.form-checkbox input:active + .form-icon, +.form-radio input:active + .form-icon { + background: #efefef; +} +.form-checkbox .form-icon { + border-radius: .2rem; +} +.form-checkbox input:checked + .form-icon::after { + background-clip: padding-box; + border: .2rem solid #fff; + border-left-width: 0; + border-top-width: 0; + content: ""; + height: 1rem; + left: 50%; + margin-left: -.3rem; + margin-top: -.6rem; + position: absolute; + top: 50%; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + width: .6rem; +} +.form-checkbox input:indeterminate + .form-icon { + background: #5764c6; + border-color: #5764c6; +} +.form-checkbox input:indeterminate + .form-icon::after { + background: #fff; + content: ""; + height: .2rem; + left: 50%; + margin-left: -.4rem; + margin-top: -.1rem; + position: absolute; + top: 50%; + width: .8rem; +} +.form-radio .form-icon { + border-radius: .7rem; +} +.form-radio input:checked + .form-icon::after { + background: #fff; + border-radius: .2rem; + content: ""; + height: .4rem; + left: 50%; + margin-left: -.2rem; + margin-top: -.2rem; + position: absolute; + top: 50%; + width: .4rem; +} +.form-switch { + cursor: pointer; + display: inline-block; + line-height: 2rem; + padding: .3rem 2rem .3rem 3.6rem; + position: relative; +} +.form-switch .form-icon { + background: #c5c5c5; + background-clip: padding-box; + border: .1rem solid #c5c5c5; + border-radius: .9rem; + display: inline-block; + height: 1.8rem; + left: 0; + line-height: 2.6rem; + outline: none; + padding: 0; + position: absolute; + top: .4rem; + vertical-align: top; + width: 3rem; +} +.form-switch .form-icon::after { + background: #fff; + border-radius: .8rem; + content: ""; + display: block; + height: 1.6rem; + left: 0; + position: absolute; + top: 0; + transition: left .15s ease; + width: 1.6rem; +} +.form-switch input:checked + .form-icon { + background: #5764c6; + border-color: #5764c6; +} +.form-switch input:checked + .form-icon::after { + left: 1.2rem; +} +.form-switch input:active + .form-icon::after { + background: #efefef; +} +.input-group { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; +} +.input-group .input-group-addon { + background: #f9f9f9; + border: .1rem solid #c5c5c5; + border-radius: .2rem; + line-height: 1.6rem; + padding: .7rem .8rem; +} +.input-group .input-group-addon.addon-sm { + font-size: 1.2rem; + padding: .3rem .6rem; +} +.input-group .input-group-addon.addon-lg { + font-size: 1.6rem; + line-height: 2rem; + padding: 1rem .8rem; +} +.input-group .input-group-addon, +.input-group .input-group-btn { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} +.input-group .form-input:first-child:not(:last-child), +.input-group .input-group-addon:first-child:not(:last-child), +.input-group .input-group-btn:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.input-group .form-input:not(:first-child):not(:last-child), +.input-group .input-group-addon:not(:first-child):not(:last-child), +.input-group .input-group-btn:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -.1rem; +} +.input-group .form-input:last-child:not(:first-child), +.input-group .input-group-addon:last-child:not(:first-child), +.input-group .input-group-btn:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -.1rem; +} +.input-group .form-input:focus, +.input-group .input-group-addon:focus, +.input-group .input-group-btn:focus { + z-index: 99; +} +.input-group.input-inline { + display: inline-flex; + display: -ms-inline-flexbox; + display: -webkit-inline-flex; +} +.label { + background: #efefef; + border-radius: .2rem; + color: #888; + padding: .1em .3em; + vertical-align: baseline; +} +.label.label-primary { + background: #5764c6; + color: #fff; +} +.label.label-success { + background: #32b643; + color: #fff; +} +.label.label-danger { + background: #e85600; + color: #fff; +} +.progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + color: #5764c6; + height: .4rem; + width: 100%; +} +.progress::-webkit-progress-bar { + background: #efefef; + border-radius: .2rem; +} +.progress::-webkit-progress-value { + background: #5764c6; + border-radius: .2rem; +} +.progress::-moz-progress-bar { + background: #5764c6; + border-radius: .2rem; +} +.img-responsive { + display: block; + height: auto; + max-width: 100%; +} +.video-responsive { + display: block; + overflow: hidden; + padding: 0; + position: relative; + width: 100%; +} +.video-responsive::before { + content: ""; + display: block; + padding-bottom: 56.25%; + /* Default 16:9, you can calculate this value by dividing 9 by 16 */ +} +.video-responsive iframe, +.video-responsive object, +.video-responsive embed { + bottom: 0; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; +} +.video-responsive video { + height: auto; + max-width: 100%; + width: 100%; +} +.video-responsive-4-3::before { + padding-bottom: 75%; + /* 4:3 */ +} +.video-responsive-1-1::before { + padding-bottom: 100%; + /* 1:1 */ +} +.figure { + margin: 0 0 1rem 0; +} +.figure .figure-caption { + color: #888; + margin-top: 1rem; +} +.container { + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; + width: 100%; +} +@media screen and (min-width: 980px) { + .grid-960 { + width: 98rem; + } +} +@media screen and (min-width: 500px) { + .grid-480 { + width: 50rem; + } +} +.columns { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -1rem; + margin-right: -1rem; +} +.columns.col-gapless { + margin-left: 0; + margin-right: 0; +} +.columns.col-gapless .column { + padding-left: 0; + padding-right: 0; +} +.columns.col-oneline { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + overflow-x: auto; +} +.column { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 1rem; +} +.column.col-12, +.column.col-11, +.column.col-10, +.column.col-9, +.column.col-8, +.column.col-7, +.column.col-6, +.column.col-5, +.column.col-4, +.column.col-3, +.column.col-2, +.column.col-1 { + -webkit-flex: none; + -ms-flex: none; + flex: none; +} +.col-12 { + width: 100%; +} +.col-11 { + width: 91.66666667%; +} +.col-10 { + width: 83.33333333%; +} +.col-9 { + width: 75%; +} +.col-8 { + width: 66.66666667%; +} +.col-7 { + width: 58.33333333%; +} +.col-6 { + width: 50%; +} +.col-5 { + width: 41.66666667%; +} +.col-4 { + width: 33.33333333%; +} +.col-3 { + width: 25%; +} +.col-2 { + width: 16.66666667%; +} +.col-1 { + width: 8.33333333%; +} +@media screen and (max-width: 1280px) { + .col-xl-12, + .col-xl-11, + .col-xl-10, + .col-xl-9, + .col-xl-8, + .col-xl-7, + .col-xl-6, + .col-xl-5, + .col-xl-4, + .col-xl-3, + .col-xl-2, + .col-xl-1 { + -webkit-flex: none; + -ms-flex: none; + flex: none; + } + .col-xl-12 { + width: 100%; + } + .col-xl-11 { + width: 91.66666667%; + } + .col-xl-10 { + width: 83.33333333%; + } + .col-xl-9 { + width: 75%; + } + .col-xl-8 { + width: 66.66666667%; + } + .col-xl-7 { + width: 58.33333333%; + } + .col-xl-6 { + width: 50%; + } + .col-xl-5 { + width: 41.66666667%; + } + .col-xl-4 { + width: 33.33333333%; + } + .col-xl-3 { + width: 25%; + } + .col-xl-2 { + width: 16.66666667%; + } + .col-xl-1 { + width: 8.33333333%; + } +} +@media screen and (max-width: 960px) { + .col-lg-12, + .col-lg-11, + .col-lg-10, + .col-lg-9, + .col-lg-8, + .col-lg-7, + .col-lg-6, + .col-lg-5, + .col-lg-4, + .col-lg-3, + .col-lg-2, + .col-lg-1 { + -webkit-flex: none; + -ms-flex: none; + flex: none; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } +} +@media screen and (max-width: 840px) { + .col-md-12, + .col-md-11, + .col-md-10, + .col-md-9, + .col-md-8, + .col-md-7, + .col-md-6, + .col-md-5, + .col-md-4, + .col-md-3, + .col-md-2, + .col-md-1 { + -webkit-flex: none; + -ms-flex: none; + flex: none; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } +} +@media screen and (max-width: 600px) { + .col-sm-12, + .col-sm-11, + .col-sm-10, + .col-sm-9, + .col-sm-8, + .col-sm-7, + .col-sm-6, + .col-sm-5, + .col-sm-4, + .col-sm-3, + .col-sm-2, + .col-sm-1 { + -webkit-flex: none; + -ms-flex: none; + flex: none; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } +} +@media screen and (max-width: 480px) { + .col-xs-12, + .col-xs-11, + .col-xs-10, + .col-xs-9, + .col-xs-8, + .col-xs-7, + .col-xs-6, + .col-xs-5, + .col-xs-4, + .col-xs-3, + .col-xs-2, + .col-xs-1 { + -webkit-flex: none; + -ms-flex: none; + flex: none; + } + .col-xs-12 { + width: 100%; + } + .col-xs-11 { + width: 91.66666667%; + } + .col-xs-10 { + width: 83.33333333%; + } + .col-xs-9 { + width: 75%; + } + .col-xs-8 { + width: 66.66666667%; + } + .col-xs-7 { + width: 58.33333333%; + } + .col-xs-6 { + width: 50%; + } + .col-xs-5 { + width: 41.66666667%; + } + .col-xs-4 { + width: 33.33333333%; + } + .col-xs-3 { + width: 25%; + } + .col-xs-2 { + width: 16.66666667%; + } + .col-xs-1 { + width: 8.33333333%; + } +} +.form-horizontal { + padding: 1rem; +} +.form-horizontal .form-group { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; +} +.form-horizontal .form-label { + margin-bottom: 0; + padding: .8rem .4rem; +} +.form-horizontal .form-checkbox, +.form-horizontal .form-radio { + margin: .4rem 0; +} +@media screen and (max-width: 480px) { + .hide-xs { + display: none !important; + } +} +@media screen and (max-width: 600px) { + .hide-sm { + display: none !important; + } +} +@media screen and (max-width: 840px) { + .hide-md { + display: none !important; + } +} +@media screen and (max-width: 960px) { + .hide-lg { + display: none !important; + } +} +@media screen and (max-width: 1280px) { + .hide-xl { + display: none !important; + } +} +.navbar { + -webkit-align-items: center; + align-items: center; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + -ms-flex-pack: justify; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.navbar .navbar-section { + -webkit-align-items: center; + align-items: center; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + padding: 1rem 0; +} +.navbar .navbar-brand { + font-size: 1.6rem; + font-weight: 500; + padding-right: 2rem; + text-decoration: none; + vertical-align: middle; +} +.empty { + background: #f8f8f8; + border-radius: .2rem; + padding: 4rem; + text-align: center; +} +.empty .empty-title { + font-size: 1.8rem; + margin: 1.5rem 0 .5rem 0; +} +.empty .empty-meta { + color: #888; +} +.empty .empty-action { + margin-top: 1.5rem; +} +.form-autocomplete { + position: relative; +} +.form-autocomplete .form-autocomplete-input { + -webkit-align-content: flex-start; + align-content: flex-start; + background: #fff; + border: .1rem solid #c5c5c5; + border-radius: .2rem; + color: #333; + display: -ms-flexbox; + display: flex; + display: -webkit-flex; + -ms-flex-line-pack: start; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + min-height: 3.6rem; + outline: 0; + padding: .1rem 0 .1rem .2rem; + width: 100%; +} +.form-autocomplete .form-autocomplete-input.is-focused { + border-color: #5764c6; + box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15); +} +.form-autocomplete .form-autocomplete-input .form-input { + border-color: transparent; + box-shadow: none; + display: inline-block; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + padding: .3rem; + width: auto; +} +.form-autocomplete mark { + font-size: 1; + padding: .1em 0; +} +.avatar { + border-radius: 50%; + color: #fff; + display: inline-block; + font-size: 1.4rem; + font-weight: 300; + height: 3.2rem; + line-height: 1; + margin: 0; + position: relative; + vertical-align: middle; + width: 3.2rem; +} +.avatar.avatar-xs { + font-size: .8rem; + height: 1.6rem; + width: 1.6rem; +} +.avatar.avatar-sm { + font-size: 1rem; + height: 2.4rem; + width: 2.4rem; +} +.avatar.avatar-lg { + font-size: 2rem; + height: 4.8rem; + width: 4.8rem; +} +.avatar.avatar-xl { + font-size: 2.6rem; + height: 6.4rem; + width: 6.4rem; +} +.avatar img { + border-radius: 50%; + height: 100%; + position: relative; + width: 100%; + z-index: 99; +} +.avatar .avatar-icon { + background: #fff; + bottom: -.2em; + height: 50%; + padding: 5%; + position: absolute; + right: -.2em; + width: 50%; +} +.avatar[data-initial]::after { + color: currentColor; + content: attr(data-initial); + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 0; +} +.badge { + position: relative; +} +.badge[data-badge]::after, +.badge:not([data-badge])::after, +.badge[data-badge=""]::after { + background: #5764c6; + background-clip: padding-box; + border: .1rem solid #fff; + border-radius: 1rem; + color: #fff; + content: attr(data-badge); + display: inline-block; + -webkit-transform: translate(-.2rem, -.8rem); + -ms-transform: translate(-.2rem, -.8rem); + transform: translate(-.2rem, -.8rem); +} +.badge[data-badge]::after { + font-size: 1.1rem; + height: 1.8rem; + line-height: 1.2rem; + min-width: 1.8rem; + padding: .2rem .4rem; + text-align: center; + white-space: nowrap; +} +.badge:not([data-badge])::after, +.badge[data-badge=""]::after { + height: .8rem; + min-width: .8rem; + padding: 0; + width: .8rem; +} +.card { + background: #fff; + border: .1rem solid #efefef; + border-radius: .2rem; + display: block; + margin: 0; + padding: 0; + text-align: left; +} +.card .card-header, +.card .card-body, +.card .card-footer { + padding: 1.5rem 1.5rem 0 1.5rem; +} +.card .card-header:last-child, +.card .card-body:last-child, +.card .card-footer:last-child { + padding-bottom: 1.5rem; +} +.card .card-image { + padding-top: 1.5rem; +} +.card .card-image:first-child { + padding-top: 0; +} +.card .card-image:first-child img { + border-top-left-radius: .2rem; + border-top-right-radius: .2rem; +} +.card .card-image:last-child img { + border-bottom-left-radius: .2rem; + border-bottom-right-radius: .2rem; +} +.card .card-title { + font-size: 2rem; + line-height: 1; +} +.card .card-meta { + color: #888; + font-size: 1.3rem; +} +.chip { + -webkit-align-items: center; + align-items: center; + background: #efefef; + border-radius: .2rem; + color: #666; + display: -ms-inline-flexbox; + display: inline-flex; + display: -webkit-inline-flex; + -ms-flex-align: center; + height: 3rem; + margin: .1rem .2rem .1rem 0; + max-width: 100%; + padding: .5rem .8rem; + text-decoration: none; + vertical-align: middle; +} +.chip.active { + background: #5764c6; + color: #fff; +} +.chip .avatar { + font-size: 1rem; + height: 2rem; + margin-right: .4rem; + width: 2rem; +} +.chip .chip-meta { + background: rgba(0, 0, 0, .1); + font-size: 80%; + height: 3rem; + line-height: 2rem; + margin-left: .8rem; + margin-right: -.8rem; + opacity: .75; + padding: .5rem .8rem; +} +.chip .btn-clear::before { + font-size: 1.6rem; +} +.dropdown { + position: relative; +} +.dropdown .menu { + -webkit-animation: slide-down .216s; + animation: slide-down .216s; + display: none; + left: 0; + position: absolute; + top: 100%; +} +.dropdown.active .menu, +.dropdown .dropdown-toggle:focus + .menu, +.dropdown .menu:hover { + display: block; +} +.menu { + background: #fff; + border-radius: .2rem; + box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); + display: block; + margin: 0; + min-width: 18rem; + padding: .8rem; + text-align: left; + -webkit-transform: translateY(.5rem); + -ms-transform: translateY(.5rem); + transform: translateY(.5rem); + z-index: 999; +} +.menu .menu-item { + border-radius: .2rem; + display: block; + line-height: 2.4rem; + margin-top: 0; + padding: .3rem .8rem; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.menu .menu-item a { + border-radius: .2rem; + color: inherit; + display: block; + margin: -.3rem -.8rem; + padding: .3rem .8rem; + text-decoration: none; +} +.menu .menu-item a:focus, +.menu .menu-item a:hover { + color: #5764c6; +} +.menu .menu-item a:active, +.menu .menu-item a.active { + background: #eff1fa; + color: #4452c0; +} +.menu .menu-header { + color: #ccc; + display: block; + font-size: 1.2rem; + line-height: 1.8rem; + margin-top: 0; + padding: .2rem .8rem; +} +.menu .menu-header::after { + border-bottom: .1rem solid #efefef; + content: ""; + display: block; + height: .1rem; + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + width: 100%; +} +.menu .menu-header .menu-header-text { + background: #fff; + display: inline-block; + margin-left: -.6rem; + padding: 0 .6rem; + position: relative; + z-index: 99; +} +.modal { + -webkit-align-items: center; + align-items: center; + bottom: 0; + display: none; + -ms-flex-align: center; + -ms-flex-pack: center; + -ms-grid-row-align: center; + -webkit-justify-content: center; + justify-content: center; + left: 0; + opacity: 0; + overflow: hidden; + padding: 1rem; + position: fixed; + right: 0; + top: 0; +} +.modal:target, +.modal.active { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + opacity: 1; + z-index: 1988; +} +.modal:target .modal-overlay, +.modal.active .modal-overlay { + background: rgba(51, 51, 51, .5); + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; +} +.modal:target .modal-container, +.modal.active .modal-container { + -webkit-animation: slide-down .216s; + animation: slide-down .216s; + max-width: 64rem; +} +.modal.modal-sm .modal-container { + max-width: 32rem; +} +.modal-container { + background: #fff; + border-radius: .2rem; + box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); + display: block; + margin: 0 auto; + padding: 0; + text-align: left; + z-index: 1988; +} +.modal-container .modal-header { + padding: 1.5rem; +} +.modal-container .modal-header .modal-title { + font-size: 1.6rem; + margin: 0; +} +.modal-container .modal-body { + max-height: 50vh; + overflow-y: auto; + padding: 1.5rem; + position: relative; +} +.modal-container .modal-footer { + padding: 1.5rem; + text-align: right; +} +.breadcrumb, +.tab, +.pagination, +.nav { + list-style: none; + margin: .5rem 0; +} +.breadcrumb { + padding: 1.2rem; +} +.breadcrumb .breadcrumb-item { + display: inline-block; + margin: 0; +} +.breadcrumb .breadcrumb-item:last-child { + color: #888; +} +.breadcrumb .breadcrumb-item:not(:first-child)::before { + color: #c5c5c5; + content: "/"; + padding: 0 .4rem; +} +.tab { + -webkit-align-items: center; + align-items: center; + border-bottom: .1rem solid #efefef; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.tab .tab-item { + margin-top: 0; +} +.tab .tab-item.tab-action { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + text-align: right; +} +.tab .tab-item a { + border-bottom: .2rem solid transparent; + color: #333; + display: block; + margin-bottom: -.1rem; + margin-top: 0; + padding: .6rem .8rem; + text-decoration: none; +} +.tab .tab-item a:focus, +.tab .tab-item a:hover { + color: #5764c6; +} +.tab .tab-item a.badge { + padding-right: 0; +} +.tab .tab-item.active a, +.tab .tab-item a.active { + border-bottom-color: #5764c6; + color: #5764c6; +} +.tab.tab-block .tab-item { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + text-align: center; +} +.tab.tab-block .tab-item .badge[data-badge]::after { + position: absolute; + right: -1.4rem; + top: 1rem; + -webkit-transform: translate(-50%, -1rem); + -ms-transform: translate(-50%, -1rem); + transform: translate(-50%, -1rem); +} +.pagination { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; +} +.pagination .page-item { + margin: 1rem .1rem; +} +.pagination .page-item span { + display: inline-block; + padding: .6rem .4rem; +} +.pagination .page-item a { + border-radius: .2rem; + color: #666; + display: inline-block; + padding: .6rem .8rem; + text-decoration: none; +} +.pagination .page-item a:focus, +.pagination .page-item a:hover { + color: #5764c6; +} +.pagination .page-item.active a { + background: #5764c6; + color: #fff; +} +.pagination .page-item.page-prev, +.pagination .page-item.page-next { + -webkit-flex: 1 0 50%; + -ms-flex: 1 0 50%; + flex: 1 0 50%; +} +.pagination .page-item.page-next { + text-align: right; +} +.pagination .page-item .page-item-title { + margin: 0; +} +.pagination .page-item .page-item-meta { + margin: 0; + opacity: .5; +} +.nav { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.nav .nav-item a { + color: #666; + padding: .6rem .8rem; + text-decoration: none; +} +.nav .nav-item a:focus, +.nav .nav-item a:hover { + color: #5764c6; +} +.nav .nav-item.active > a { + color: #333; + font-weight: bold; +} +.nav .nav-item.active > a:focus, +.nav .nav-item.active > a:hover { + color: #5764c6; +} +.nav .nav { + margin-bottom: 1rem; + margin-left: 2rem; +} +.nav .nav a { + color: #808080; +} +.step { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + list-style: none; + margin: .5rem 0; + width: 100%; +} +.step .step-item { + -webkit-flex: 1 1 0; + -ms-flex: 1 1 0; + flex: 1 1 0; + margin-top: 0; + min-height: 2rem; + position: relative; + text-align: center; +} +.step .step-item:not(:first-child)::before { + background: #5764c6; + content: ""; + height: .2rem; + left: -50%; + position: absolute; + top: .9rem; + width: 100%; +} +.step .step-item a { + color: #888; + display: inline-block; + padding: 2rem 1rem 0; + text-decoration: none; +} +.step .step-item a::before { + background: #5764c6; + border: .2rem solid #fff; + border-radius: 50%; + content: ""; + display: block; + height: 1.2rem; + left: 50%; + position: absolute; + top: .4rem; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 1.2rem; + z-index: 99; +} +.step .step-item.active a::before { + background: #fff; + border: .2rem solid #5764c6; +} +.step .step-item.active ~ .step-item::before { + background: #efefef; +} +.step .step-item.active ~ .step-item a::before { + background: #c5c5c5; +} +.tile { + -webkit-align-content: space-between; + align-content: space-between; + -webkit-align-items: flex-start; + align-items: flex-start; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: start; + -ms-flex-line-pack: justify; + margin: 0; + padding: .5rem 0; +} +.tile .tile-icon { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.tile .tile-content { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.tile .tile-content:not(:first-child) { + padding-left: 1rem; +} +.tile .tile-content:not(:last-child) { + padding-right: 1rem; +} +.tile .tile-action { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.tile .tile-title { + font-size: 1.6rem; + font-weight: 500; +} +.tile .tile-meta { + color: #888; + font-size: 1.3rem; +} +.tile.tile-centered { + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + -ms-grid-row-align: center; +} +.tile.tile-centered .tile-content { + overflow: hidden; +} +.toast { + background: rgba(51, 51, 51, .9); + border: .1rem solid #333; + border-color: #333; + border-radius: .2rem; + color: #fff; + display: block; + padding: 1.4rem; + width: 100%; +} +.toast.toast-primary { + background: rgba(87, 100, 198, .9); + border-color: #5764c6; +} +.toast.toast-success { + background: rgba(50, 182, 67, .9); + border-color: #32b643; +} +.toast.toast-danger { + background: rgba(232, 86, 0, .9); + border-color: #e85600; +} +.toast a { + color: #fff; + text-decoration: underline; +} +.toast a:hover, +.toast a:focus, +.toast a:active { + opacity: .75; +} +.tooltip { + position: relative; +} +.tooltip::after { + background: rgba(51, 51, 51, .9); + border-radius: .2rem; + bottom: 100%; + color: #fff; + content: attr(data-tooltip); + display: block; + font-size: 1.2rem; + left: 50%; + line-height: 1.6rem; + max-width: 32rem; + opacity: 0; + overflow: hidden; + padding: .6rem 1rem; + pointer-events: none; + position: absolute; + text-overflow: ellipsis; + -webkit-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + transform: translate(-50%, 0); + transition: all .216s ease; + white-space: nowrap; + z-index: 99; +} +.tooltip:focus::after, +.tooltip:hover::after { + opacity: 1; + -webkit-transform: translate(-50%, -.5rem); + -ms-transform: translate(-50%, -.5rem); + transform: translate(-50%, -.5rem); +} +.tooltip[disabled], +.tooltip.disabled { + pointer-events: auto; +} +.tooltip.tooltip-right::after { + bottom: 50%; + left: 100%; + -webkit-transform: translate(0, 50%); + -ms-transform: translate(0, 50%); + transform: translate(0, 50%); +} +.tooltip.tooltip-right:focus::after, +.tooltip.tooltip-right:hover::after { + -webkit-transform: translate(.5rem, 50%); + -ms-transform: translate(.5rem, 50%); + transform: translate(.5rem, 50%); +} +.tooltip.tooltip-bottom::after { + bottom: auto; + top: 100%; + -webkit-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} +.tooltip.tooltip-bottom:focus::after, +.tooltip.tooltip-bottom:hover::after { + -webkit-transform: translate(-50%, .5rem); + -ms-transform: translate(-50%, .5rem); + transform: translate(-50%, .5rem); +} +.tooltip.tooltip-left::after { + bottom: 50%; + left: auto; + right: 100%; + -webkit-transform: translate(0, 50%); + -ms-transform: translate(0, 50%); + transform: translate(0, 50%); +} +.tooltip.tooltip-left:focus::after, +.tooltip.tooltip-left:hover::after { + -webkit-transform: translate(-.5rem, 50%); + -ms-transform: translate(-.5rem, 50%); + transform: translate(-.5rem, 50%); +} +@-webkit-keyframes loading { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes loading { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes slide-down { + 0% { + opacity: 0; + -webkit-transform: translateY(-3rem); + transform: translateY(-3rem); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes slide-down { + 0% { + opacity: 0; + -webkit-transform: translateY(-3rem); + transform: translateY(-3rem); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +.divider { + border-bottom: .1rem solid #efefef; + display: block; + margin: .5rem 0; +} +.loading { + color: transparent !important; + min-height: 1.6rem; + pointer-events: none; + position: relative; +} +.loading::after { + -webkit-animation: loading 500ms infinite linear; + animation: loading 500ms infinite linear; + border: .2rem solid #5764c6; + border-radius: .8rem; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1.6rem; + left: 50%; + margin-left: -.8rem; + margin-top: -.8rem; + position: absolute; + top: 50%; + width: 1.6rem; +} +.clearfix::after, +.container::after { + clear: both; + content: ""; + display: table; +} +.float-left { + float: left !important; +} +.float-right { + float: right !important; +} +.rel { + position: relative; +} +.abs { + position: absolute; +} +.fixed { + position: fixed; +} +.centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} +.mt-10 { + margin-top: 1rem; +} +.mr-10 { + margin-right: 1rem; +} +.mb-10 { + margin-bottom: 1rem; +} +.ml-10 { + margin-left: 1rem; +} +.mt-5 { + margin-top: .5rem; +} +.mr-5 { + margin-right: .5rem; +} +.mb-5 { + margin-bottom: .5rem; +} +.ml-5 { + margin-left: .5rem; +} +.pt-10 { + padding-top: 1rem; +} +.pr-10 { + padding-right: 1rem; +} +.pb-10 { + padding-bottom: 1rem; +} +.pl-10 { + padding-left: 1rem; +} +.pt-5 { + padding-top: .5rem; +} +.pr-5 { + padding-right: .5rem; +} +.pb-5 { + padding-bottom: .5rem; +} +.pl-5 { + padding-left: .5rem; +} +.block { + display: block; +} +.inline { + display: inline; +} +.inline-block { + display: inline-block; +} +.flex { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; +} +.inline-flex { + display: inline-flex; + display: -ms-inline-flexbox; + display: -webkit-inline-flex; +} +.hide { + display: none !important; +} +.visible { + visibility: visible; +} +.invisible { + visibility: hidden; +} +.text-hide { + background: transparent; + border: 0; + color: transparent; + font-size: 0; + line-height: 0; + text-shadow: none; +} +.text-assistive { + border: 0; + clip: rect(0, 0, 0, 0); + height: .1rem; + margin: -.1rem; + overflow: hidden; + padding: 0; + position: absolute; + width: .1rem; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.text-normal { + font-weight: normal; +} +.text-bold { + font-weight: bold; +} +.text-italic { + font-style: italic; +} +.text-large { + font-size: 1.2em; +} +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.text-clip { + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} +.text-break { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + word-break: break-word; + word-wrap: break-word; +} +.hand { + cursor: pointer; +} +.shadow { + box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); +} +.light-shadow { + box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15); +} +.rounded { + border-radius: .2rem; +} +.circle { + border-radius: 50%; +}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index f476084..8082ab7 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -7,8 +7,8 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="https://github.com/picturepan2/" /> <title>Elements - Spectre.css</title> - <link rel="stylesheet" href="../dist/spectre.css" /> - <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="css/spectre.css" /> + <link rel="stylesheet" href="css/docs.css" /> <link rel="stylesheet" href="font/style.css" /> </head> <body> diff --git a/docs/index.html b/docs/index.html index 562bd90..c3a7140 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,8 +7,8 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="author" content="https://github.com/picturepan2/" /> <title>Spectre.css - The lightweight, responsive and modern CSS framework</title> - <link rel="stylesheet" href="../dist/spectre.css" /> - <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="css/spectre.css" /> + <link rel="stylesheet" href="css/docs.css" /> <link rel="stylesheet" href="font/style.css" /> </head> <body> diff --git a/docs/layout.html b/docs/layout.html index 722a1f4..5c3b472 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -7,8 +7,8 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="https://github.com/picturepan2/" /> <title>Layout - Spectre.css</title> - <link rel="stylesheet" href="../dist/spectre.css" /> - <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="css/spectre.css" /> + <link rel="stylesheet" href="css/docs.css" /> <link rel="stylesheet" href="font/style.css" /> </head> <body> diff --git a/docs/utilities.html b/docs/utilities.html index da476ee..dbeb98d 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -7,8 +7,8 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="https://github.com/picturepan2/" /> <title>Utilities - Spectre.css </title> - <link rel="stylesheet" href="../dist/spectre.css" /> - <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="css/spectre.css" /> + <link rel="stylesheet" href="css/docs.css" /> <link rel="stylesheet" href="font/style.css" /> </head> <body> diff --git a/gulpfile.js b/gulpfile.js index a084646..798ced7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,18 +27,12 @@ gulp.task('build', function() { }); gulp.task('docs', function() { - gulp.src('docs/**/*.less') + gulp.src(['./docs/css/*.less', './*.less']) .pipe(less({ plugins: [autoprefix] })) .pipe(csscomb()) - .pipe(cleancss()) - .pipe(rename({ - suffix: '.min' - })) - .pipe(gulp.dest(function(file) { - return file.base; - })) + .pipe(gulp.dest('./docs/css')) }); gulp.task('default', ['build']); diff --git a/index.html b/index.html deleted file mode 100644 index 0ef74b7..0000000 --- a/index.html +++ /dev/null @@ -1,3044 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <meta name="robots" content="index, follow" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="author" content="https://github.com/picturepan2/" /> - <title>Spectre.css - a lightweight, responsive and modern CSS framework</title> - <link rel="stylesheet" href="dist/spectre.css" /> - <link rel="stylesheet" href="demo/font/style.css" /> - <style> - header > h4, - header > h5 { - margin-top: 4rem; - margin-bottom: 2rem; - } - .bg-grey { - background-color: #efefef; - padding: 1rem .5rem; - border-radius: .2rem; - } - .navbar-brand { - font-size: 2rem; - font-weight: bold; - padding-right: 2rem; - text-decoration: none; - vertical-align: middle; - } - .navbar-brand .icon { - font-size: 1.3333em; - line-height: .8em; - margin-right: .2rem; - vertical-align: -20%; - } - .grid-hero { - margin-top: 10rem; - margin-bottom: 10rem; - } - .grid-hero h3 { - margin-bottom: 5rem; - } - .grid-hero .notes { - margin: 4rem 0; - } - .grid-footer { - color: #888; - margin-top: 4rem; - margin-bottom: 4rem; - } - .grid-footer a { - color: #666; - } - .container header { - padding-top: 3rem; - } - .notes { - margin: 4rem 0; - color: #666; - } - .empty .icon { - font-size: 4rem; - } - .code { - color: #666; - } - .code .com { - color: #adadad; - } - .code .tag { - color: #4452c0; - } - .code .atn { - color: #666; - } - .code .atv { - color: #e06870; - } - </style> -</head> -<body> - <section class="section bg-grey"> - <section id="overview" class="grid-hero container grid-960"> - <header class="text-center"><h3>Spectre.css</h3></header> - <section> - <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> - <ul> - <li>lightweight and clean starting point for your project and prototype</li> - <li>flexbox, responsive and mobile-friendly layout</li> - <li>carefully designed elements</li> - <li>built in useful components and utilities</li> - <li>responsive email templates <span class="label label-primary">soon</span></li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub Repo</a> - <a href="#getting-started" class="btn btn-primary">Documentation</a> - </div> - </section> - </section> - </section> - <section class="section"> - <section id="getting-started" class="container grid-960"> - <header class="text-center"><h4>getting started</h4></header> - <section class="notes"> - <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p> - <h5>Install manually</h5> - <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 30KB):</p> - <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> - <h5>Install with NPM</h5> - <!-- install with npm example --> -<pre class="code lang-html"> -<span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save -</pre> - <h5>Install with Bower</h5> - <!-- install with bower example --> -<pre class="code lang-html"> -<span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save -</pre> - <p>And include it in your website or Web app <code><head></code></p> - <!-- install manually example --> -<pre class="code lang-html"> -<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"dist/spectre.min.css"</span> /> -</pre> - - </section> - </section> - - <section id="compiling" class="container grid-960"> - <header class="text-center"><h4>compiling custom version</h4></header> - <section class="notes"> - <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>.</p> - <p>Then, you can build the CSS file from the command line:</p> - <ol> - <li>Navigate to the root directory of Spectre where you can find <code>package.json</code> file.</li> - <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li> - <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li> - <li>You can find compiled CSS files in <code>/dist</code> directory.</li> - </ol> - <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p> - </section> - </section> - - <section id="elements" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item active"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#typography" class="btn btn-primary">typography</a> - <a href="#tables" class="btn btn-primary">tables</a> - <a href="#buttons" class="btn btn-primary">buttons</a> - <a href="#forms" class="btn btn-primary">forms</a> - <a href="#labels" class="btn btn-primary">labels</a> - <a href="#media" class="btn btn-primary">media</a> - </div> - </section> - </section> - - <section id="typography" class="container grid-960"> - <header class="text-center"><h4>typography</h4></header> - <section class="notes"> - <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements. </p> - </section> - - <header class="text-center"><h5>headings</h5></header> - <h1>H1 Title <small class="label">5rem</small></h1> - <h2>H2 Title <small class="label">4rem</small></h2> - <h3>H3 Title <span class="label">3rem</span></h3> - <h4>H4 Title <span class="label">2.4rem</span></h4> - <h5>H5 Title <span class="label">2rem</span></h5> - <h6>H6 Title <span class="label">1.6rem</span></h6> - - <!-- headings example --> -<pre class="code lang-html"> -<<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> -<<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>> -</pre> - - <header class="text-center"><h5>paragraphs</h5></header> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#typography">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - - <!-- headings example --> -<pre class="code lang-html"> -<<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>> -</pre> - - <header class="text-center"><h5>semantic text elements</h5></header> - <div class="columns"> - <div class="column col-3 col-xs-12"> - <abbr title="Internationalization">I18N</abbr> - <code class="ml-10"><abbr></code> - </div> - <div class="column col-3 col-xs-12"> - <strong>Bold</strong> - <code class="ml-10"><strong></code> <code><b></code> - </div> - <div class="column col-3 col-xs-12"> - <cite>Citation</cite> - <code class="ml-10"><cite></code> - </div> - <div class="column col-3 col-xs-12"> - <code>Hello World!</code> - <code class="ml-10"><code></code> - </div> - <div class="column col-3 col-xs-12"> - <del>Deleted</del> - <code class="ml-10"><del></code> - </div> - <div class="column col-3 col-xs-12"> - <em>Emphasis</em> - <code class="ml-10"><em></code> - </div> - <div class="column col-3 col-xs-12"> - <i>Italic</i> - <code class="ml-10"><i></code> - </div> - <div class="column col-3 col-xs-12"> - <ins>Inserted</ins> - <code class="ml-10"><ins></code> - </div> - <div class="column col-3 col-xs-12"> - <kbd>Ctrl + S</kbd> - <code class="ml-10"><kbd></code> - </div> - <div class="column col-3 col-xs-12"> - <mark>Highlighted</mark> - <code class="ml-10"><mark></code> - </div> - <div class="column col-3 col-xs-12"> - <ruby> - 漢 <rt>kan</rt> - 字 <rt>ji</rt> - </ruby> - <code class="ml-10"><ruby></code> - </div> - <div class="column col-3 col-xs-12"> - <s>Strikethrough</s> - <code class="ml-10"><s></code> - </div> - <div class="column col-3 col-xs-12"> - <samp>Sample</samp> - <code class="ml-10"><samp></code> - </div> - <div class="column col-3 col-xs-12"> - Text <sub>Subscripted</sub> - <code class="ml-10"><sub></code> - </div> - <div class="column col-3 col-xs-12"> - Text <sup>Superscripted</sup> - <code class="ml-10"><sup></code> - </div> - <div class="column col-3 col-xs-12"> - <time>20:00</time> - <code class="ml-10"><time></code> - </div> - <div class="column col-3 col-xs-12"> - <u>Underline</u> - <code class="ml-10"><u></code> - </div> - <div class="column col-3 col-xs-12"> - <var>x</var> = <var>y</var> + 2 - <code class="ml-10"><var></code> - </div> - </div> - - <header class="text-center"><h5>optimized for east asian fonts</h5></header> - <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> - <h6>Chinese (Simplified)</h6> - <p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p> - <h6>Chinese (Tranditional)</h6> - <p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p> - <h6>Japanese</h6> - <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> - <h6>Korean</h6> - <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> - - <section class="notes"> - <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p> - </section> - - <!-- asian example --> -<pre class="code lang-html"> -<<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -<<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ja"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -</pre> - - <header class="text-center"><h5>blockquote</h5></header> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <cite>- Source</cite> - </blockquote> - - <!-- blockquote example --> -<pre class="code lang-html"> -<<span class="tag">blockquote</span>> - <<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<<span class="tag">/p</span>> - <<span class="tag">cite</span>>- Source<<span class="tag">/cite</span>> -<<span class="tag">/blockquote</span>> -</pre> - - <header class="text-center"><h5>lists</h5></header> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <ul class="list"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ul> - </li> - <li>list item 3</li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ol class="list"> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ol> - </li> - <li>list item 3</li> - </ol> - </div> - <div class="column col-4 col-xs-12"> - <dl class="list"> - <dt>description list term 1</dt> - <dd>description list description 1</dd> - <dt>description list term 2</dt> - <dd>description list description 2</dd> - <dt>description list term 3</dt> - <dd>description list description 3</dd> - </dl> - </div> - </div> - - <!-- lists example --> -<pre class="code lang-html"> -<span class="com"><!-- unordered list --></span> -<<span class="tag">ul</span>> - <<span class="tag">li</span>>list item 1<<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 2 - <<span class="tag">ul</span>> - <<span class="tag">li</span>>list item 2.1<<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 2.2<<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 2.3<<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 3<<span class="tag">/li</span>> -<<span class="tag">/ul</span>> - -<span class="com"><!-- description list --></span> -<<span class="tag">dl</span>> - <<span class="tag">dt</span>>description list term<<span class="tag">/dt</span>> - <<span class="tag">dd</span>>description list description<<span class="tag">/dd</span>> -<<span class="tag">/dl</span>> -</pre> - - </section> - - <section id="tables" class="container grid-960"> - <header class="text-center"><h4>tables</h4></header> - <section class="notes"> - <p><strong>Tables</strong> include default styles for tables and data sets.</p> - </section> - - <table class="table table-striped"> - <thead> - <tr> - <th>name</th> - <th>duration</th> - <th>genre</th> - <th>release date</th> - </tr> - </thead> - <tbody> - <tr> - <td>The Shawshank Redemption</td> - <td>2h 22min</td> - <td>Crime, Drama</td> - <td>14 October 1994 <span class="label">USA</span></td> - </tr> - <tr> - <td>The Godfather</td> - <td>2h 55min</td> - <td>Crime, Drama</td> - <td>24 March 1972 <span class="label">USA</span></td> - </tr> - <tr> - <td>Schindler's List</td> - <td>3h 15min</td> - <td>Biography, Drama, History</td> - <td>4 February 1994 <span class="label">USA</span></td> - </tr> - <tr> - <td>Se7en</td> - <td>2h 7min</td> - <td>Crime, Drama, Mystery</td> - <td>22 September 1995 <span class="label">USA</span></td> - </tr> - </tbody> - </table> - <section class="notes"> - <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> - <p>Use the class <code>selected</code> to make <tr> element highlighted. </p> - </section> - - <!-- tables example --> -<pre class="code lang-html"> -<<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> - <<span class="tag">thead</span>> - <<span class="tag">tr</span>> - <<span class="tag">th</span>>name<<span class="tag">/th</span>> - <<span class="tag">th</span>>duration<<span class="tag">/th</span>> - <<span class="tag">th</span>>genre<<span class="tag">/th</span>> - <<span class="tag">th</span>>release date<<span class="tag">/th</span>> - <<span class="tag">/tr</span>> - <<span class="tag">/thead</span>> - <<span class="tag">tbody</span>> - <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"selected"</span>> - <<span class="tag">td</span>>The Shawshank Redemption<<span class="tag">/td</span>> - <<span class="tag">td</span>>2h 22min<<span class="tag">/td</span>> - <<span class="tag">td</span>>Crime, Drama<<span class="tag">/td</span>> - <<span class="tag">td</span>>14 October 1994<<span class="tag">/td</span>> - <<span class="tag">/tr</span>> - <<span class="tag">/tbody</span>> -<<span class="tag">/table</span>> -</pre> - - </section> - - <section id="buttons" class="container grid-960"> - <header class="text-center"><h4>buttons</h4></header> - <section class="notes"> - <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> - </section> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn">default button</button> - <button class="btn loading">default button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary">primary button</button> - <button class="btn btn-primary loading">primary button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-link">link button</button> - <button class="btn btn-link loading">link button</button> - </div> - </div> - <section class="notes"> - <p>Add the class <code>btn</code> to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the class <code>loading</code> can show loading indicator. </p> - </section> - - <!-- buttons example --> -<pre class="code lang-html"> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> - -<span class="com"><!-- a button with loading state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> -</pre> - - <section class="notes"> - <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p> - </section> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn disabled">default button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary" disabled>primary button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-link" disabled>link button</button> - </div> - </div> - - <header class="text-center"><h5>button sizes</h5></header> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn btn-lg">large button</button> - <button class="btn">normal button</button> - <button class="btn btn-sm">small button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-block">block button</button> - </div> - </div> - <section class="notes"> - <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p> - </section> - - <!-- buttons example --> -<pre class="code lang-html"> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> - -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> -</pre> - - <div class="columns"> - <div class="column"> - <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button> - <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button> - <button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button> - </div> - </div> - <section class="notes"> - <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p> - </section> - - <!-- buttons example --> -<pre class="code lang-html"> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> large<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> normal<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> -</pre> - - <header class="text-center"><h5>button groups</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <div class="btn-group"> - <button class="btn tooltip" data-tooltip="Lorem ipsum">first button</button> - <button class="btn tooltip" data-tooltip="Lorem ipsum">second button</button> - <button class="btn tooltip" data-tooltip="Lorem ipsum">third button</button> - </div> - </div> - <div class="column col-xs-12"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">first button</button> - <button class="btn btn-primary">second button</button> - <button class="btn btn-primary">third button</button> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="btn-group"> - <button class="btn btn-sm active">first button</button> - <button class="btn btn-sm">second button</button> - <button class="btn btn-sm">third button</button> - </div> - </div> - <div class="column col-xs-12"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary btn-sm active">first button</button> - <button class="btn btn-primary btn-sm">second button</button> - <button class="btn btn-primary btn-sm">third button</button> - </div> - </div> - </div> - <section class="notes"> - <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p> - </section> - - <!-- button groups example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>first button<<span class="tag">/button</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>second button<<span class="tag">/button</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>third button<<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="forms" class="container grid-960"> - <header class="text-center"><h4>forms</h4></header> - <section class="notes"> - <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <form action="#forms"> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Female - </label> - </div> - <div class="form-group"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox" /> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-3">Message</label> - <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox" /> - <i class="form-icon"></i> Remember me - </label> - </div> - <div class="form-group"> - <button class="btn btn-primary" type="submit">Submit</button> - <button class="btn btn-link" type="reset">Cancel</button> - </div> - </form> - </div> - </div> - - <!-- forms example --> -<pre class="code lang-html"> -<<span class="tag">form</span>> - <span class="com"><!-- form input control --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> - <<span class="tag">/div</span>> - <span class="com"><!-- form radio control --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span>>Gender<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Male - <<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Female - <<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form select control --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">"form-select"</span>> - <<span class="tag">option</span>>Choose an option<<span class="tag">/option</span>> - <<span class="tag">option</span>>Slack<<span class="tag">/option</span>> - <<span class="tag">option</span>>Skype<<span class="tag">/option</span>> - <<span class="tag">option</span>>Hipchat<<span class="tag">/option</span>> - <<span class="tag">/select</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form switch control --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-switch"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Send me emails with news and tips - <<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form textarea control --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-3"</span>>Message<<span class="tag">/label</span>> - <<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">id</span>=<span class="atv">"input-example-3"</span> <span class="atn">placeholder</span>=<span class="atv">"Textarea"</span> <span class="atn">rows</span>=<span class="atv">"3"</span>><<span class="tag">/textarea</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form checkbox control --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me - <<span class="tag">/label</span>> - <<span class="tag">/div</span>> -<<span class="tag">/form</span>> -</pre> - - <section class="notes"> - <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> - <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the <form> container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p> - </section> - - <div class="columns"> - <div class="column col-6 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-4">Name</label> - </div> - <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-5">Email</label> - </div> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label">Gender</label> - </div> - <div class="col-9"> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked /> - <i class="form-icon"></i> Female - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <select class="form-select" multiple> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <label class="form-switch"> - <input type="checkbox" /> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-6">Message</label> - </div> - <div class="col-9"> - <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <label class="form-checkbox"> - <input type="checkbox" /> - <i class="form-icon"></i> Remember me - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <button class="btn btn-primary" type="submit">Submit</button> - <button class="btn btn-link" type="reset">Cancel</button> - </div> - </div> - </form> - </div> - </div> - - <!-- forms example --> -<pre class="code lang-html"> -<<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-3"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-9"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form structure --></span> -<<span class="tag">/form</span>> -</pre> - - <div class="columns"> - <div class="column col-6 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-8">Email</label> - </div> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-9">URL</label> - </div> - <div class="col-9"> - <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="https://github.com/picturepan2/spectre"> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-10">Search</label> - </div> - <div class="col-9"> - <input class="form-input" type="search" id="input-example-10" placeholder="Search" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-11">Tel</label> - </div> - <div class="col-9"> - <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-12">Password</label> - </div> - <div class="col-9"> - <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-13">Number</label> - </div> - <div class="col-9"> - <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-14">Date</label> - </div> - <div class="col-9"> - <input class="form-input" type="date" id="input-example-14" value="2016-12-31" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-15">Color</label> - </div> - <div class="col-9"> - <input class="form-input" type="color" id="input-example-15" value="#5764c6" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-16">File</label> - </div> - <div class="col-9"> - <input class="form-input" type="file" id="input-example-16" value="" /> - </div> - </div> - <div class="form-group hide"> - <div class="col-3"> - <label class="form-label" for="input-example-17">Slider</label> - </div> - <div class="col-9"> - <input class="form-input" type="range" min="0" max="50" value="25" /> - </div> - </div> - <div class="form-group hide"> - <div class="col-3"> - <label class="form-label" for="input-example-18">Progress</label> - </div> - <div class="col-9"> - <progress class="progress" value="50" max="100"></progress> - </div> - </div> - </form> - </div> - </div> - - <section class="notes"> - <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p> - </section> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" /> - <p class="form-input-hint">The name is invaild.</p> - </div> - <div class="form-group has-success"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> - <p class="form-input-hint">The email is available.</p> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <select class="form-select is-danger"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is invaild.</p> - </div> - <div class="form-group has-success"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is available.</p> - </div> - </div> - </div> - - <!-- forms example --> -<pre class="code lang-html"> -<<span class="tag">form</span>> - <span class="com"><!-- form validation class: has-success --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> - - <span class="com"><!-- form validation class: is-success --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> -<<span class="tag">/form</span>> -</pre> - - <section class="notes"> - <p>For smaller or larger input and select controls, you could add <code>input-sm</code>/<code>input-lg</code> and <code>select-sm</code>/<code>select-lg</code> to the elements.</p> - </section> - - <div class="columns"> - <div class="column col-4"> - <input class="form-input input-sm" type="text" placeholder="Name" /> - </div> - <div class="column col-4"> - <select class="form-select select-sm"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - <div class="columns"> - <div class="column col-4"> - <input class="form-input input-lg" type="text" placeholder="Name" /> - </div> - <div class="column col-4"> - <select class="form-select select-lg"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - - <header class="text-center"><h5>input groups</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name" /> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-sm" placeholder="username" /> - <span class="input-group-addon addon-sm">@slack.com</span> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name" /> - <button class="btn btn-primary input-group-btn btn-sm">Submit</button> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input" placeholder="username" /> - <span class="input-group-addon">@slack.com</span> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> - <button class="btn btn-primary input-group-btn">Submit</button> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name" /> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-lg" placeholder="username" /> - <span class="input-group-addon addon-lg">@slack.com</span> - </div> - </div> - <div class="column"> - <div class="input-group"> - <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name" /> - <button class="btn btn-primary input-group-btn btn-lg">Submit</button> - </div> - </div> - </div> - <section class="notes"> - <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p> - </section> - - <!-- input groups example --> -<pre class="code lang-html"> -<span class="com"><!-- normal input group --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> -<<span class="tag">/div</span>> - -<span class="com"><!-- large input group --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon addon-lg"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> -<<span class="tag">/div</span>> - -<span class="com"><!-- normal input group with button --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Submit<<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="labels" class="container grid-960"> - <header class="text-center"><h4>labels</h4></header> - <section class="notes"> - <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> - </section> - <div class="columns"> - <div class="column"> - <span class="label">default label</span> - <span class="label label-primary">primary label</span> - <span class="label label-success">success label</span> - <span class="label label-danger">danger label</span> - </div> - </div> - <section class="notes"> - <p>Add the class <code>label</code> to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code> and <code>label-danger</code> for a primary colored label.</p> - </section> - - <!-- labels example --> -<pre class="code lang-html"> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> -</pre> - - </section> - - <section id="media" class="container grid-960"> - <header class="text-center"><h4>media</h4></header> - <section class="notes"> - <p><strong>Media</strong> include responsive images, figures and video classes. </p> - <p>Add the class <code>img-responsive</code> to <img> elements. The images will scale with the parent sizes.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> - </div> - </div> - - <section class="notes"> - <p>You can use the element <code><figure></code> for an image with a caption. Add the class <code>figure</code> to <figure> element. The images with the class <code>img-responsive</code> will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="figure"> - <img src="demo/img/osx-yosemite-2.jpg" class="img-responsive rounded" /> - <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> - </figure> - - </div> - </div> - - <section class="notes"> - <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="video-responsive"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe> - </div> - </div> - </div> - - <!-- media example --> -<pre class="code lang-html"> -<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> - <<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">"figure-caption text-center"</span>>macOS Yosemite wallpaper<<span class="tag">/figcaption</span>> -<<span class="tag">/figure</span>> - -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span>> - <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"https://www.youtube.com/embed/BzMLA8YIgG0;</span> <span class="atn">width</span>=<span class="atv">"560"</span> <span class="atn">height</span>=<span class="atv">"315"</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="layout" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item active"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#grid" class="btn btn-primary">flexbox grid</a> - <a href="#responsive" class="btn btn-primary">responsive</a> - <a href="#navbar" class="btn btn-primary">navbar</a> - <a href="#empty" class="btn btn-primary">empty states</a> - </div> - </section> - </section> - - <section id="grid" class="container grid-960"> - <header class="text-center"><h4>flexbox grid</h4></header> - <section class="notes"> - <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> - </section> - <div class="columns"> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - </div> - - <div class="columns"> - <div class="column col-12"> - <div class="bg-grey">col-12 (100%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-9"> - <div class="bg-grey">col-9 (75%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-grey">col-6 (50%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-3"> - <div class="bg-grey">col-3 (25%)</div> - </div> - </div> - - <section class="notes"> - <p>Add the class <code>columns</code> to a container with the class <code>container</code>. And add any element you want with classname <code>column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> - <p>And you can add the class <code>col-gapless</code> to have gapless columns.</p> - </section> - - <div class="columns col-gapless"> - <div class="column col-6"> - <div class="bg-grey">col-6 (gapless)</div> - </div> - <div class="column col-6"> - <div class="bg-grey">col-6 (gapless)</div> - </div> - </div> - - <section class="notes"> - <p>By default, Spectre grid has multi-line flexbox enabled. You can add the class <code>col-oneline</code> to <code>columns</code> to make all its child columns positioned in the same single row.</p> - </section> - - <div class="columns col-oneline"> - <div class="column col-8"> - <div class="bg-grey">col-8</div> - </div> - <div class="column col-8"> - <div class="bg-grey">col-8</div> - </div> - </div> - - <!-- layout example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-3"</span>>col-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-1"</span>>col-1<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns col-gapless"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="responsive" class="container grid-960"> - <header class="text-center"><h4>responsive grid</h4></header> - <div class="columns col-multiline"> - <div class="column col-md-6 col-xs-12"> - <div class="bg-grey">col-md-6</div> - </div> - <div class="column col-md-3 col-xs-12"> - <div class="bg-grey">col-md-3</div> - </div> - <div class="column col-md-3 col-xs-12"> - <div class="bg-grey">col-md-3</div> - </div> - </div> - - <div class="columns"> - <div class="column col-sm-6"> - <div class="bg-grey">col-sm-6</div> - </div> - <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> - </div> - <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> - </div> - </div> - - <div class="columns"> - <div class="column col-xs-6"> - <div class="bg-grey">col-xs-6</div> - </div> - <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> - </div> - <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> - </div> - </div> - - <section class="notes"> - <p>Spectre provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code>, <code>.col-md-[1-12]</code>, <code>.col-lg-[1-12]</code> and <code>.col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> - <ul> - <li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li> - <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li> - <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li> - <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li> - <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> - <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> - </ul> - </section> - - <!-- layout example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-6"</span>>col-xs-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - <section class="notes"> - <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p> - <ul> - <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li> - <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li> - <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li> - <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> - <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code> or online.</p> - <p><a href="http://picturepan2.github.io/spectre/tools/resizer/" target="_blank" class="btn btn-primary">Responsive Resizer</a></p> - </section> - </section> - - <section id="navbar" class="container grid-960"> - <header class="text-center"><h4>navbar</h4></header> - <section class="notes"> - <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p> - </section> - <div class="columns"> - <div class="column"> - <section class="navbar"> - <section class="navbar-section"> - <a href="#navbar" class="navbar-brand"> - <i class="icon icon-pages"></i> Spectre.css - </a> - <a href="#navbar" class="btn btn-link">features</a> - <a href="#navbar" class="btn btn-link">documents</a> - </section> - <section class="navbar-section"> - <div class="input-group input-inline"> - <input class="form-input" type="text" placeholder="search" /> - <button class="btn btn-primary input-group-btn">Search</button> - </div> - </section> - </section> - </div> - </div> - - <section class="notes"> - <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the class <code>navbar-section</code> will be evenly distributed in the container.</p> - </section> - - <!-- navbar example --> -<pre class="code lang-html"> -<<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-pages"</span>><<span class="tag">/i</span>> Spectre.css - <<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>features<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>documents<<span class="tag">/a</span>> - <<span class="tag">/section</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">/section</span>> -<<span class="tag">/header</span>> -</pre> - - </section> - - <section id="empty" class="container grid-960"> - <header class="text-center"><h4>empty states / blank slates</h4></header> - <section class="notes"> - <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <section class="empty"> - <i class="icon icon-markunread"></i> - <p class="empty-title">You have no new messages</p> - <p class="empty-meta">Click the button to start a conversation.</p> - <button class="empty-action btn btn-primary">Send a message</button> - </section> - </div> - <div class="column col-6 col-xs-12"> - <section class="empty"> - <i class="icon icon-people"></i> - <p class="empty-title">You are not following anyone</p> - <div class="empty-action input-group"> - <input type="text" class="form-input" placeholder="" /> - <button class="btn btn-primary input-group-btn">Search</button> - </div> - </section> - </div> - </div> - - <section class="notes"> - <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> - </section> - - <!-- empty states example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-title"</span>>You have no new messages<<span class="tag">/p</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-meta"</span>>Click the button to start a conversation.<<span class="tag">/p</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"empty-action btn btn-primary"</span>>Send a message<<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="components" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item active"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#avatars" class="btn btn-primary">avatars</a> - <a href="#chips" class="btn btn-primary">chips</a> - <a href="#autocomplete" class="btn btn-primary">autocomplete</a> - <a href="#tooltips" class="btn btn-primary">tooltips</a> - <a href="#badges" class="btn btn-primary">badges</a> - <a href="#toasts" class="btn btn-primary">toasts</a> - <a href="#menus" class="btn btn-primary">menus</a> - <a href="#dropdowns" class="btn btn-primary">dropdowns</a> - <a href="#navigation" class="btn btn-primary">navigation</a> - <a href="#modals" class="btn btn-primary">modals</a> - <a href="#cards" class="btn btn-primary">cards</a> - </div> - </section> - </section> - - <section id="avatars" class="container grid-960"> - <header class="text-center"><h4>avatars</h4></header> - <section class="notes"> - <p><strong>Avatars</strong> are user profile pictures. </p> - </section> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="demo/img/avatar-1.png" /> - </figure> - <figure class="avatar avatar-lg"> - <img src="demo/img/avatar-2.png" /> - </figure> - <figure class="avatar"> - <img src="demo/img/avatar-3.png" /> - </figure> - <figure class="avatar avatar-sm"> - <img src="demo/img/avatar-4.png" /> - </figure> - <figure class="avatar avatar-xs"> - <img src="demo/img/avatar-5.png" /> - </figure> - </div> - <div class="column col-4 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="demo/img/avatar-1.png" /> - <img src="demo/img/avatar-2.png" class="avatar-icon" /> - </figure> - <figure class="avatar avatar-lg"> - <img src="demo/img/avatar-2.png" /> - <img src="demo/img/avatar-3.png" class="avatar-icon" /> - </figure> - <figure class="avatar"> - <img src="demo/img/avatar-3.png" /> - <img src="demo/img/avatar-4.png" class="avatar-icon" /> - </figure> - <figure class="avatar avatar-sm"> - <img src="demo/img/avatar-4.png" /> - <img src="demo/img/avatar-5.png" class="avatar-icon" /> - </figure> - <figure class="avatar avatar-xs"> - <img src="demo/img/avatar-5.png" /> - <img src="demo/img/avatar-1.png" class="avatar-icon" /> - </figure> - </div> - - <div class="column col-4 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure> - </div> - </div> - - <section class="notes"> - <p>Add the class <code>avatar</code> to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> - <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> - </section> - - <div class="columns"> - <div class="column"> - <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-1.png" /> - </figure> - <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-2.png" /> - </figure> - <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-3.png" /> - </figure> - <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-4.png" /> - </figure> - <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-5.png" /> - </figure> - </div> - </div> - - <!-- avatars example --> -<pre class="code lang-html"> -<span class="com"><!-- Basic avatar examples --></span> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> -<<span class="tag">/figure</span>> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> /> -<<span class="tag">/figure</span>> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/figure</span>> - -<span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> -<<span class="tag">/figure</span>> -</pre> - - </section> - - <section id="chips" class="container grid-960"> - <header class="text-center"><h4>chips</h4></header> - <section class="notes"> - <p><strong>Chips</strong> are complex entities in small blocks. </p> - </section> - <div class="columns"> - <div class="column col-xs-12"> - <div class="chip-sm"> - Crime - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Drama - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Biography - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Mystery - <button class="btn btn-clear"></button> - </div> - </div> - <div class="column col-xs-12"> - <div class="chip-sm"> - <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> - Tony Stark - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-1.png" class="avatar" /> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-4.png" class="avatar" /> - Steve Rogers - </div> - </div> - </div> - - <section class="notes"> - <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> - </section> - - <div class="columns hide"> - <div class="column col-4 col-xs-12"> - <div class="chip"> - <div class="chip-icon"> - <img src="demo/img/avatar-1.png" class="avatar" /> - </div> - <div class="chip-content"> - <div class="chip-title">Tony Stark</div> - <div class="chip-meta">Iron man</div> - </div> - <div class="chip-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> - </div> - </div> - - <!-- chips example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - Crime - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> -<<span class="tag">/div</span>> - -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="autocomplete" class="container grid-960"> - <header class="text-center"><h4>autocomplete</h4></header> - <section class="notes"> - <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> - <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> - Tony Stark - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-1.png" class="avatar" /> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-4.png" class="avatar" /> - Steve Rogers - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Bruce Banner - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm selected"> - Natasha Romanoff - <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="" /> - </div> - </div> - </div> - <div class="form-group col-xs-12"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> - Tony Stark - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Steve Rogers - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Bruce Banner - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm selected"> - Natasha Romanoff - <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="" /> - </div> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> - Bruce Banner - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-1.png" class="avatar" /> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="typing here" value="S" /> - </div> - <ul class="menu"> - <li class="menu-item"> - <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> - <img src="demo/img/avatar-4.png" class="avatar" /> - </div> - <div class="chip-content"> - Steve Rogers - </div> - </div> - </a> - <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> - <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> - </div> - <div class="chip-content"> - Tony Stark - </div> - </div> - </a> - </li> - </ul> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. </p> - <p>The autocomplete HTML structure is exampled below.</p> - </section> - - <!-- autocomplete example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> - <span class="com"><!-- autocomplete input container --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> - <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm selected"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-2.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- autocomplete real input box --></span> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span> /> - <<span class="tag">/div</span>> - <span class="com"><!-- autocomplete suggestion list --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <span class="com"><!-- menu list chips --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> - Steve Rogers - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> - Yan Zhu - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="tooltips" class="container grid-960"> - <header class="text-center"><h4>tooltips</h4></header> - <section class="notes"> - <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> - </section> - <div class="columns text-center"> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum" data-tooltip-pos="top">top tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum">right tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum">bottom tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum">left tooltip</button> - </div> - </div> - <section class="notes"> - <p>Tooltip component is built entirely in CSS.</p> - <p>Add the class <code>tooltip</code> and the attribute <code>data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> - </section> - - <!-- tooltips example --> -<pre class="code lang-html"> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> -</pre> - - </section> - - <section id="badges" class="container grid-960"> - <header class="text-center"><h4>badges</h4></header> - <section class="notes"> - <p><strong>Badges</strong> are often used as unread number indicators.</p> - </section> - <div class="columns"> - <div class="column col-xs-6"> - <span class="badge" data-badge="1"> - Notifications - </span> - </div> - <div class="column col-xs-6"> - <span class="badge" data-badge="99"> - Notifications - </span> - </div> - <div class="column col-xs-6"> - <span class="badge" data-badge="999"> - Notifications - </span> - </div> - <div class="column col-xs-6"> - <span class="badge" data-badge="…"> - Notifications - </span> - </div> - </div> - <section class="notes"> - <p>Add the class <code>badge</code> to non self closing elements. And add the attribute <code>data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> - </section> - - <!-- badges example --> -<pre class="code lang-html"> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"99"</span>> - Notifications -<<span class="tag">/span</span>> -</pre> - - </section> - - <section id="toasts" class="container grid-960"> - <header class="text-center"><h4>toasts</h4></header> - <section class="notes"> - <p><strong>Toasts</strong> are used to show alert or information to users.</p> - </section> - <div class="columns"> - <div class="column col-sm-12 col-6"> - <div class="toast"> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code>btn-clear</code> if you need. </p> - </section> - <div class="columns"> - <div class="column col-sm-12"> - <div class="toast toast-primary"> - <button class="btn btn-clear float-right"></button> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-sm-12"> - <div class="toast toast-success"> - <button class="btn btn-clear float-right"></button> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-sm-12"> - <div class="toast toast-danger"> - <button class="btn btn-clear float-right"></button> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - </div> - <section class="notes"> - <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p> - </section> - - <!-- toasts example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<<span class="tag">/div</span>> - -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast toast-primary"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/i</span>> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="menus" class="container grid-960"> - <header class="text-center"><h4>menus</h4></header> - <section class="notes"> - <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> - </section> - <div class="columns"> - <div class="column col-xs-6"> - <ul class="menu"> - <li class="menu-item"> - <div class="chip"> - <div class="chip-icon"> - <img src="demo/img/avatar-4.png" class="avatar" /> - </div> - <div class="chip-content"> - Steve Rogers - </div> - </div> - </li> - <li class="divider"></li> - <li class="menu-item"> - <a href="#menus" class="active"> - My profile - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Settings - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Logout - </a> - </li> - </ul> - </div> - <div class="column col-xs-6"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - Go to - </span> - </li> - <li class="menu-item"> - <a href="#menus"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Hipchat - </a> - </li> - <li class="menu-item"> - Skype - </li> - </ul> - </div> - <div class="column col-xs-6"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - Go to - </span> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Slack - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Hipchat - </a> - </li> - <li class="menu-item"> - <i class="icon icon-link"></i> Skype - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> - </section> - - <!-- menus example --> -<pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <span class="com"><!-- menu header --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> - Go to - <<span class="tag">/span</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu item --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Slack - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Hipchat - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Skype - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu divider --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - </section> - - <section id="dropdowns" class="container grid-960"> - <header class="text-center"><h4>dropdowns</h4></header> - <section class="notes"> - <p>A <strong>dropdown</strong> is a combination of buttons and menus.</p> - </section> - <div class="columns"> - <div class="column col-xs-6"> - <div class="dropdown"> - <div class="btn-group"> - <a class="btn">dropdown button</a> - <a class="btn dropdown-toggle" tabindex="0"><i class="icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - </div> - <div class="column col-xs-6"> - <div class="dropdown"> - <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - <div class="column col-xs-6"> - <div class="dropdown"> - <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - </div> - <section class="notes"> - <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. </p> - </section> - <section class="notes"> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p> - </section> - - <!-- dropdowns example --> -<pre class="code lang-html"> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> - <span class="com"><!-- basic dropdown button --></span> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> - dropdown menu <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon-caret"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - <span class="com"><!-- menu component --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Slack<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Hipchat<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Skype<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/div</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> - <span class="com"><!-- dropdown button group --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn"</span>> - dropdown button - <<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon-caret"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - - <span class="com"><!-- menu component --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - ... - <<span class="tag">/ul</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> -</pre> - - </section> - - <section id="navigation" class="container grid-960"> - <header class="text-center"><h4>navigation</h4></header> - <section class="notes"> - <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and nav.</p> - </section> - <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header> - <div class="columns"> - <div class="column"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Profile - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Change avatar - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>breadcrumb</code>. And add child elements with the classname <code>breadcrumb-item</code>.</p> - </section> - - <!-- breadcrumbs example --> -<pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Home - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Profile - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Change avatar - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - <header id="tabs" class="text-center"><h5>tabs</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>tab</code>. And add child elements with the classname <code>tab-item</code>. You can add the class <code>tab-block</code> for a full-width tab. The <code>tab-item</code> or its child <code><a></code> with the class <code>active</code> will be highlighted.</p> - </section> - - <!-- tabs example --> -<pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Music<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"active"</span>>Playlists<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Radio<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Connect<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - </div> - - <section class="notes"> - <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> - </section> - - <!-- tabs with badges example --> -<pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> - Music - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - <header id="pagination" class="text-center"><h5>pagination</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"> - <a href="#pagination">Previous</a> - </li> - <li class="page-item"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">6</a> - </li> - <li class="page-item active"> - <a href="#pagination">7</a> - </li> - <li class="page-item"> - <a href="#pagination">8</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">12</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"> - <a href="#pagination" disabled>Previous</a> - </li> - <li class="page-item active"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <a href="#pagination">2</a> - </li> - <li class="page-item"> - <a href="#pagination">3</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">12</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p> - </section> - - <!-- pagination example --> -<pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span>>Previous<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>1<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>2<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>3<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">span</span>>...<<span class="tag">/span</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>12<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Next<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - <header id="nav" class="text-center"><h5>nav</h5></header> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item"> - <a href="#nav"><strong>Layout</strong></a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - - </div> - <section class="notes"> - <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p> - </section> - - </section> - - <section id="modals" class="container grid-960"> - <header class="text-center"><h4>modals</h4></header> - <section class="notes"> - <p><strong>Modals</strong> are flexible dialog prompts.</p> - </section> - <div class="columns"> - <div class="column"> - <div class="modal-temp"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p> - This is the content inside the modal. - </p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-link">Close</button> - <button class="btn btn-primary">Share</button> - </div> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> - <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class <code>active</code> to the <code>modal</code> container</p> - </section> - - <!-- modals example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-header"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-title"</span>>Modal title<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-body"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"content"</span>> - <span class="com"><!-- content here --></span> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-footer"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Close<<span class="tag">/button</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Share<<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - <header class="text-center"><h5>modal sizes</h5></header> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="modal-temp modal-sm"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-link">Close</button> - <button class="btn btn-primary">Share</button> - </div> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="modal-temp modal-sm"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-7">Name</label> - <input class="form-input" type="text" id="input-example-7" placeholder="Name" /> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked /> - <i class="form-icon"></i> Female - </label> - </div> - </form> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-link">Close</button> - <button class="btn btn-primary">Submit</button> - </div> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add the class <code>modal-sm</code> for a smaller modal dialog. </p> - </section> - - <!-- modals example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> - <span class="com"><!-- modal structure here --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="cards" class="container grid-960"> - <header class="text-center"><h4>cards</h4></header> - <section class="notes"> - <p><strong>Cards</strong> are flexible content containers.</p> - </section> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" /> - </div> - <div class="card-header"> - <h4 class="card-title">Microsoft</h4> - <h6 class="card-meta">Software and hardware</h6> - </div> - <div class="card-body"> - Empower every person and every organization on the planet to achieve more. - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Do</a> - </div> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> - </div> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-yosemite.jpg" /> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - </div> - </div> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Google</h4> - <h6 class="card-meta">Software and hardware</h6> - </div> - <div class="card-body"> - Organize the world’s information and make it universally accessible and useful. - </div> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-yosemite-2.jpg" /> - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Search</a> - <a href="#" class="btn btn-link">Share</a> - </div> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" /> - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Buy</a> - <a href="#" class="btn btn-link">Share</a> - </div> - <div class="card-body"> - <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. - </div> - - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-yosemite.jpg" /> - </div> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Google I/O</h4> - </div> - <div class="card-body"> - An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. - </div> - <div class="card-footer"> - <div class="chip"> - <div class="chip-content"> - <div class="chip-title">Google</div> - <div class="chip-meta">Software and hardware</div> - </div> - <div class="chip-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p> - </section> - - <!-- cards example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-image"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> - <<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">"card-title"</span>>Microsoft<<span class="tag">/h4</span>> - <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"card-meta"</span>>Software and hardware<<span class="tag">/h6</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> - To make a contribution to the world by making tools for the mind that advance humankind. - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Do<<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="utilities" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item active"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#position" class="btn btn-primary">position</a> - <a href="#display" class="btn btn-primary">display</a> - <a href="#text" class="btn btn-primary">text</a> - <a href="#shapes" class="btn btn-primary">shapes</a> - <a href="#loading" class="btn btn-primary">loading</a> - </div> - </section> - </section> - - <section id="position" class="container grid-960"> - <section class="notes"> - <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> - </section> - - <!-- position utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- clear float --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> -<span class="com"><!-- float: left and right --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- position: relative, absolute and fixed --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- centered block --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> -<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> -<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="display" class="container grid-960"> - <section class="notes"> - <p><strong>Display utilities</strong> are used for display and hidden things.</p> - </section> - - <!-- display utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- display: block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: none; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"hide"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: visible; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"visible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: hidden; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"invisible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- hide text contents --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-hide"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="text" class="container grid-960"> - <section class="notes"> - <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> - </section> - - <!-- text utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- left-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> -<span class="com"><!-- center-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> -<span class="com"><!-- right-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- justified text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Lowercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Uppercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Capitalized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Normal weight text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Bold text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Italicized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Larger text (120%) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Overflow behavior: truncate the text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Text may be broken at arbitrary points --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="shapes" class="container grid-960"> - <section class="notes"> - <p><strong>Shape utilities</strong> are used for change element shapes.</p> - </section> - - <!-- shape utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- rounded element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> -<span class="com"><!-- circle element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="divider" class="container grid-960"> - <section class="notes"> - <p>A <strong>Divider</strong> is used for separating elements.</p> - </section> - <div class="columns"> - <div class="column"> - <div class="divider mt-10"></div> - </div> - </div> - - <!-- shape utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- divider element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="loading" class="container grid-960"> - <section class="notes"> - <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the class <code>loading</code> to buttons for loading status.</p> - </section> - <div class="columns"> - <div class="column"> - <div class="loading"></div> - </div> - </div> - <!-- loading example --> -<pre class="code lang-html"> -<span class="com"><!-- loading element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> -</pre> - - </section> - </section> - <footer class="bg-grey"> - <section id="copyright" class="grid-footer container grid-960"> - <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.32 - </p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </section> - </footer> - <script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-2702768-8', 'auto'); - ga('send', 'pageview'); - </script> -</body> -</html> |