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 include default styles for tables and data sets.

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

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 provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

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

Icons

Labels

Labels are formatted text tags for highlighted, informative information.

default labelprimary labelsecondary labelsuccess labelwarning labelerror label

@@ -1231,8 +1231,8 @@  <span class="label label-rounded label-primary">primary label</span>

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 @@ <<span class="tag">/button</span>> </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.

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 @@ - +

@@ -129,14 +129,14 @@

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

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

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

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

'prefix'

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

What's new

September 2017

Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW

Layout - Spectre.css CSS Framework

- - -

- -

SPECTRE

- -

- - - Getting started - -

- + + Elements - Spectre.css CSS Framework + + + + + + + + + + + + + +

+ +

SPECTRE

+ + Getting started +

+ +

- - - Elements - -

- Typography -
- Tables -
- Buttons -
- Forms -
- Icons -
- Labels -
- Codes -
- Media -

+ + Elements +

+ +

- - - Layout - -

- +

+ + Layout +

+ +

- - - Components - -

- Accordions -
- Avatars -
- Badges -
- Bars -
- Breadcrumbs -
- Cards -
- Chips -
- Empty states -
- Menus -
- Modals -
- Navs -
- Pagination -
- Panels -
- Popovers -
- Steps -
- Tabs -
- Tiles -
- Toasts -
- Tooltips -

+ + Components +

+ +

- - - Utilities - -

- Colors -
- Cursors -
- Display -
- Divider -
- Loading -
- Position -
- Shapes -
- Text -

+ + Utilities +

+ +

- - - Experimentals - -

- +

+ + Experimentals +

+ +

- - - -

Layout

- -

- - - - -

- - - -

- -

Flexbox grid

Layout includes flexbox based responsive grid system with 12 columns.

- -

col-12 (100%)

col-9 (75%)

col-6 (50%)

col-3 (25%)

- -

Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

And you can add the col-gapless class to the columns to have gapless columns.

- -

col-6 (gapless)

Typography

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

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

<h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
+

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. +

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>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
+

Semantic text elements

I18Nabbr

Boldstrongb

+ Citationcite +

Hello World!code

+ ~~Deleted~~del +

Emphasisem

Italici

Insertedins

Ctrl + Skbd

+ Highlightedmark +

+ 漢 + kan字 + ji + ruby +

+ ~~Strikethrough~~s +

Samplesamp

Text _Subscriptedsub

Text ^{Superscripted}sup

+ 20:00time +

+ Underlineu +

+ x = + y + 2var +

Optimized for East Asian fonts

你好, こんにちは,안녕하세요

Chinese (Simplified)

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

Chinese (Tranditional)

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

Japanese

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。

Korean

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

+ 祇園 + 精舎の鐘の声、諸行無常の響きあり。 +

<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+

Fonts

Spectre sets the most common and best font-family for each OS with fallback support in old systems. + There are also fonts targeted East Asian typography. +

/* 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;
 
-        
-          By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.
-        
+/* 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;
+

Blockquote

+
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.
+ - Bill Gates +

<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>
+

Lists

list item 1
list item 2 +
- list item 2.1
- list item 2.2
- list item 2.3
+
list item 3

list item 1
list item 2 +
1. list item 2.1
2. list item 2.2
3. list item 2.3
+
list item 3

description list term 1: description list description 1
description list term 2: description list description 2
description list term 3: description list description 3

<!-- 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>
 
-        
-          
-            col-8
+<!-- description list -->
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>

col-8

Tables

Tables include default styles for tables and data sets.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name	Genre	Release date
The Shawshank Redemption	Crime, Drama	14 October 1994
The Godfather	Crime, Drama	24 March 1972
Schindler's List	Biography, Drama, History	4 February 1994
Se7en	Crime, Drama, Mystery	22 September 1995

Add the table class to any <table> element. + The class will add padding, border and emphasized table header. + Use the table-striped class to <table> to add zebra striped style. + For hoverable table rows, you can add the table-hover class to enable hover style. +

Use the active class to make <tr> element highlighted.

<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>

- - -

<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6</div>
-    <div class="column col-3">col-3</div>
-    <div class="column col-2">col-2</div>
-    <div class="column col-1">col-1</div>
-  </div>
-
-  <div class="columns col-gapless">
-    <div class="column col-6">col-6</div>
-    <div class="column col-6">col-6</div>
-  </div>
-
-  <div class="columns col-oneline">
-    <div class="column col-8">col-8</div>
-    <div class="column col-8">col-8</div>
-  </div>
-</div>
+          
+            #Buttons
+            Buttons include simple button styles for actions in different types and sizes.
+            
+              
+                
+                
+                
+              
+            
+            Add the btn class to <a>, <input> or <button> elements for a default button. 
+              There are classes btn-primary and btn-link for predefined primary and link buttons.
+            
+            <button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
 
+            #Button colors
+            
+              
+                
+                
+              
+            
+            Add the btn-success or btn-error class for success (green) or error (red) button color.
+              If you need more button colors, please use button mixins to create your own button color variants.
+            
+            <button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+
+            #Button sizes
+            
+              
+                
+                
+              
+              
+                
+                
+              
+              
+                
+                
+              
+            
+            Add the btn-sm or btn-lg class for small or large button size. 
+              Also, you can add the btn-block class for a full-width button.
+            
+            <button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
 
-        Grid offset
-        
-          The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
-        
+<button class="btn btn-block">block button</button>
 
-        
-          
-            col-2
-          
-          
-            col-4 col-mx-auto
-          
-        
-        
-          
-            col-2
-          
-          
-            col-4 col-ml-auto
-          
-        
-        
-          
-            col-4 col-ml-auto
-          
-          
-            col-2
-          
-        
-        
-          
-            col-4 col-mx-auto
-          
-          
-            col-2
-          
-        
-        
-          
-            col-4 col-mr-auto
-          
-          
-            col-2
-          
-        
-        
-          
-            col-4 col-mx-auto
-          
-        
-
-
-<div class="container">
-  <div class="columns">
-    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
-    <div class="column col-2">col-2</div>
-  </div>
-</div>
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
 
-
-        Grid nesting
-        
-          To nest grids, add the new columns and column structure within an existing column.
-        
-        
-          
-            col-6
+            Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
             
-              
-                col-6
+              
+                
+                
+                
               
-              
-                col-6
+              
+                
+                
+                
               
             
-          
-          
-            col-6
-          
-        
-
-
-<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6
-      <div class="columns">
-        <div class="column col-6">col-6</div>
-        <div class="column col-6">col-6</div>
-      </div>
-    </div>
-    <div class="column col-6">col-6</div>
-  </div>
-</div>
+            <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
 
-
-      

-
-      
-        
-          
-        
-      
-
-      
-        #Responsive
-        
-          Spectre provides a neat responsive layout grid system and responsive visibility utilities. 
-        
-        
-          
-            col-10 
 col-lg-8 
 col-md-6 
 col-sm-4
-          
-          
-            col-2 
 col-lg-4 
 col-md-6 
 col-sm-8
+            #Button states
+            Add the active class for active button state style.
+            
+              
+                
+                
+                
+              
+            
+            Add the disabled class or the disabled attribute for disabled button state style.
+            
+              
+                
+                
+                
+              
+            
+            <!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
+            A button with the loading class can show loading indicator.
+            
+              
+                
+                
+                
+              
+            
+            <!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+
+            #Button groups
+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+              
+            
+            If you want to use buttons as a group, add the btn-group class to the container.
+              You can add the btn-group-block class for a full-width button group.
+            
+            <div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div> 
           
-        
-
-        
-          There are col-xs-[1-12], col-sm-[1-12], col-md-[1-12], col-lg-[1-12] and col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.
-          
-            col-xs-[1-12] apply to window width smaller than or equal to 480px. 
-            col-sm-[1-12] apply to window width smaller than or equal to 600px. 
-            col-md-[1-12] apply to window width smaller than or equal to 840px. 
-            col-lg-[1-12] apply to window width smaller than or equal to 960px. 
-            col-xl-[1-12] apply to window width smaller than or equal to 1280px. 
-            col-[1-12] apply to all window width, including the width wider than 1280px. 
-          
-        
-
-
-<div class="container">
-  <div class="columns">
-    <div class="column col-xs-6">col-xs-6</div>
-    <div class="column col-xs-3">col-xs-3</div>
-    <div class="column col-xs-3">col-xs-3</div>
-  </div>
-</div>
+          
+            #Forms
+            Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+            
+              
+                
+                  Name
+                  
+                
+                
+                  Email
+                  
+                
+              
+            
+            <!-- form input control -->
+<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>
 
-
-        Responsive container
-        
-          The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm (600px), grid-md (840px), grid-lg (960px) or grid-xl (1280px) to container for a fixed-width container with the specific max-width.
-        
-
-
-<!-- 100% width container with max-width set to grid-lg (960px) -->
-<div class="container grid-lg">
-  <div class="columns">
-    ...
-  </div>
-</div>
+            
+              
+                
+                  Message
+                  
+                
+              
+            
+            <!-- form textarea control -->
+<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>
 
+            
+              
+                
+                  
+                
+                
+                  
+                
+              
+            
+            <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
+            
+              
+                
+                  
+                    Gender
+                    
+                       Male
+                    
+                    
+                       Female
+                    
+                  
+                
+              
+            
+            <!-- form radio control -->
+<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>
+
+            
+              
+                
+                  
+                     Send me emails with news and tips
+                  
+                
+                
+                  
+                     Send me emails with news and tips
+                  
+                
+              
+            
+            <!-- form switch control -->
+<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>
+
+            
+              
+                
+                  
+                     Remember me
+                  
+                
+                
+                  
+                     Remember me
+                  
+                
+              
+            
+            <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox">
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
+
+            You can use :indeterminate pseudo class for indeterminate state of checkboxes.
+            #Horizontal forms
+            If you want to have a horizontal form, add the form-horizontal class to the <form> container.
+              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            
+            
+              
+                
+                  
+                    
+                      Name
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Email
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Gender
+                    
+                    
+                      
+                         Male
+                      
+                      
+                         Female
+                      
+                    
+                  
+                  
+                    
+                      Source
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      
+                         Send me emails with news and tips
+                      
+                    
+                  
+                  
+                    
+                      Message
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      
+                         Remember me
+                      
+                    
+                  
+                
+              
+            
+            <form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
+            #Form sizes
+            For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
+            
+              
+                Label
+              
+              
+                
+              
+              
+                
+              
+            
+            
+              
+                Label
+              
+              
+                
+              
+              
+                
+              
+            
+            You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
+            #Form icons
+            Spectre Form components has Spectre Icons support.
+            Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
+              And add the icon with form-icon class next to the <input>.
+            
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            <!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+
+            You can use the loading class for loading or posting state.
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            <!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+
+            #Input types
+            
+              
+                
+                  
+                    
+                      Email
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      URL
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Search
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Tel
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Password
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Number
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Date
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Color
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      File
+                    
+                    
+                      
+                    
+                  
+                
+              
+            
+            #Input groups
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                    
+                  
+                  
+                
+              
+              
+                
+                  
+                    
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            If you want to attach text and button along with an input, add the input-group class to the input container.
+              And add the input-group-addon class to the text element and input-group-btn to the button element.
+            
+            <!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
 
-        Responsive visibility
-        
-          The responsive visibility utilities help show and hide elements on specific viewport sizes. 
-        
-        
-          
-            
-              
-              
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-          
-        size-xs size-sm size-md size-lg size-xl
hide-xs 
hide-sm 
hide-md 
hide-lg 
hide-xl 
-
-        
-          For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.
-          
-            hide-xs hides elements when the window width is smaller than or equal to 480px. 
-            hide-sm hides elements when the window width is smaller than or equal to 600px. 
-            hide-md hides elements when the window width is smaller than or equal to 840px. 
-            hide-lg hides elements when the window width is smaller than or equal to 960px. 
-            hide-xl hides elements when the window width is smaller than or equal to 1280px. 
-          
-        
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
 
-        
-          
-            
-              
-              
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-          
-        size-xs size-sm size-md size-lg size-xl
show-xs 
show-sm 
show-md 
show-lg 
show-xl 
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+
+            #Form validation styles
+            To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
+              Use the form-input-hint class to provide form validation success and error messages.
+            
+            
+              
+                
+                  Input
+                  
+                    Name
+                    
+                    The name is valid.
+                  
+                  
+                    Password
+                    
+                    Passwords must have at least 8 characters.
+                  
+                  
+                    Email
+                    
+                    The Email address is unavailable.
+                  
+                
+                
+                  Select
+                  
+                    
+                    The option is invalid.
+                  
+                  
+                    
+                    The option is available.
+                  
+                
+                
+                  Checkbox, Radio and Switch (Error state only)
+                  
+                    
+                       I'm not a robot.
+                    
+                  
+                  
+                    
+                       Male
+                    
+                    
+                       Female
+                    
+                  
+                  
+                    
+                       Send me emails with news and tips
+                    
+                  
+                
+              
+            
+            <form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
 
-        
-          For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.
-          
-            show-xs shows elements when the window width is smaller than or equal to 480px. 
-            show-sm shows elements when the window width is smaller than or equal to 600px. 
-            show-md shows elements when the window width is smaller than or equal to 840px. 
-            show-lg shows elements when the window width is smaller than or equal to 960px. 
-            show-xl shows elements when the window width is smaller than or equal to 1280px. 
-          
-          Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.
-          Responsive Resizer
-        
-      

+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
 
-      
-        #Navbar
-        
-          Navbar is a layout container that appears in the header of apps and websites. 
-        
-        
-          
-            
-              
-                Spectre.css
-                Docs
-                GitHub
-              
-              
-                
-                  
-                  
-                
+  <!-- form validation example for checkbox, radio and switch -->
+  <div class="form-group">
+    <label class="form-checkbox is-error">
+      <input type="checkbox">
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+

+            #Form disabled styles
+            
+               Add the disabled attribute to the element or <fieldset> for a disabled form components style.
+            
+              
+                
+                  
+                    
+                      Name
+                      
+                    
+                    
+                      Gender
+                      
+                         Male
+                      
+                      
+                         Female
+                      
+                    
+                    
+                      
+                    
+                    
+                      
+                         Send me emails with news and tips
+                      
+                    
+                    
+                      Message
+                      
+                    
+                    
+                      
+                         Remember me
+                      
+                    
+                  
+                
               
             
+            <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>
           

-        

-        
-          The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.
-        
+          
+            #Icons
+          
+          
+            #Labels
+            Labels are formatted text tags for highlighted, informative information.
+            
+              default labelprimary labelsecondary labelsuccess labelwarning labelerror label
+            
+            Add the label class to <span> or <small> elements.
+              You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
+            
+            
+              default labelprimary label
+            
+            Add the label-rounded class to have rounded labels.
+            <!-- normal labels -->
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
 
-
-<header class="navbar">
-  <section class="navbar-section">
-    <a href="#" class="navbar-brand mr-2">Spectre.css</a>
-    <a href="#" class="btn btn-link">Docs</a>
-    <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a>
-  </section>
-  <section class="navbar-section">
-    <div class="input-group input-inline">
-      <input class="form-input" type="text" placeholder="search">
-      <button class="btn btn-primary input-group-btn">Search</button>
-    </div>
-  </section>
-</header>
+<!-- rounded labels -->
+<span class="label label-rounded label-primary">primary label</span>
+          

+          
+            #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>
 
-
-        
-          You can use navbar-center class to have a centered section.
-        
-
-        
-          
-            
-              
-                Docs
-                Examples
+            <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.
+            
+              
+            
+            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+.
+            
+            
+              
+                
+                  img-fit-contain
+                
               
-              
-                
+              
+                
+                  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
+                
               
-              
-                Twitter
-                GitHub
+            
+            #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>
           
         
-
-
-<header class="navbar">
-  <section class="navbar-section">
-    <a href="#" class="btn btn-link">Docs</a>
-    <a href="#" class="btn btn-link">Examples</a>
-  </section>
-  <section class="navbar-center">
-    <!-- centered logo or brand -->
-  </section>
-  <section class="navbar-section">
-    <a href="#" class="btn btn-link">Twitter</a>
-    <a href="#" class="btn btn-link">GitHub</a>
-  </section>
-</header>
-
-
       
-
-      
-        GitHub | Twitter | PayPal Donate | Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-      
-
     
-  
-
-  
-
-
+    
+  
+
\ No newline at end of file
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
index 7ae771c..ae2da02 100644
--- a/docs/src/_docs-layout.pug
+++ b/docs/src/_docs-layout.pug
@@ -32,7 +32,7 @@ block content
             {url: '#forms', name: 'Forms'},
             {url: '#icons', name: 'Icons'},
             {url: '#labels', name: 'Labels'},
-            {url: '#codes', name: 'Codes'},
+            {url: '#code', name: 'Code'},
             {url: '#media', name: 'Media'}
           )
           +docs-accordion(
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
index 54e76d7..ccbe89e 100644
--- a/docs/src/_mixins.pug
+++ b/docs/src/_mixins.pug
@@ -9,8 +9,8 @@ mixin docs-accordion(id, name, ...pages)
             a(href=id + '.html' + page.url)= page.name
 
 mixin docs-heading(id, name)
-  .container
-    h3.s-title(id=id)
+  .container(id=id)
+    h3.s-title
       a.anchor(href='#'+id aria-hidden='true') #
       | #{name}
     if block
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index 809fe0f..3f1e270 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -36,6 +36,4 @@ block docs-content
   
   //- Media
   +docs-heading('media', 'Media')
-    include contents/media.pug
-
-    
\ No newline at end of file
+    include contents/media.pug
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
new file mode 100644
index 0000000..3f1e270
--- /dev/null
+++ b/docs/src/layout.pug
@@ -0,0 +1,39 @@
+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('code', 'Code')
+    include contents/code.pug
+  
+  //- Media
+  +docs-heading('media', 'Media')
+    include contents/media.pug
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d

#Typography

#Typography

#Headings

#Tables

#Tables

#Buttons

#Buttons

#Forms

#Forms

#Icons

#Icons

#Labels

#Labels

#Code

#Code

#Media

#Media

#Images

#Introduction

#Introduction

#Installation

#Installation

#Install manually

#Install from Bower

#Custom version

#Custom version

#Accessibility

#Accessibility

#Browser support

#Browser support

#What's new

#What's new

SPECTRE

SPECTRE

#Layout

#Flexbox grid

#Typography

#Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

#Paragraphs

#Semantic text elements

#Optimized for East Asian fonts

#Fonts

#Blockquote

#Lists

#Tables

#Buttons

#Button colors

#Button sizes

Grid offset

Grid nesting

#Responsive

#Button states

#Button groups

#Forms

Responsive container

#Horizontal forms

#Form sizes

#Form icons

#Input types

#Input groups

Responsive visibility

#Form validation styles

#Navbar

#Form disabled styles

#Icons

#Labels

#Code

#Media

#Images

#Figure

#Video

Typography

Typography

Headings

Tables

Tables

Buttons

Buttons

Forms

Forms

Icons

Icons

Labels

Labels

Code

Code

Media

Media

Images

Introduction

Introduction

Installation

Installation

Install manually

Install from Bower

Custom version

Custom version

Accessibility

Accessibility

Browser support

Browser support

What's new

What's new

Layout

Flexbox grid

Typography

Headings

Paragraphs

Semantic text elements

Optimized for East Asian fonts

Fonts

Blockquote

Lists

Tables

Buttons

Button colors

Button sizes

Responsive

Button states

Button groups

Forms

Horizontal forms

Form sizes

Form icons

Input types

Input groups

Form validation styles

Navbar

Form disabled styles

Icons

Labels

Code

Media

Images

Figure

Video