diff options
Move more Docs pages to Pug
19 files changed, 760 insertions, 1991 deletions
| -rw-r--r-- | docs/dist/docs.css | 11 | ||||
| -rw-r--r-- | docs/dist/docs.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 2324 | ||||
| -rw-r--r-- | docs/getting-started.html | 6 | ||||
| -rw-r--r-- | docs/src/contents/buttons.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/codes.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/custom.pug | 12 | ||||
| -rw-r--r-- | docs/src/contents/forms.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/grid.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/icons.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/labels.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/media.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/navbar.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/responsive.pug | 0 | ||||
| -rw-r--r-- | docs/src/contents/tables.pug | 64 | ||||
| -rw-r--r-- | docs/src/contents/typography.pug | 267 | ||||
| -rw-r--r-- | docs/src/elements.pug | 41 | ||||
| -rw-r--r-- | docs/src/getting-started.pug | 4 | ||||
| -rw-r--r-- | docs/src/scss/docs.scss | 20 |
diff --git a/docs/dist/docs.css b/docs/dist/docs.css index e3c1473..56db536 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -184,6 +184,10 @@ font-size: .7rem; } +.docs-content .columns { + margin-bottom: 1rem; +} + .docs-content .column { padding: .4rem; } @@ -451,6 +455,9 @@ .off-canvas .off-canvas-toggle { z-index: 300; } + .off-canvas .off-canvas-content { + width: 100%; + } .docs-sidebar .docs-brand { margin: .85rem 1.5rem; padding: 0; @@ -469,7 +476,7 @@ background: rgba(248, 249, 250, .65); left: 0; } - .docs-content.off-canvas-content { + .docs-content { min-width: auto; padding: 0 1.5rem; width: 100%; @@ -523,7 +530,7 @@ .docs-sidebar .docs-nav { padding: .5rem 1rem; } - .docs-content.off-canvas-content { + .docs-content { padding: 0 .5rem; } .docs-content .docs-block { diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css index 782728c..1578bf3 100644 --- a/docs/dist/docs.min.css +++ b/docs/dist/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content.off-canvas-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content.off-canvas-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .columns{margin-bottom:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index f6269e4..cf1c334 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1,2013 +1,405 @@ <!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, shrink-to-fit=no"> - <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="author" content="https://github.com/picturepan2/"> - <title>Elements - Spectre.css CSS Framework</title> - <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico"> - <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png"> - <link rel="stylesheet" href="dist/spectre.min.css"> - <link rel="stylesheet" href="dist/spectre-icons.min.css"> - <link rel="stylesheet" href="dist/spectre-exp.min.css"> - <link rel="stylesheet" href="dist/docs.min.css"> -</head> -<body> - <div class="docs-container off-canvas off-canvas-sidebar-show"> - <div class="docs-navbar"> - <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> - <i class="icon icon-menu"></i> - </a> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </div> - - <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> - <div class="docs-brand"> - <a href="index.html" class="docs-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2> - </a> - </div> - <div class="docs-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="getting-started.html">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="elements.html">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="components.html">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="utilities.html">Colors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> - </li> - </ul> - </div> - </div> - </div> - </div> - </div> - - <a class="off-canvas-overlay" href="#close"></a> - - <div id="content" class="docs-content off-canvas-content"> - <div id="elements" class="container"> - <h3 class="s-title"><a href="#elements" class="anchor" aria-hidden="true">#</a>Elements</h3> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - </div> - </div> - - <div id="typography" class="container"> - <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> - <div class="docs-note"> - <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> - </div> - <h4 id="typography-headings" class="s-subtitle">Headings</h4> - <div class="columns"> - <div class="column col-12"> - <h1>H1 Heading <small class="label">40px</small></h1> - </div> - <div class="column col-12"> - <h2>H2 Heading <small class="label">32px</small></h2> - </div> - <div class="column col-12"> - <h3>H3 Heading <small class="label">28px</small></h3> - </div> - <div class="column col-12"> - <h4>H4 Heading <small class="label">24px</small></h4> - </div> - <div class="column col-12"> - <h5>H5 Heading <small class="label">20px</small></h5> - </div> - <div class="column col-12"> - <h6>H6 Heading <small class="label">16px</small></h6> - </div> - </div> - -<!-- headings --> -<pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Heading<<span class="tag">/h1</span>> -<<span class="tag">h1</span>>H1 Heading <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>40px<<span class="tag">/small</span>><<span class="tag">/h1</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> -</code></pre> - - <h4 id="typography-paragraphs" class="s-subtitle">Paragraphs</h4> - <div class="docs-note"> - <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, 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> - </div> - -<!-- paragraphs --> -<pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, ...<<span class="tag">/p</span>> -<<span class="tag">p</span>>...<<span class="tag">/p</span>> -</code></pre> - - <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <abbr title="Internationalization">I18N</abbr> - <code class="ml-2"><abbr></code> - </div> - <div class="column col-6 col-xs-12"> - <strong>Bold</strong> - <code class="ml-2"><strong></code> <code><b></code> - </div> - <div class="column col-6 col-xs-12"> - <cite>Citation</cite> - <code class="ml-2"><cite></code> - </div> - <div class="column col-6 col-xs-12"> - <code>Hello World!</code> - <code class="ml-2"><code></code> - </div> - <div class="column col-6 col-xs-12"> - <del>Deleted</del> - <code class="ml-2"><del></code> - </div> - <div class="column col-6 col-xs-12"> - <em>Emphasis</em> - <code class="ml-2"><em></code> - </div> - <div class="column col-6 col-xs-12"> - <i>Italic</i> - <code class="ml-2"><i></code> - </div> - <div class="column col-6 col-xs-12"> - <ins>Inserted</ins> - <code class="ml-2"><ins></code> - </div> - <div class="column col-6 col-xs-12"> - <kbd>Ctrl + S</kbd> - <code class="ml-2"><kbd></code> - </div> - <div class="column col-6 col-xs-12"> - <mark>Highlighted</mark> - <code class="ml-2"><mark></code> - </div> - <div class="column col-6 col-xs-12"> - <ruby> - 漢 <rt>kan</rt> - 字 <rt>ji</rt> - </ruby> - <code class="ml-2"><ruby></code> - </div> - <div class="column col-6 col-xs-12"> - <s>Strikethrough</s> - <code class="ml-2"><s></code> - </div> - <div class="column col-6 col-xs-12"> - <samp>Sample</samp> - <code class="ml-2"><samp></code> - </div> - <div class="column col-6 col-xs-12"> - Text <sub>Subscripted</sub> - <code class="ml-2"><sub></code> - </div> - <div class="column col-6 col-xs-12"> - Text <sup>Superscripted</sup> - <code class="ml-2"><sup></code> - </div> - <div class="column col-6 col-xs-12"> - <time>20:00</time> - <code class="ml-2"><time></code> - </div> - <div class="column col-6 col-xs-12"> - <u>Underline</u> - <code class="ml-2"><u></code> - </div> - <div class="column col-6 col-xs-12"> - <var>x</var> = <var>y</var> + 2 - <code class="ml-2"><var></code> - </div> - </div> - - <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4> - <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5> - <div class="docs-note"> - <p class="h6">Chinese (Simplified)</p> - <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> - <p class="h6">Chinese (Tranditional)</p> - <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> - <p class="h6">Japanese</p> - <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> - <p class="h6">Korean</p> - <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> - </div> - <div class="docs-note"> - <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> - </div> - -<!-- east asian --> -<pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"zh-Hans"</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>> -<<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ko"</span>>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<<span class="tag">/p</span>> -</code></pre> - - <div class="docs-note"> - <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. </p> - </div> - <div class="docs-note"> - <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p> - <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> - </div> - -<!-- east asian --> -<pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">u</span>>祇園<<span class="tag">/u</span>><<span class="tag">u</span>>精舎<<span class="tag">/u</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -<<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -</code></pre> - - <h4 id="typography-fonts" class="s-subtitle">Fonts</h4> - <div class="docs-note"> - <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.</p> - </div> - -<!-- fonts --> -<pre class="code"><code><span class="com"><!-- Western typography targeted --></span> -<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif</span>; -<span class="com"><!-- Monospace typography targeted --></span> -<span class="atn">font-family</span>: <span class="atv">"SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace</span>; - -<span class="com"><!-- Chinese (lang="zh-Hans" and lang="zh-Hant") targeted --></span> -<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif</span>; -<span class="com"><!-- Japanese (lang="ja") targeted --></span> -<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif</span>; -<span class="com"><!-- Korean (lang="ko") targeted --></span> -<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif</span>; -</code></pre> - - <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4> - <blockquote> - <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> - <cite>- Bill Gates</cite> - </blockquote> - -<!-- blockquote --> -<pre class="code" data-lang="HTML"><code><<span class="tag">blockquote</span>> - <<span class="tag">p</span>>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <<span class="tag">/p</span>> - <<span class="tag">cite</span>>- Bill Gates<<span class="tag">/cite</span>> -<<span class="tag">/blockquote</span>> -</code></pre> - - <h4 id="typography-lists" class="s-subtitle">Lists</h4> - <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> + <head> + <title>Elements - Spectre.css CSS Framework</title> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="author" content="Yan Zhu"> + <link rel="shortcut icon" href="img/favicons/favicon.ico"> + <link rel="icon" href="img/favicons/favicon.png"> + <link rel="stylesheet" href="dist/spectre.min.css"> + <link rel="stylesheet" href="dist/spectre-icons.min.css"> + <link rel="stylesheet" href="dist/spectre-exp.min.css"> + <link rel="stylesheet" href="dist/docs.min.css"> + </head> + <body> + <div class="docs-container off-canvas off-canvas-sidebar-show"> + <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div> + <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> + <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>SPECTRE</h2></a></div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="getting-started.html#introduction">Introduction</a></li> + <li class="menu-item"><a href="getting-started.html#installation">Installation</a></li> + <li class="menu-item"><a href="getting-started.html#custom">Custom version</a></li> + <li class="menu-item"><a href="getting-started.html#browsers">Browser support</a></li> + <li class="menu-item"><a href="getting-started.html#whatsnew">What's new</a></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 --> -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - </div> - - <div class="container"> - <div class="docs-ad docs-ad-sidebar"> - <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script> - </div> - </div> - - <div id="tables" class="container"> - <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> - <div class="docs-note"> - <p>Tables include default styles for tables and data sets.</p> - </div> - <table class="table table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Genre</th> - <th>Release date</th> - </tr> - </thead> - <tbody> - <tr> - <td>The Shawshank Redemption</td> - <td>Crime, Drama</td> - <td>14 October 1994</td> - </tr> - <tr> - <td>The Godfather</td> - <td>Crime, Drama</td> - <td>24 March 1972</td> - </tr> - <tr> - <td>Schindler's List</td> - <td>Biography, Drama, History</td> - <td>4 February 1994</td> - </tr> - <tr> - <td>Se7en</td> - <td>Crime, Drama, Mystery</td> - <td>22 September 1995</td> - </tr> - </tbody> - </table> - <div class="docs-note"> - <p>Add the <code>table</code> class to any <table> element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p> - <p>Use the <code>active</code> class to make <tr> element highlighted. </p> - </div> - -<!-- tables --> -<pre class="code" data-lang="HTML"><code><<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>>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">"active"</span>> - <<span class="tag">td</span>>The Shawshank Redemption<<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>> -</code></pre> - - <div class="docs-note"> - <p>If you need the tables with horizontal scroll, add the <code>table-scroll</code> class to the <table> element. </p> - </div> - - <table class="table table-scroll"> - <thead> - <tr> - <th>Name</th> - <th>Genre</th> - <th>Director</th> - <th>Rating</th> - <th>Duration</th> - <th>Release date</th> - </tr> - </thead> - <tbody> - <tr> - <td>The Shawshank Redemption</td> - <td>Crime, Drama</td> - <td>Frank Darabont</td> - <td>R</td> - <td>2h 22min</td> - <td>14 October 1994</td> - </tr> - <tr> - <td>The Godfather</td> - <td>Crime, Drama</td> - <td>Francis Ford Coppola</td> - <td>R</td> - <td>2h 55min</td> - <td>24 March 1972</td> - </tr> - <tr> - <td>Schindler's List</td> - <td>Biography, Drama, History</td> - <td>Steven Spielberg</td> - <td>R</td> - <td>3h 15min</td> - <td>4 February 1994</td> - </tr> - <tr> - <td>Se7en</td> - <td>Crime, Drama, Mystery</td> - <td>David Fincher</td> - <td>R</td> - <td>2h 7min</td> - <td>22 September 1995</td> - </tr> - </tbody> - </table> - -<!-- tables --> -<pre class="code" data-lang="HTML"><code><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-scroll"</span>> - <span class="com"><!-- table content --></span> -<<span class="tag">/table</span>> -</code></pre> - - </div> - - <div id="buttons" class="container"> - <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> - <div class="docs-note"> - <p>Buttons include simple button styles for actions in different types and sizes. </p> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn">default button</button> - <button class="btn btn-primary">primary button</button> - <button class="btn btn-link">link button</button> - </div> - </div> - - <div class="docs-note"> - <p>Add the <code>btn</code> class 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. </p> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><<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>> -</code></pre> - - <h4 id="buttons-colors" class="s-subtitle">Button colors</h4> - <div class="columns"> - <div class="column col-12"> - <button class="btn btn-success">success button</button> - <button class="btn btn-error">error button</button> - </div> - </div> - <div class="docs-note"> - <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color. If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants. </p> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-success"</span>>success button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-error"</span>>error button<<span class="tag">/button</span>> -</code></pre> - - <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> - <div class="columns"> - <div class="column col-12"> - <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary btn-lg">large button</button> - </div> - <div class="column col-12"> - <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary">normal button</button> - </div> - <div class="column col-12"> - <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary btn-sm">small button</button> - </div> - </div> - <div class="docs-note"> - <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><<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>> - -<<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-arrow-left"</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-arrow-left"</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-arrow-left"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> -</code></pre> - - <div class="docs-note"> - <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> - </div> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button> - <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button> - <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button> - <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button> - <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button> - </div> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> -</code></pre> - - <h4 id="buttons-states" class="s-subtitle">Button states</h4> - - <div class="docs-note"> - <p>Add the <code>active</code> class for active button state style.</p> - </div> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn active">default active</button> - <button class="btn btn-primary active">primary active</button> - <button class="btn btn-link active">link active</button> - </div> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- buttons with active state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn active"</span>>active button<<span class="tag">/button</span>> -</code></pre> - - <div class="docs-note"> - <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p> - </div> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn disabled" tabindex="-1">default disabled</button> - <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> - <button class="btn btn-link" disabled tabindex="-1">link disabled</button> - </div> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- buttons with disabled state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> -</code></pre> - - <div class="docs-note"> - <p>A button with the <code>loading</code> class can show loading indicator.</p> - </div> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn loading">default button</button> - <button class="btn btn-primary loading">primary button</button> - <button class="btn btn-link loading">link button</button> - </div> - </div> - -<!-- buttons --> -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - <h4 id="buttons-groups" class="s-subtitle">Button groups</h4> - <div class="columns"> - <div class="column col-md-12"> - <div class="btn-group"> - <button class="btn">first button</button> - <button class="btn">second button</button> - <button class="btn">third button</button> - </div> - </div> - <div class="column col-md-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-md-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-md-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> - <div class="docs-note"> - <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p> - </div> - -<!-- button groups --> -<pre class="code" data-lang="HTML"><code><<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>> -</code></pre> - - </div> - - <div id="forms" class="container"> - <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> - <div class="docs-note"> - <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> - </div> - <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" 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> - </div> - -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <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> - </div> - -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <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> - <div class="form-group"> - <select class="form-select" multiple> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> + <div class="accordion"> + <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/> + <label class="accordion-header c-hand" for="accordion-elements">Elements</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="elements.html#typography">Typography</a></li> + <li class="menu-item"><a href="elements.html#tables">Tables</a></li> + <li class="menu-item"><a href="elements.html#buttons">Buttons</a></li> + <li class="menu-item"><a href="elements.html#forms">Forms</a></li> + <li class="menu-item"><a href="elements.html#icons">Icons</a></li> + <li class="menu-item"><a href="elements.html#labels">Labels</a></li> + <li class="menu-item"><a href="elements.html#codes">Codes</a></li> + <li class="menu-item"><a href="elements.html#media">Media</a></li> + </ul> + </div> </div> - </div> - </div> - -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <form> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Female - </label> + <div class="accordion"> + <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-layout">Layout</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="layout.html#flexbox">Flexbox grid</a></li> + <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li> + <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li> + </ul> </div> - </form> - </div> - </div> - -<pre class="code" data-lang="HTML"><code><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="atn">checked</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="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>> -</code></pre> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <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-switch"> - <input type="checkbox" checked> - <i class="form-icon"></i> Send me emails with news and tips - </label> + <div class="accordion"> + <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-components">Components</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="components.html#accordions">Accordions</a></li> + <li class="menu-item"><a href="components.html#avatars">Avatars</a></li> + <li class="menu-item"><a href="components.html#badges">Badges</a></li> + <li class="menu-item"><a href="components.html#bars">Bars</a></li> + <li class="menu-item"><a href="components.html#breadcrumbs">Breadcrumbs</a></li> + <li class="menu-item"><a href="components.html#cards">Cards</a></li> + <li class="menu-item"><a href="components.html#chips">Chips</a></li> + <li class="menu-item"><a href="components.html#empty">Empty states</a></li> + <li class="menu-item"><a href="components.html#menus">Menus</a></li> + <li class="menu-item"><a href="components.html#modals">Modals</a></li> + <li class="menu-item"><a href="components.html#navs">Navs</a></li> + <li class="menu-item"><a href="components.html#pagination">Pagination</a></li> + <li class="menu-item"><a href="components.html#panels">Panels</a></li> + <li class="menu-item"><a href="components.html#popovers">Popovers</a></li> + <li class="menu-item"><a href="components.html#steps">Steps</a></li> + <li class="menu-item"><a href="components.html#tabs">Tabs</a></li> + <li class="menu-item"><a href="components.html#tiles">Tiles</a></li> + <li class="menu-item"><a href="components.html#toasts">Toasts</a></li> + <li class="menu-item"><a href="components.html#tooltips">Tooltips</a></li> + </ul> + </div> </div> - </div> - </div> - -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> + <div class="accordion"> + <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="utilities.html#colors">Colors</a></li> + <li class="menu-item"><a href="utilities.html#cursors">Cursors</a></li> + <li class="menu-item"><a href="utilities.html#display">Display</a></li> + <li class="menu-item"><a href="utilities.html#divider">Divider</a></li> + <li class="menu-item"><a href="utilities.html#loading">Loading</a></li> + <li class="menu-item"><a href="utilities.html#position">Position</a></li> + <li class="menu-item"><a href="utilities.html#shapes">Shapes</a></li> + <li class="menu-item"><a href="utilities.html#text">Text</a></li> + </ul> + </div> </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox" checked> - <i class="form-icon"></i> Remember me - </label> + <div class="accordion"> + <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="experimentals.html#autocomplete">Autocomplete</a></li> + <li class="menu-item"><a href="experimentals.html#calendars">Calendars</a></li> + <li class="menu-item"><a href="experimentals.html#carousels">Carousels</a></li> + <li class="menu-item"><a href="experimentals.html#comparison">Comparison sliders</a></li> + <li class="menu-item"><a href="experimentals.html#filters">Filters</a></li> + <li class="menu-item"><a href="experimentals.html#meters">Meters</a></li> + <li class="menu-item"><a href="experimentals.html#off-canvas">Off-canvas</a></li> + <li class="menu-item"><a href="experimentals.html#parallax">Parallax</a></li> + <li class="menu-item"><a href="experimentals.html#progress">Progress</a></li> + <li class="menu-item"><a href="experimentals.html#sliders">Sliders</a></li> + <li class="menu-item"><a href="experimentals.html#timelines">Timelines</a></li> + </ul> + </div> </div> </div> </div> - -<pre class="code" data-lang="HTML"><code><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>> -</code></pre> - - <div class="docs-note"> - <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> - </div> - - <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4> - <div class="docs-note"> - <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> and <code>col-xs/sm/lg/xl-[1-12]</code> class to the child elements for responsive form row layout. </p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3 col-sm-12"> - <label class="form-label" for="input-example-4">Name</label> - </div> - <div class="col-9 col-sm-12"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name"> - </div> - </div> - <div class="form-group"> - <div class="col-3 col-sm-12"> - <label class="form-label" for="input-example-5">Email</label> - </div> - <div class="col-9 col-sm-12"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email"> - </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> + <div class="container"> + <h3 class="s-title" id="typography"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3> + <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> + <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4> + <div class="columns"> + <div class="column col-12"> + <h1>H1 Heading <small class="label">40px</small></h1> </div> - <div class="form-group"> - <div class="col-3 col-sm-12"> - <label class="form-label">Gender</label> - </div> - <div class="col-9 col-sm-12"> - <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 class="column col-12"> + <h2>H2 Heading <small class="label">32px</small></h2> </div> - <div class="form-group"> - <div class="col-3 col-sm-12"> - <label class="form-label">Source</label> - </div> - <div class="col-9 col-sm-12"> - <select class="form-select" multiple> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> + <div class="column col-12"> + <h3>H3 Heading <small class="label">28px</small></h3> </div> - <div class="form-group"> - <div class="col-9 col-sm-12 col-ml-auto"> - <label class="form-switch"> - <input type="checkbox"> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> + <div class="column col-12"> + <h4>H4 Heading <small class="label">24px</small></h4> </div> - <div class="form-group"> - <div class="col-3 col-sm-12"> - <label class="form-label" for="input-example-6">Message</label> - </div> - <div class="col-9 col-sm-12"> - <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> - </div> + <div class="column col-12"> + <h5>H5 Heading <small class="label">20px</small></h5> </div> - <div class="form-group"> - <div class="col-9 col-sm-12 col-ml-auto"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> - </div> + <div class="column col-12"> + <h6>H6 Heading <small class="label">16px</small></h6> </div> - </form> - </div> - </div> - -<!-- forms --> -<pre class="code" data-lang="HTML"><code><<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 col-sm-12"</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 col-sm-12"</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>> -</code></pre> - - <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4> - <div class="docs-note"> - <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <label class="form-label label-sm">Label</label> - </div> - <div class="column col-4 col-xs-12"> - <input class="form-input input-sm" type="text" placeholder="Name"> - </div> - <div class="column col-4 col-xs-12"> - <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 col-xs-12"> - <label class="form-label label-lg">Label</label> - </div> - <div class="column col-4 col-xs-12"> - <input class="form-input input-lg" type="text" placeholder="Name"> - </div> - <div class="column col-4 col-xs-12"> - <select class="form-select select-lg"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - <div class="docs-note"> - <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p> - </div> - - <h4 id="forms-icons" class="s-subtitle">Form icons</h4> - <div class="docs-note"> - <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> - <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="has-icon-left"> - <input class="form-input input-sm" type="text" placeholder="Name"> - <i class="form-icon icon icon-arrow-right"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet"> - <input class="form-input" type="text" placeholder="Name"> - <i class="form-icon icon icon-arrow-right"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-left"> - <input class="form-input input-lg" type="text" placeholder="Name"> - <i class="form-icon icon icon-arrow-right"></i> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name"> - <i class="form-icon icon icon-check"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name"> - <i class="form-icon icon icon-check"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name"> - <i class="form-icon icon icon-check"></i> </div> - </div> - </div> - -<!-- form icons --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with Spectre icon --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-left"</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">"..."</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon icon icon-check"</span>><<span class="tag">/i</span>> -<<span class="tag">/div</span>> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-title">h1</span>></span> +<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>H1 Heading <span class="hljs-tag"><<span class="hljs-title">small</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>></span>40px<span class="hljs-tag"></<span class="hljs-title">small</span>></span><span class="hljs-tag"></<span class="hljs-title">h1</span>></span> +<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h1"</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-title">span</span>></span> </code></pre> - - <div class="docs-note"> - <p>You can use the <code>loading</code> class for loading or posting state.</p> - </div> - - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name"> - <i class="form-icon loading"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name"> - <i class="form-icon loading"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name"> - <i class="form-icon loading"></i> - </div> - </div> - </div> - -<pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with loading icon --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-right"</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">"..."</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon loading"</span>><<span class="tag">/i</span>> -<<span class="tag">/div</span>> + <h4 class="s-subtitle" id="typography-paragraphs"><a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a>Paragraphs</h4> + <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, 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> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">p</span>></span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag"></<span class="hljs-title">p</span>></span> +<span class="hljs-tag"><<span class="hljs-title">p</span>></span>...<span class="hljs-tag"></<span class="hljs-title">p</span>></span> </code></pre> - - <h4 id="forms-input" class="s-subtitle">Input types</h4> - <div class="columns"> - <div class="column col-9 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" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> - </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> + <h4 class="s-subtitle" id="typography-semantic-text"><a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a>Semantic text elements</h4> + <div class="columns"> + <div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div> + <div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div> + <div class="column col-6 col-xs-12"> + <cite>Citation</cite><code class="ml-2">cite</code> </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 class="column col-6 col-xs-12"><code>Hello World!</code><code class="ml-2">code</code></div> + <div class="column col-6 col-xs-12"> + <del>Deleted</del><code class="ml-2">del</code> </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 class="column col-6 col-xs-12"><em>Emphasis</em><code class="ml-2">em</code></div> + <div class="column col-6 col-xs-12"><i>Italic</i><code class="ml-2">i</code></div> + <div class="column col-6 col-xs-12"><ins>Inserted</ins><code class="ml-2">ins</code></div> + <div class="column col-6 col-xs-12"><kbd>Ctrl + S</kbd><code class="ml-2">kbd</code></div> + <div class="column col-6 col-xs-12"> + <mark>Highlighted</mark><code class="ml-2">mark</code> </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 class="column col-6 col-xs-12"> + <ruby>漢 + <rt>kan</rt>字 + <rt>ji</rt> + </ruby><code class="ml-2">ruby</code> </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 class="column col-6 col-xs-12"> + <s>Strikethrough</s><code class="ml-2">s</code> </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 class="column col-6 col-xs-12"><samp>Sample</samp><code class="ml-2">samp</code></div> + <div class="column col-6 col-xs-12">Text <sub>Subscripted</sub><code class="ml-2">sub</code></div> + <div class="column col-6 col-xs-12">Text <sup>Superscripted</sup><code class="ml-2">sup</code></div> + <div class="column col-6 col-xs-12"> + <time>20:00</time><code class="ml-2">time</code> </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="#5755d9"> - </div> + <div class="column col-6 col-xs-12"> + <u>Underline</u><code class="ml-2">u</code> </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"> - </div> + <div class="column col-6 col-xs-12"> + <var>x</var> = + <var>y</var> + 2<code class="ml-2">var</code> </div> - </form> - </div> - </div> - - <h4 id="forms-input-groups" class="s-subtitle">Input groups</h4> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-sm" placeholder="username"> - <select class="form-select select-sm"> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </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"> - <input type="text" class="form-input" placeholder="username"> - <select class="form-select"> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </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"> - <label class="form-switch"> - <input type="checkbox"> - <i class="form-icon"></i> - </label> - <input type="text" class="form-input" placeholder="name"> </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> - </label> - <input type="text" class="form-input" placeholder="name"> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-lg" placeholder="username"> - <select class="form-select select-lg"> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - <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"> - <button class="btn btn-primary input-group-btn btn-lg">Submit</button> - </div> - </div> - </div> - - <div class="docs-note"> - <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p> - </div> - -<!-- input groups --> -<pre class="code" data-lang="HTML"><code><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>>...<<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">"..."</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>>...<<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">"..."</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>>...<<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">"..."</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>> + <h4 class="s-subtitle" id="typography-east-asian"><a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a>Optimized for East Asian fonts</h4> + <p class="h5"><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></p> + <p class="h6">Chinese (Simplified)</p> + <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> + <p class="h6">Chinese (Tranditional)</p> + <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> + <p class="h6">Japanese</p> + <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> + <p class="h6">Korean</p> + <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> + <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"zh-Hans"</span>></span>革命不是请客吃饭，不是做文章……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> +<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"ja"</span>></span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> +<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"ko"</span>></span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> +</code></pre> + <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.</p> + <p lang="ja"> + <u>祇園</u> + <u>精舎</u>の鐘の声、諸行無常の響きあり。 + </p> + <p lang="ja"> + <del>祇園</del> + <del>精舎</del>の鐘の声、諸行無常の響きあり。 + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-title">u</span>></span>祇園<span class="hljs-tag"></<span class="hljs-title">u</span>></span><span class="hljs-tag"><<span class="hljs-title">u</span>></span>精舎<span class="hljs-tag"></<span class="hljs-title">u</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> +<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-title">del</span>></span>祇園<span class="hljs-tag"></<span class="hljs-title">del</span>></span><span class="hljs-tag"><<span class="hljs-title">del</span>></span>精舎<span class="hljs-tag"></<span class="hljs-title">del</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> </code></pre> + <h4 class="s-subtitle" id="typography-fonts"><a class="anchor" href="#typography-fonts" aria-hidden="true">#</a>Fonts</h4> + <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.</p> + <pre class="code"><code><span class="hljs-comment">/* Western typography targeted */</span> +<span class="hljs-attribute">font-family</span><span class="hljs-value">: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;</span> +<span class="hljs-comment">/* Monospace typography targeted */</span> +<span class="hljs-attribute">font-family</span><span class="hljs-value">: <span class="hljs-string">"SF Mono"</span>, <span class="hljs-string">"Segoe UI Mono"</span>, <span class="hljs-string">"Roboto Mono"</span>, Menlo, Courier, monospace;</span> - <h4 id="forms-validation" class="s-subtitle">Form validation styles</h4> - <div class="docs-note"> - <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <fieldset> - <legend>Input</legend> - <div class="form-group"> - <label class="form-label" for="input-example-17">Name</label> - <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name"> - <p class="form-input-hint">The name is valid.</p> - </div> - <div class="form-group has-error"> - <label class="form-label" for="input-example-18">Password</label> - <input class="form-input" type="password" id="input-example-18" placeholder="Password"> - <p class="form-input-hint">Passwords must have at least 8 characters.</p> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-21">Email</label> - <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> - <p class="form-input-hint">The Email address is unavailable.</p> - </div> - </fieldset> - <fieldset> - <legend>Select</legend> - <div class="form-group"> - <select class="form-select is-error"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is invalid.</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> - </fieldset> - <fieldset> - <legend>Checkbox, Radio and Switch (Error state only)</legend> - <div class="form-group"> - <label class="form-checkbox is-error"> - <input type="checkbox" checked> - <i class="form-icon"></i> I'm not a robot. - </label> +<span class="hljs-comment">/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */</span> +<span class="hljs-attribute">font-family</span><span class="hljs-value">: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang SC"</span>, <span class="hljs-string">"Hiragino Sans GB"</span>, <span class="hljs-string">"Microsoft YaHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;</span> +<span class="hljs-comment">/* Japanese (lang="ja") targeted */</span> +<span class="hljs-attribute">font-family</span><span class="hljs-value">: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Hiragino Sans"</span>, <span class="hljs-string">"Hiragino Kaku Gothic Pro"</span>, <span class="hljs-string">"Yu Gothic"</span>, YuGothic, Meiryo, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;</span> +<span class="hljs-comment">/* Korean (lang="ko") targeted */</span> +<span class="hljs-attribute">font-family</span><span class="hljs-value">: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Malgun Gothic"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;</span> +</code></pre> + <h4 class="s-subtitle" id="typography-blockquote"><a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a>Blockquote</h4> + <blockquote> + <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.</p> + <cite>- Bill Gates</cite> + </blockquote> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">blockquote</span>></span> + <span class="hljs-tag"><<span class="hljs-title">p</span>></span>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <span class="hljs-tag"></<span class="hljs-title">p</span>></span> + <span class="hljs-tag"><<span class="hljs-title">cite</span>></span>- Bill Gates<span class="hljs-tag"></<span class="hljs-title">cite</span>></span> +<span class="hljs-tag"></<span class="hljs-title">blockquote</span>></span> +</code></pre> + <h4 class="s-subtitle" id="typography-lists"><a class="anchor" href="#typography-lists" aria-hidden="true">#</a>Lists</h4> + <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="form-group has-error"> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Female - </label> + <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="form-group"> - <label class="form-switch is-error"> - <input type="checkbox" checked> - <i class="form-icon"></i> Send me emails with news and tips - </label> + <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> - </fieldset> - </div> - </div> - -<!-- forms --> -<pre class="code" data-lang="HTML"><code><<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">"..."</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<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">"..."</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> - - <span class="com"><!-- form validation example for checkbox, radio and switch --></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 is-error"</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>> -</code></pre> - - <h4 id="forms-disabled" class="s-subtitle">Form disabled styles</h4> - <div class="docs-note"> - <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <form action="#forms"> - <fieldset disabled> - <div class="form-group"> - <label class="form-label" for="input-example-19">Name</label> - <input class="form-input" type="text" id="input-example-19" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" disabled> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" disabled> - <i class="form-icon"></i> Female - </label> - </div> - <div class="form-group"> - <select class="form-select" disabled> - <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" disabled> - <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-20">Message</label> - <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox" disabled> - <i class="form-icon"></i> Remember me - </label> - </div> - </fieldset> - </form> - </div> - </div> - </div> - - <div id="icons" class="container"> - <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> - <div class="docs-note"> - <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> - </div> - <h4 id="icons-navigation" class="s-subtitle">Navigation icons</h4> - <div class="columns"> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-up"></i> - </button> - <p>icon-arrow-up</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-right"></i> - </button> - <p>icon-arrow-right</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-down"></i> - </button> - <p>icon-arrow-down</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-left"></i> - </button> - <p>icon-arrow-left</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-upward"></i> - </button> - <p>icon-upward</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-forward"></i> - </button> - <p>icon-forward</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-downward"></i> - </button> - <p>icon-downward</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-back"></i> - </button> - <p>icon-back</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-caret"></i> - </button> - <p>icon-caret</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-menu"></i> - </button> - <p>icon-menu</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-apps"></i> - </button> - <p>icon-apps</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-more-horiz"></i> - </button> - <p>icon-more-horiz</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-more-vert"></i> - </button> - <p>icon-more-vert</p> - </div> - </div> - <h4 id="icons-action" class="s-subtitle">Action icons</h4> - <div class="columns"> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-resize-horiz"></i> - </button> - <p>icon-resize-horiz</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-resize-vert"></i> - </button> - <p>icon-resize-vert</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-plus"></i> - </button> - <p>icon-plus</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-minus"></i> - </button> - <p>icon-minus</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-cross"></i> - </button> - <p>icon-cross</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-check"></i> - </button> - <p>icon-check</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-stop"></i> - </button> - <p>icon-stop</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-shutdown"></i> - </button> - <p>icon-shutdown</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-refresh"></i> - </button> - <p>icon-refresh</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-search"></i> - </button> - <p>icon-search</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-flag"></i> - </button> - <p>icon-flag</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-bookmark"></i> - </button> - <p>icon-bookmark</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-edit"></i> - </button> - <p>icon-edit</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-delete"></i> - </button> - <p>icon-delete</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-share"></i> - </button> - <p>icon-share</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-download"></i> - </button> - <p>icon-download</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-upload"></i> - </button> - <p>icon-upload</p> - </div> - </div> - <h4 id="icons-object" class="s-subtitle">Object icons</h4> - <div class="columns"> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-mail"></i> - </button> - <p>icon-mail</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-people"></i> - </button> - <p>icon-people</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-message"></i> - </button> - <p>icon-message</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-photo"></i> - </button> - <p>icon-photo</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-time"></i> - </button> - <p>icon-time</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-location"></i> - </button> - <p>icon-location</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-link"></i> - </button> - <p>icon-link</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-emoji"></i> - </button> - <p>icon-emoji</p> - </div> - </div> - -<!-- icons --> -<pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> -</code></pre> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- unordered list --></span> +<span class="hljs-tag"><<span class="hljs-title">ul</span>></span> + <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 1<span class="hljs-tag"></<span class="hljs-title">li</span>></span> + <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2 + <span class="hljs-tag"><<span class="hljs-title">ul</span>></span> + <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2.1<span class="hljs-tag"></<span class="hljs-title">li</span>></span> + <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2.2<span class="hljs-tag"></<span class="hljs-title">li</span>></span> + <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2.3<span class="hljs-tag"></<span class="hljs-title">li</span>></span> + <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> + <span class="hljs-tag"></<span class="hljs-title">li</span>></span> + <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 3<span class="hljs-tag"></<span class="hljs-title">li</span>></span> +<span class="hljs-tag"></<span class="hljs-title">ul</span>></span> - <h4 id="icons-sizes" class="s-subtitle">Icon sizes</h4> - <div class="docs-note"> - <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes. You can set <code>font-size</code> to have different icon sizes.</p> - </div> - <div class="columns"> - <div class="column col-3 col-md-6"> - <p><i class="icon icon-2x icon-mail"></i></p> - <p>icon-2x (32px)</p> +<span class="hljs-comment"><!-- description list --></span> +<span class="hljs-tag"><<span class="hljs-title">dl</span>></span> + <span class="hljs-tag"><<span class="hljs-title">dt</span>></span>description list term<span class="hljs-tag"></<span class="hljs-title">dt</span>></span> + <span class="hljs-tag"><<span class="hljs-title">dd</span>></span>description list description<span class="hljs-tag"></<span class="hljs-title">dd</span>></span> +<span class="hljs-tag"></<span class="hljs-title">dl</span>></span></code></pre> </div> - <div class="column col-3 col-md-6"> - <p><i class="icon icon-3x icon-mail"></i></p> - <p>icon-3x (48px)</p> - </div> - <div class="column col-3 col-md-6"> - <p><i class="icon icon-4x icon-mail"></i></p> - <p>icon-4x (64px)</p> - </div> - </div> - -<!-- icons --> -<pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-2x icon-mail"</span>><<span class="tag">/i</span>> -</code></pre> - - </div> - - <div id="labels" class="container"> - <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> - <div class="docs-note"> - <p>Labels are formatted text tags for highlighted, informative information.</p> - </div> - <div class="columns"> - <div class="column"> - <span class="label">default label</span> - <span class="label label-primary">primary label</span> - <span class="label label-secondary">secondary label</span> - <span class="label label-success">success label</span> - <span class="label label-warning">warning label</span> - <span class="label label-error">error label</span> + <div class="container"> + <h3 class="s-title" id="tables"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3> + <p>Tables include default styles for tables and data sets.</p> + <div class="columns"> + <div class="column col-12"> + <table class="table table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Genre</th> + <th>Release date</th> + </tr> + </thead> + <tbody> + <tr> + <td>The Shawshank Redemption</td> + <td>Crime, Drama</td> + <td>14 October 1994</td> + </tr> + <tr> + <td>The Godfather</td> + <td>Crime, Drama</td> + <td>24 March 1972</td> + </tr> + <tr> + <td>Schindler's List</td> + <td>Biography, Drama, History</td> + <td>4 February 1994</td> + </tr> + <tr> + <td>Se7en</td> + <td>Crime, Drama, Mystery</td> + <td>22 September 1995</td> + </tr> + </tbody> + </table> + </div> + </div> + <p>Add the <code>table</code> class to any <table> element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. + </p> + <p>Use the <code>active</code> class to make <tr> element highlighted.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table table-striped table-hover"</span>></span> + <span class="hljs-tag"><<span class="hljs-title">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-title">tr</span>></span> + <span class="hljs-tag"><<span class="hljs-title">th</span>></span>name<span class="hljs-tag"></<span class="hljs-title">th</span>></span> + <span class="hljs-tag"><<span class="hljs-title">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-title">th</span>></span> + <span class="hljs-tag"><<span class="hljs-title">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-title">th</span>></span> + <span class="hljs-tag"></<span class="hljs-title">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-title">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-title">tbody</span>></span> + <span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span> + <span class="hljs-tag"><<span class="hljs-title">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-title">td</span>></span> + <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-title">td</span>></span> + <span class="hljs-tag"><<span class="hljs-title">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-title">td</span>></span> + <span class="hljs-tag"></<span class="hljs-title">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span> +<span class="hljs-tag"></<span class="hljs-title">table</span>></span></code></pre> </div> - </div> - <div class="docs-note"> - <p>Add the <code>label</code> class to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.</p> - </div> - <div class="columns"> - <div class="column"> - <span class="label label-rounded">default label</span> - <span class="label label-rounded label-primary">primary label</span> - <span class="label label-rounded label-secondary">secondary label</span> - <span class="label label-rounded label-success">success label</span> - <span class="label label-rounded label-warning">warning label</span> - <span class="label label-rounded label-error">error label</span> + <div class="container"> + <h3 class="s-title" id="buttons"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3> </div> - </div> - <div class="docs-note"> - <p>Add the <code>label-rounded</code> class to have rounded labels.</p> - </div> - -<!-- labels --> -<pre class="code" data-lang="HTML"><code><<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>> -</code></pre> - - </div> - - <div id="codes" class="container"> - <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> - <div class="docs-note"> - <p>Codes are inline and multiline code snippets.</p> - <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> - </div> - -<pre class="code" data-lang="HTML"><code><span class="com"><!-- code snippets --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>> - Submit -<<span class="tag">/button</span>> -</code></pre> - -<!-- codes --> -<pre class="code" data-lang="HTML"><code><<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">"code"</span> <span class="atn">data-lang</span>=<span class="atv">"HTML"</span>><<span class="tag">code</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"com"</span>>&lt;!-- code snippets --&gt;<<span class="tag">/span</span>> -&lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>button<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atn"</span>>class<<span class="tag">/span</span>>=<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atv"</span>>&quot;btn&quot;<<span class="tag">/span</span>>&gt; - Submit -&lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>/button<<span class="tag">/span</span>>&gt; -<<span class="tag">/code</span>><<span class="tag">/pre</span>> -</code></pre> - - </div> - - <div id="media" class="container"> - <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> - <div class="docs-note"> - <p>Media includes responsive images, figures and video classes. </p> - </div> - <h4 id="media-images" class="s-subtitle">Images</h4> - <div class="docs-note"> - <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper"> + <div class="container"> + <h3 class="s-title" id="forms"><a class="anchor" href="#forms" aria-hidden="true">#</a>Forms</h3> </div> - </div> - - <div class="docs-note"> - <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">shipped</a>.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="figure"> - <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> - <figcaption class="figure-caption text-center">img-fit-contain</figcaption> - </figure> + <div class="container"> + <h3 class="s-title" id="icons"><a class="anchor" href="#icons" aria-hidden="true">#</a>Icons</h3> </div> - <div class="column col-6 col-xs-12"> - <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> - <figcaption class="figure-caption text-center">img-fit-cover</figcaption> - </figure> + <div class="container"> + <h3 class="s-title" id="labels"><a class="anchor" href="#labels" aria-hidden="true">#</a>Labels</h3> </div> - </div> - -<pre class="code" data-lang="HTML"><code><<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="atn">alt</span>=<span class="atv">"..."</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-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</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-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> -</code></pre> - - <div class="docs-note"> - <p>You can use the element <figure> for an image with a caption. Add the <code>figure</code> class to <figure> element. The images with the <code>img-responsive</code> class 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> - </div> - <div class="columns"> - <div class="column col-12"> - <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> - </figure> + <div class="container"> + <h3 class="s-title" id="codes"><a class="anchor" href="#codes" aria-hidden="true">#</a>Codes</h3> </div> - </div> - -<pre class="code" data-lang="HTML"><code><<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 ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</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>> -</code></pre> - - <h4 id="media-video" class="s-subtitle">Video</h4> - <div class="docs-note"> - <p>For responsive video, add a container with the <code>video-responsive</code> class. 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> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="video-responsive"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/HH8fBF5vaSY" allowfullscreen></iframe> - </div> + <div class="container"> + <h3 class="s-title" id="media"><a class="anchor" href="#media" aria-hidden="true">#</a>Media</h3> </div> </div> - - <div class="docs-note"> - <p>For responsive <code>video</code> elements, you can add the <code>video-responsive</code> class directly to the <code>video</code>.</p> - </div> - -<!-- media --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive video-responsive-4-3"</span>> - <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"..."</span> <span class="atn">width</span>=<span class="atv">"..."</span> <span class="atn">height</span>=<span class="atv">"..."</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>> - -<<span class="tag">video</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span> <span class="atn">src</span>=<span class="atv">"..."</span>>...<<span class="tag">/video</span>> -</code></pre> - </div> - - <footer class="docs-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with <span class="text-error">♥</span> 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> - </footer> - </div> - </div> - - <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> + <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>
\ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 97c85bc..0f3f1ff 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -189,7 +189,6 @@ <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li> <li>Compile the Sass file to CSS to get the custom version of Spectre.</li> </ul> - <!-- importing--> <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span> <span class="hljs-comment">// Define variables to override default ones</span> <span class="hljs-variable">$primary-color</span><span class="hljs-value">: <span class="hljs-hexcolor">#2e5bec</span>;</span> @@ -199,7 +198,6 @@ <span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>;</span> </code></pre> <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>.</p> - <!-- custom variables--> <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span> <span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"variables"</span>;</span> @@ -208,7 +206,6 @@ <span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>;</span> </code></pre> <h4 class="s-subtitle" id="folders"><a class="anchor" href="#folders" aria-hidden="true">#</a>Folder structure</h4> - <!-- folder structure--> <pre class="code"><code>spectre/ ├── <span class="hljs-built_in">dist</span>/ <span class="hljs-comment">// Build folder</span> │ ├── spectre-<span class="hljs-built_in">exp</span>.css @@ -338,7 +335,6 @@ <li>@mixin button-variant(<code>$color</code>: $primary-color);</li> <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li> </ul> - <!-- button mixins--> <pre class="code" data-lang="Sass"><code><!-- filled <span class="hljs-tag">button</span> with the success <span class="hljs-attribute">color</span> --> <span class="hljs-class">.btn-success</span> { <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> button-variant</span>(<span class="hljs-variable">$success-color</span>);</span> @@ -355,11 +351,9 @@ <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size.</p> <h4 class="s-subtitle" id="variables-custom-prefix"><a class="anchor" href="#variables-custom-prefix" aria-hidden="true">#</a>Variables - Custom prefix</h4> <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it.</p> - <!-- custom prefix--> <pre class="code" data-lang="Bash"><code>npm install gulp-css-prefix </code></pre> <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p> - <!-- custom prefix--> <pre class="code"><code><span class="hljs-keyword">var</span> cssPrefix = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-css-prefix'</span>); gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/buttons.pug diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/codes.pug diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug index ce787f7..a21357e 100644 --- a/docs/src/contents/custom.pug +++ b/docs/src/contents/custom.pug @@ -64,7 +64,7 @@ ul | to define your variables. li Compile the Sass file to CSS to get the custom version of Spectre. -// importing +//- importing pre.code(data-lang='Sass') code :highlight(lang="scss") @@ -83,7 +83,7 @@ p code project-name.scss | . -// custom variables +//- custom variables pre.code(data-lang='Sass') code :highlight(lang="scss") @@ -96,7 +96,7 @@ pre.code(data-lang='Sass') +docs-subheading('folders', 'Folder structure') -// folder structure +//- folder structure pre.code code :highlight @@ -221,7 +221,7 @@ ul code $color | : $primary-color); -// button mixins +//- button mixins pre.code(data-lang='Sass') code :highlight(lang="scss") @@ -256,7 +256,7 @@ p a(href='https://www.npmjs.com/package/gulp-css-prefix', target='_blank') gulp-css-prefix | plugin and add a new Gulp task to enable it. -// custom prefix +//- custom prefix pre.code(data-lang='Bash') code :highlight(lang="Bash") @@ -269,7 +269,7 @@ p code gulpfile.js | file. -// custom prefix +//- custom prefix pre.code code :highlight(lang="JavaScript") diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/forms.pug diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/grid.pug diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/icons.pug diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/labels.pug diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/media.pug diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/navbar.pug diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/docs/src/contents/responsive.pug diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug new file mode 100644 index 0000000..a66aa34 --- /dev/null +++ b/docs/src/contents/tables.pug @@ -0,0 +1,64 @@ +p Tables include default styles for tables and data sets. + +.columns + .column.col-12 + table.table.table-striped + thead + tr + th Name + th Genre + th Release date + tbody + tr + td The Shawshank Redemption + td Crime, Drama + td 14 October 1994 + tr + td The Godfather + td Crime, Drama + td 24 March 1972 + tr + td Schindler's List + td Biography, Drama, History + td 4 February 1994 + tr + td Se7en + td Crime, Drama, Mystery + td 22 September 1995 + +p + | Add the + code table + | class to any + = '<table>' + | element. The class will add padding, border and emphasized table header. Use the + code table-striped + | class to + = '<table>' + | to add zebra striped style. For hoverable table rows, you can add the + code table-hover + | class to enable hover style. +p + | Use the + code active + | class to make <tr> element highlighted. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <table class="table table-striped table-hover"> + <thead> + <tr> + <th>name</th> + <th>genre</th> + <th>release date</th> + </tr> + </thead> + <tbody> + <tr class="active"> + <td>The Shawshank Redemption</td> + <td>Crime, Drama</td> + <td>14 October 1994</td> + </tr> + </tbody> + </table>
\ No newline at end of file diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug new file mode 100644 index 0000000..47b980a --- /dev/null +++ b/docs/src/contents/typography.pug @@ -0,0 +1,267 @@ +p + | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. + ++docs-subheading('typography-headings', 'Headings') + +.columns + .column.col-12 + h1 + | H1 Heading + small.label 40px + .column.col-12 + h2 + | H2 Heading + small.label 32px + .column.col-12 + h3 + | H3 Heading + small.label 28px + .column.col-12 + h4 + | H4 Heading + small.label 24px + .column.col-12 + h5 + | H5 Heading + small.label 20px + .column.col-12 + h6 + | H6 Heading + small.label 16px + +//- headings +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <h1>H1 Heading</h1> + <h1>H1 Heading <small class="label">40px</small></h1> + <span class="h1">H1 Heading</span> + ++docs-subheading('typography-paragraphs', 'Paragraphs') + +p + | Lorem ipsum dolor sit amet, consectetur + a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet + | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. +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. + +//- paragraphs +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <p>Lorem ipsum dolor sit amet, ...</p> + <p>...</p> + ++docs-subheading('typography-semantic-text', 'Semantic text elements') + +.columns + .column.col-6.col-xs-12 + abbr(title='Internationalization') I18N + code.ml-2 abbr + .column.col-6.col-xs-12 + strong Bold + code.ml-2 strong + code.ml-2 b + .column.col-6.col-xs-12 + cite Citation + code.ml-2 cite + .column.col-6.col-xs-12 + code Hello World! + code.ml-2 code + .column.col-6.col-xs-12 + del Deleted + code.ml-2 del + .column.col-6.col-xs-12 + em Emphasis + code.ml-2 em + .column.col-6.col-xs-12 + i Italic + code.ml-2 i + .column.col-6.col-xs-12 + ins Inserted + code.ml-2 ins + .column.col-6.col-xs-12 + kbd Ctrl + S + code.ml-2 kbd + .column.col-6.col-xs-12 + mark Highlighted + code.ml-2 mark + .column.col-6.col-xs-12 + ruby + | 漢 + rt kan + | 字 + rt ji + code.ml-2 ruby + .column.col-6.col-xs-12 + s Strikethrough + code.ml-2 s + .column.col-6.col-xs-12 + samp Sample + code.ml-2 samp + .column.col-6.col-xs-12 + | Text + sub Subscripted + code.ml-2 sub + .column.col-6.col-xs-12 + | Text + sup Superscripted + code.ml-2 sup + .column.col-6.col-xs-12 + time 20:00 + code.ml-2 time + .column.col-6.col-xs-12 + u Underline + code.ml-2 u + .column.col-6.col-xs-12 + var x + | = + var y + | + 2 + code.ml-2 var + ++docs-subheading('typography-east-asian', 'Optimized for East Asian fonts') + +p.h5 + small(lang='zh-Hans') 你好 + | , + small(lang='ja') こんにちは + | , + small(lang='ko') 안녕하세요 + +p.h6 Chinese (Simplified) +p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。 +p.h6 Chinese (Tranditional) +p(lang='zh-Hant') + | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」 +p.h6 Japanese +p(lang='ja') + | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。 +p.h6 Korean +p(lang='ko') + | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다. +p + | Use the + code lang + | attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p> + <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p> + <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p> + +p + | And you can use the + code cjk + | class or the + code lang + | attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. + +p(lang='ja') + u 祇園 + u 精舎 + | の鐘の声、諸行無常の響きあり。 +p(lang='ja') + del 祇園 + del 精舎 + | の鐘の声、諸行無常の響きあり。 + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p> + <p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p> + ++docs-subheading('typography-fonts', 'Fonts') + +p + | Spectre sets the most common and best + code font-family + | for each OS with fallback support in old systems. There are also fonts targeted East Asian typography. + +pre.code + code + :highlight(lang="scss") + /* Western typography targeted */ + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; + /* Monospace typography targeted */ + font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; + + /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */ + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; + /* Japanese (lang="ja") targeted */ + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif; + /* Korean (lang="ko") targeted */ + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif; + ++docs-subheading('typography-blockquote', 'Blockquote') + +blockquote + p + | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. + cite - Bill Gates + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <blockquote> + <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> + <cite>- Bill Gates</cite> + </blockquote> + ++docs-subheading('typography-lists', 'Lists') + +.columns + .column.col-4.col-xs-12 + ul.list + li list item 1 + li + | list item 2 + ul + li list item 2.1 + li list item 2.2 + li list item 2.3 + li list item 3 + .column.col-4.col-xs-12 + ol.list + li list item 1 + li + | list item 2 + ol + li list item 2.1 + li list item 2.2 + li list item 2.3 + li list item 3 + .column.col-4.col-xs-12 + dl.list + dt description list term 1 + dd description list description 1 + dt description list term 2 + dd description list description 2 + dt description list term 3 + dd description list description 3 + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- unordered list --> + <ul> + <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> + + <!-- description list --> + <dl> + <dt>description list term</dt> + <dd>description list description</dd> + </dl>
\ No newline at end of file diff --git a/docs/src/elements.pug b/docs/src/elements.pug new file mode 100644 index 0000000..d7cf0f0 --- /dev/null +++ b/docs/src/elements.pug @@ -0,0 +1,41 @@ +extends _docs-layout.pug + +block variables + - var title = 'Elements - Spectre.css CSS Framework' + - var description = '' + - var current = 'elements' + +block docs-content + //- Typography + +docs-heading('typography', 'Typography') + include contents/typography.pug + + //- Tables + +docs-heading('tables', 'Tables') + include contents/tables.pug + + //- Buttons + +docs-heading('buttons', 'Buttons') + include contents/buttons.pug + + //- Forms + +docs-heading('forms', 'Forms') + include contents/forms.pug + + //- Icons + +docs-heading('icons', 'Icons') + include contents/icons.pug + + //- Labels + +docs-heading('labels', 'Labels') + include contents/labels.pug + + //- Codes + +docs-heading('codes', 'Codes') + include contents/codes.pug + + //- Media + +docs-heading('media', 'Media') + include contents/media.pug + +
\ No newline at end of file diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug index 19e1db0..d5e8ac3 100644 --- a/docs/src/getting-started.pug +++ b/docs/src/getting-started.pug @@ -6,11 +6,11 @@ block variables - var current = 'getting-started' block docs-content - //- introduction + //- Introduction +docs-heading('introduction', 'Introduction') include contents/introduction.pug - //- installation + //- Installation +docs-heading('installation', 'Installation') include contents/installation.pug diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss index 342ca8c..e17f832 100644 --- a/docs/src/scss/docs.scss +++ b/docs/src/scss/docs.scss @@ -195,6 +195,10 @@ font-size: $font-size-sm; } + .columns { + margin-bottom: 1rem; + } + .column { padding: $layout-spacing; } @@ -463,6 +467,10 @@ .off-canvas-toggle { z-index: $zindex-3; } + + .off-canvas-content { + width: 100%; + } } .docs-sidebar { @@ -489,11 +497,9 @@ } .docs-content { - &.off-canvas-content { - min-width: auto; - padding: 0 1.5rem; - width: 100%; - } + min-width: auto; + padding: 0 1.5rem; + width: 100%; .s-title, .s-subtitle { @@ -568,9 +574,7 @@ } .docs-content { - &.off-canvas-content { - padding: 0 .5rem; - } + padding: 0 .5rem; .docs-block { padding: $unit-2 $unit-h; |