From f8d7a075fa0b28b299e33c1bdc2a9d25dd668847 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 20 May 2018 09:57:10 +0800 Subject: Move more Docs pages to Pug --- docs/src/elements.pug | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 docs/src/elements.pug (limited to 'docs/src/elements.pug') 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 -- cgit v1.3.1-23-gd82d From f7344f3e056a94640b6260ad7b7badfd33646c37 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 18:07:08 +0800 Subject: Update code and media docs to new Pug templates --- README.md | 2 +- docs/elements.html | 75 ++++++++++++++++++++++++++++++++++++++++++++- docs/src/contents/code.pug | 22 +++++++++++++ docs/src/contents/codes.pug | 0 docs/src/contents/media.pug | 73 +++++++++++++++++++++++++++++++++++++++++++ docs/src/elements.pug | 4 +-- 6 files changed, 172 insertions(+), 4 deletions(-) create mode 100644 docs/src/contents/code.pug delete mode 100644 docs/src/contents/codes.pug (limited to 'docs/src/elements.pug') diff --git a/README.md b/README.md index 711be7e..c5a47a8 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Forms](https://picturepan2.github.io/spectre/elements.html#forms) - [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - CSS only - [Labels](https://picturepan2.github.io/spectre/elements.html#labels) -- [Codes](https://picturepan2.github.io/spectre/elements.html#codes) +- [Code](https://picturepan2.github.io/spectre/elements.html#code) - [Media](https://picturepan2.github.io/spectre/elements.html#media) ### Layout diff --git a/docs/elements.html b/docs/elements.html index ae803f4..e7b4e82 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1232,10 +1232,83 @@ <span class="label label-rounded label-primary">primary label</span>
-

Codes

+

Code

+

Code is used for styling inline and multiline code snippets.

+

For inline code, you can use the <code> element. + For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. + The data-lang ibute is rendered as the language name in the top right. +

+ 
<!-- code snippets -->
+<button class="btn">
+  Submit
+</button>
+
+ 
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+  Submit
+&lt;<span class="tag">/button</span>&gt;
+</code></pre>

Media

+

Media includes responsive images, figures and video classes.

+

Images

+

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

+
+
macOS El Capitan Wallpaper
+
+

Add the img-fit-contain or img-fit-cover 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 classic background image trick. Microsoft Edge support is shipped with Build Number 16299+. +

+
+
+
macOS Yosemite Wallpaper +
img-fit-contain
+
+
+
+
macOS Yosemite Wallpaper +
img-fit-cover
+
+
+
+ 
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
+

Figure

+

You can use the element <figure> for an image with a caption. + Add the figure class to <figure> element. + The images with the img-responsive class will be responsive. + And the included class figure-caption will provide basic style for caption. + Also, you can use text-left, text-center and text-right for caption alignment. +

+
+
+
macOS Yosemite Wallpaper +
macOS Yosemite wallpaper
+
+
+
+

Video

+

For responsive video, add a container with the video-responsive class. + Insert any YouTube, Youku or other iframe/embed video inside the container. + The ratio is 16:9 by default. + You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio. +

+
+
+
+ +
+
+
+

For responsive <video> elements, you can add the video-responsive class directly.

+ 
<div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug new file mode 100644 index 0000000..f1ee876 --- /dev/null +++ b/docs/src/contents/code.pug @@ -0,0 +1,22 @@ +p Code is used for styling inline and multiline code snippets. +p + | For inline code, you can use the #{''} element. + | For multiline code snippet blocks, you can use #{'
'} with the #[code code] class as a container, and add #{''} inside it.
+  | The #[code data-lang] ibute is rendered as the language name in the top right.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
<!-- code snippets -->
+      <button class="btn">
+        Submit
+      </button>
+      

\ No newline at end of file
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
deleted file mode 100644
index e69de29..0000000
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index e69de29..fcb8d36 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -0,0 +1,73 @@
+p Media includes responsive images, figures and video classes.
+
++docs-subheading('media-images', 'Images')
+
+p
+  | Add the #[code img-responsive] class to #{''} elements. The images will scale with the parent sizes.
+
+.columns
+  .column.col-12
+    img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+p
+  | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{''} or #{'
'} for an image with a caption.
+  | Add the #[code figure] class to #{'
'} element.
+  | The images with the #[code img-responsive] class will be responsive.
+  | And the included class #[code figure-caption] will provide basic style for caption.
+  | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+.columns
+  .column.col-12
+    figure.figure
+      img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+      figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
++docs-subheading('media-video', 'Video')
+
+p
+  | For responsive video, add a container with the #[code video-responsive] 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] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+.columns
+  .column.col-12
+    .video-responsive
+      iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+p
+  | For responsive #{'

         

-          

-            
Typography

+          

+            
Typography

             
Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

             
Headings

             

@@ -317,8 +317,8 @@
   <dd>description list description</dd>
 </dl>
-
-

Tables

+
+

Tables

Tables include default styles for tables and data sets.

@@ -378,8 +378,8 @@ </tbody> </table>
-
-

Buttons

+
+

Buttons

Buttons include simple button styles for actions in different types and sizes.

@@ -526,8 +526,8 @@ <button class="btn">third button</button> </div>
-
-

Forms

+
+

Forms

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

@@ -1208,11 +1208,11 @@ </div> </fieldset>
-
-

Icons

+
+

Icons

-
-

Labels

+
+

Labels

Labels are formatted text tags for highlighted, informative information.

default labelprimary labelsecondary labelsuccess labelwarning labelerror label
@@ -1231,8 +1231,8 @@ <!-- rounded labels --> <span class="label label-rounded label-primary">primary label</span>
-
-

Code

+
+

Code

Code is used for styling inline and multiline code snippets.

For inline code, you can use the <code> element. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. @@ -1249,8 +1249,8 @@ &lt;<span class="tag">/button</span>&gt; </code></pre>

-
-

Media

+
+

Media

Media includes responsive images, figures and video classes.

Images

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

diff --git a/docs/getting-started.html b/docs/getting-started.html index 4d9f7ee..2665d0c 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -46,7 +46,7 @@
  • Forms
  • Icons
  • Labels
    • -
  • Codes
    • +
  • Code
  • Media
    • @@ -129,14 +129,14 @@
    -
    -

    Introduction

    +
    +

    Introduction

    Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

    Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

    -
    -

    Installation

    +
    +

    Installation

    There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.

    Install manually

    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

    @@ -161,8 +161,8 @@

    Install from Bower

    bower install spectre.css --save
    -
    -

    Custom version

    +
    +

    Custom version

    You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.

    Sass Source Code

    If you are looking for Less version of Spectre.css, please switch to Less branch.

    @@ -364,11 +364,11 @@ gulp.task('prefix',

    After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.

    -
    -

    Accessibility

    +
    +

    Accessibility

    -
    -

    Browser support

    +
    +

    Browser support

    Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

    • Chrome LAST 4
      • @@ -380,8 +380,8 @@ gulp.task('prefix',

      Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

    -
    -

    What's new

    +
    +

    What's new

    September 2017

    • Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
      • diff --git a/docs/layout.html b/docs/layout.html index dd4fae5..b20594a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -1,799 +1,1326 @@ - - - - - - - Layout - Spectre.css CSS Framework - - - - - - - - -
      -
      - - - - GitHub -
      - - diff --git a/docs/index.html b/docs/index.html index 7f2c097..fc52de8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,9 +94,9 @@
    + + +
    +
    + + +
    +

    Accordions are used to toggle sections of content.

    @@ -482,6 +493,9 @@

    Cards

    +
    + +

    Cards are flexible content containers.

    diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 68d17bc..0bbfd6a 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -152,7 +152,8 @@ .docs-content .docs-ad { background: #f8f9fa; border-radius: .1rem; - display: inline-block; + display: block; + margin: 2rem 0; padding: .4rem; position: relative; } @@ -387,7 +388,6 @@ .section-updates .card { border: 0; - color: #727e96; margin-bottom: 1rem; } @@ -541,6 +541,7 @@ @media (min-width: 1366px) { .docs-ad.docs-ad-sidebar { bottom: 1rem; + margin: 0; position: fixed; right: 1rem; width: 7.3rem; diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css index 47fe08d..27422c7 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-demo{padding-bottom:1rem;padding-top:1rem}.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}.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 +/*! 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-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:block;margin:2rem 0;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;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;margin:0;position:fixed;right:1rem;width:7.3rem}} \ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index cbb78f5..e7856f8 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -131,6 +131,17 @@

    Typography

    +
    +
    + + + +
    +
    + + +
    +

    Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

    Headings

    @@ -380,6 +391,9 @@

    Buttons

    +
    + +

    Buttons include simple button styles for actions in different types and sizes.

    diff --git a/docs/experimentals.html b/docs/experimentals.html index 22c20f2..f369752 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -139,6 +139,17 @@

    Autocomplete

    +
    +
    + + + +
    +
    + + +
    +

    Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

    @@ -245,6 +256,9 @@

    Calendars

    +
    + +

    Calendars are designed for date or date range picker and events display. It is made with flex layout.

    diff --git a/docs/getting-started.html b/docs/getting-started.html index f3c7f96..e7a99a7 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -137,6 +137,17 @@

    Installation

    +
    +
    + + + +
    +
    + + +
    +

    There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.

    Install manually

    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

    @@ -163,6 +174,9 @@

    Custom version

    +
    + +

    You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.

    Sass Source Code

    If you are looking for Less version of Spectre.css, please switch to Less branch.

    diff --git a/docs/index.html b/docs/index.html index fc52de8..8615293 100644 --- a/docs/index.html +++ b/docs/index.html @@ -47,6 +47,21 @@
    +
    +
    +
    +
    + + + +
    +
    + + +
    +
    +
    +
    @@ -94,6 +109,9 @@