From c59e31abc96642d4e54e56e3aa8167806a35f35e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 17:37:29 +0800 Subject: Update buttons and forms docs to Pug templates --- docs/elements.html | 941 ++++++++++++++++++++++++++++++++++++--- docs/getting-started.html | 36 +- docs/src/contents/buttons.pug | 179 ++++++++ docs/src/contents/forms.pug | 626 ++++++++++++++++++++++++++ docs/src/contents/tables.pug | 19 +- docs/src/contents/typography.pug | 22 +- 6 files changed, 1721 insertions(+), 102 deletions(-) (limited to 'docs') diff --git a/docs/elements.html b/docs/elements.html index cf1c334..f971860 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -153,15 +153,17 @@
H6 Heading 16px
- 
<h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
+            
<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.

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

             
Semantic text elements

             

@@ -205,7 +207,7 @@
               

             
             
Optimized for East Asian fonts

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

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

             
Chinese (Simplified)

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

             
Chinese (Tranditional)

@@ -215,9 +217,9 @@
             
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>
+            
<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.

             

@@ -228,32 +230,34 @@
               祇園
               精舎の鐘の声、諸行無常の響きあり。
             

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

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

             

@@ -295,23 +299,23 @@
               

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

+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>

           
           

             
Tables

@@ -351,31 +355,858 @@
                 
               

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

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

           
           

             
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>
+
+<button class="btn btn-block">block button</button>
+
+<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>
+

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

+            

+              

+                
+                
+                
+              

+              

+                
+                
+                
+              

+            

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

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

           

           

             
Forms

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

+            

+              

+                

+                  
+                  
+                

+                

+                  
+                  
+                

+              

+            

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

+            

+              

+                

+                  
+                  
+                

+              

+            

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

+            

+              

+                

+                  

+                    
+                    
+                    
+                  

+                

+              

+            

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

+            

+              

+                

+                  
+                

+                

+                  
+                

+              

+            

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

+            

+              

+                

+                  
+                

+                

+                  
+                

+              

+            

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

+            

+              

+                

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                  

+                

+              

+            

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

+            

+              

+                
+              

+              

+                
+              

+              

+                
+              

+            

+            

+              

+                
+              

+              

+                
+              

+              

+                
+              

+            

+            
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

+            

+              

+                

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                  

+                    

+                      
+                    

+                    

+                      
+                    

+                  

+                

+              

+            

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

+                    
+                    
+                    
The name is valid.

+                  

+                  

+                    
+                    
+                    
Passwords must have at least 8 characters.

+                  

+                  

+                    
+                    
+                    
The Email address is unavailable.

+                  

+                

+                

+                  Select
+                  

+                    
+                    
The option is invalid.

+                  

+                  

+                    
+                    
The option is available.

+                  

+                

+                

+                  Checkbox, Radio and Switch (Error state only)
+                  

+                    
+                  

+                  

+                    
+                    
+                  

+                  

+                    
+                  

+                

+              

+            

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

+            

+              

+                

+                  

+                    

+                      
+                      
+                    

+                    

+                      
+                      
+                      
+                    

+                    

+                      
+                    

+                    

+                      
+                    

+                    

+                      
+                      
+                    

+                    

+                      
+                    

+                  

+                

+              

+            

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

           

           

             
Icons

diff --git a/docs/getting-started.html b/docs/getting-started.html
index 0f3f1ff..4d9f7ee 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -142,15 +142,15 @@
             
Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

             
Download Spectre.css

             
Include spectre.css located in /dist in your website or Web app . Also, you can add spectre-icons.css and spectre-exp.css accordingly.

-            
<link rel="stylesheet" href="spectre.min.css">
-<link rel="stylesheet" href="spectre-exp.min.css">
-<link rel="stylesheet" href="spectre-icons.min.css">
+            
<link rel="stylesheet" href="spectre.min.css">
+<link rel="stylesheet" href="spectre-exp.min.css">
+<link rel="stylesheet" href="spectre-icons.min.css">
 

             
Install from CDN

             
Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.

-            
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
-<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
-<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+            
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
+<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
 

             
Install with NPM

             
npm install spectre.css --save
@@ -191,19 +191,19 @@
             
             
// Example of project-name.scss
 // Define variables to override default ones
-$primary-color: #2e5bec;
-$dark-color: #3e396b;
+$primary-color: #2e5bec;
+$dark-color: #3e396b;
 
 // Import full Spectre source code
-@import "node_modules/spectre.css/src/spectre";
+@import "node_modules/spectre.css/src/spectre";
 

             
Alternatively, you can create custom _variables.scss and import it to project-name.scss.

             
// Example of project-name.scss
-@import "variables";
+@import "variables";
 
 // Import only the needed components
-@import "node_modules/spectre.css/src/buttons";
-@import "node_modules/spectre.css/src/forms";
+@import "node_modules/spectre.css/src/buttons";
+@import "node_modules/spectre.css/src/forms";
 

             
Folder structure

             
spectre/
@@ -335,14 +335,14 @@
               
  • @mixin button-variant($color: $primary-color);
    • 
               
  • @mixin button-outline-variant($color: $primary-color);
    • 
             
-            
    <!-- filled button with the success color -->
-.btn-success {
-  @include button-variant($success-color);
+            
    <!-- filled button with the success color -->
+.btn-success {
+  @include button-variant($success-color);
 }
 
-<!-- outlined button with the success color -->
-.btn-outline-success {
-  @include button-outline-variant($success-color);
+<!-- outlined button with the success color -->
+.btn-outline-success {
+  @include button-outline-variant($success-color);
 }
 
    
             
    Variables - Sizes
    
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
index e69de29..8f8dbb1 100644
--- a/docs/src/contents/buttons.pug
+++ b/docs/src/contents/buttons.pug
@@ -0,0 +1,179 @@
+p Buttons include simple button styles for actions in different types and sizes.
+
+.columns
+  .column.col-12
+    button.btn default button
+    button.btn.btn-primary primary button
+    button.btn.btn-link link button
+
+p
+  | Add the #[code btn] class to #{''}, #{''} or #{'
+      
+      
+
++docs-subheading('buttons-colors', 'Button colors')
+
+.columns
+  .column.col-12
+    button.btn.btn-success success button
+    button.btn.btn-error error button
+
+p
+  | Add the #[code btn-success] or #[code btn-error] 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
+  |  to create your own button color variants.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
++docs-subheading('buttons-sizes', 'Button sizes')
+
+.columns
+  .column.col-12
+    button.btn.btn-primary.btn-lg
+      | large 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary.btn-lg large button
+  .column.col-12
+    button.btn.btn-primary
+      | normal 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary normal button
+  .column.col-12
+    button.btn.btn-primary.btn-sm
+      | small 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary.btn-sm small button
+
+
+p
+  | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
+  | Also, you can add the #[code btn-block] class for a full-width button.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
+      
+
+      
+      
+      
+
+p
+  | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+.columns
+  .column.col-xs-12
+    button.btn.btn-action.btn-primary.btn-lg
+      i.icon.icon-menu
+    button.btn.btn-action.btn-primary
+      i.icon.icon-menu
+    button.btn.btn-action.btn-primary.btn-sm
+      i.icon.icon-menu
+  .column.col-xs-12
+    button.btn.btn-action.btn-primary.btn-lg.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.btn-sm.circle
+      i.icon.icon-arrow-up
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
++docs-subheading('buttons-states', 'Button states')
+
+p
+  | Add the #[code active] class for active button state style.
+
+.columns
+  .column.col-12
+    button.btn.active default active
+    button.btn.btn-primary.active primary active
+    button.btn.btn-link.active link active
+
+p
+  | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
+
+.columns
+  .column.col-12
+    button.btn.disabled(tabindex="-1") default disabled
+    button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
+    button.btn.btn-link(disabled="" tabindex="-1") link disabled
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+
+p
+  | A button with the #[code loading] class can show loading indicator.
+
+.columns
+  .column.col-12
+    button.btn.loading default button
+    button.btn.btn-primary.loading primary button
+    button.btn.btn-link.loading link button
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+
++docs-subheading('buttons-groups', 'Button groups')
+
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn first button
+      button.btn second button
+      button.btn third button
+  .column.col-md-12
+    .btn-group.btn-group-block
+      button.btn.btn-primary first button
+      button.btn.btn-primary second button
+      button.btn.btn-primary third button
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn.btn-sm.active first button
+      button.btn.btn-sm second button
+      button.btn.btn-sm third button
+  .column.col-md-12
+    .btn-group.btn-group-block
+      button.btn.btn-primary.btn-sm.active first button
+      button.btn.btn-primary.btn-sm second button
+      button.btn.btn-primary.btn-sm third button
+    
+p
+  | If you want to use buttons as a group, add the #[code btn-group] class to the container.
+  | You can add the #[code btn-group-block] class for a full-width button group.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
+        
+        
+      
     
\ No newline at end of file
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index e69de29..bcfde1a 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -0,0 +1,626 @@
+p
+  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-label(for="input-example-1") Name
+      input#input-example-1.form-input(type="text" placeholder="Name")
+    .form-group
+      label.form-label(for="input-example-2") Email
+      input#input-example-2.form-input(type="email" placeholder="Email")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-label(for="input-example-3") Message
+      textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      select.form-select
+        option Choose an option
+        option Slack
+        option Skype
+        option Hipchat
+    .form-group
+      select.form-select(multiple="")
+        option Choose an option
+        option Slack
+        option Skype
+        option Hipchat
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-label Gender
+        label.form-radio
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+        |  Send me emails with news and tips
+    .form-group
+      label.form-switch
+        input(type="checkbox" checked="")
+        i.form-icon
+        |  Send me emails with news and tips
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+        |  Remember me
+    .form-group
+      label.form-checkbox
+        input(type="checkbox" checked="")
+        i.form-icon
+        |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+      
    
+
+p
+  | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes.
+
++docs-subheading('forms-horizontal', 'Horizontal forms')
+
+p
+  | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'
    '} container.
+  | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
+
+.columns
+  .column.col-9.col-sm-12
+    form.form-horizontal(action="#forms")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-4") Name
+        .col-9.col-sm-12
+          input#input-example-4.form-input(type="text" placeholder="Name")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-5") Email
+        .col-9.col-sm-12
+          input#input-example-5.form-input(type="email" placeholder="Email")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label Gender
+        .col-9.col-sm-12
+          label.form-radio
+            input(type="radio" name="gender")
+            i.form-icon
+            |  Male
+          label.form-radio
+            input(type="radio" name="gender" checked="")
+            i.form-icon
+            |  Female
+      .form-group
+        .col-3.col-sm-12
+          label.form-label Source
+        .col-9.col-sm-12
+          select.form-select(multiple="")
+            option Slack
+            option Skype
+            option Hipchat
+      .form-group
+        .col-9.col-sm-12.col-ml-auto
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+            |  Send me emails with news and tips
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-6") Message
+        .col-9.col-sm-12
+          textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
+      .form-group
+        .col-9.col-sm-12.col-ml-auto
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+            |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
    
+          
    
+            
+          
    
+          
    
+            
+          
    
+        
    
+        
+      
    
+
++docs-subheading('forms-sizes', 'Form sizes')
+
+p
+  | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
+
+.columns
+  .column.col-4.col-xs-12
+    label.form-label.label-sm Label
+  .column.col-4.col-xs-12
+    input.form-input.input-sm(type="text" placeholder="Name")
+  .column.col-4.col-xs-12
+    select.form-select.select-sm
+      option Choose an option
+      option Slack
+      option Skype
+      option Hipchat
+.columns
+  .column.col-4.col-xs-12
+    label.form-label.label-lg Label
+  .column.col-4.col-xs-12
+    input.form-input.input-lg(type="text" placeholder="Name")
+  .column.col-4.col-xs-12
+    select.form-select.select-lg
+      option Choose an option
+      option Slack
+      option Skype
+      option Hipchat
+
+p
+  | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
+
++docs-subheading('forms-icons', 'Form icons')
+
+p
+  | Spectre Form components has 
+  a(href="#icons") Spectre Icons
+  |  support.
+p
+  | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{''} element.
+  | And add the icon with #[code form-icon] class next to the #{''}.
+
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-left
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+  .column.col-4.col-xs-12
+    .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+  .column.col-4.col-xs-12
+    .has-icon-left
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
+p
+  | You can use the #[code loading] class for loading or posting state.
+
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.loading
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.loading
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.loading
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
++docs-subheading('forms-input', 'Input types')
+
+.columns
+  .column.col-9.col-sm-12
+    form.form-horizontal(action="#forms")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-8") Email
+        .col-9
+          input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-9") URL
+        .col-9
+          input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-10") Search
+        .col-9
+          input#input-example-10.form-input(type="search" placeholder="Search")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-11") Tel
+        .col-9
+          input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-12") Password
+        .col-9
+          input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-13") Number
+        .col-9
+          input#input-example-13.form-input(type="number" placeholder="00" value="66")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-14") Date
+        .col-9
+          input#input-example-14.form-input(type="date" value="2016-12-31")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-15") Color
+        .col-9
+          input#input-example-15.form-input(type="color" value="#5755d9")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-16") File
+        .col-9
+          input#input-example-16.form-input(type="file")
+
++docs-subheading('forms-input-groups', 'Input groups')
+
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input.input-sm(type="text" placeholder="username")
+      select.form-select.select-sm
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon.addon-sm slack.com/
+      input.form-input.input-sm(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn.btn-sm Submit
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input(type="text" placeholder="username")
+      select.form-select
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon slack.com/
+      input.form-input(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn Submit
+.columns
+  .column.col-xs-12
+    .input-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+  .column.col-xs-12
+    .input-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input.input-lg(type="text" placeholder="username")
+      select.form-select.select-lg
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon.addon-lg slack.com/
+      input.form-input.input-lg(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn.btn-lg Submit
+
+p
+  | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
+  | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        ...
+        
+      
    
+
+      
+      
    
+        ...
+        
+      
    
+
+      
+      
    
+        ...
+        
+        
+      
    
+
++docs-subheading('forms-validation', 'Form validation styles')
+
+p
+  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+  | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
+.columns
+  .column.col-9.col-sm-12
+    fieldset
+      legend Input
+      .form-group
+        label.form-label(for="input-example-17") Name
+        input#input-example-17.form-input.is-success(type="text" placeholder="Name")
+        p.form-input-hint The name is valid.
+      .form-group.has-error
+        label.form-label(for="input-example-18") Password
+        input#input-example-18.form-input(type="password" placeholder="Password")
+        p.form-input-hint Passwords must have at least 8 characters.
+      .form-group
+        label.form-label(for="input-example-21") Email
+        input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+        p.form-input-hint The Email address is unavailable.
+    fieldset
+      legend Select
+      .form-group
+        select.form-select.is-error
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+        p.form-input-hint The option is invalid.
+      .form-group.has-success
+        select.form-select
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+        p.form-input-hint The option is available.
+    fieldset
+      legend Checkbox, Radio and Switch (Error state only)
+      .form-group
+        label.form-checkbox.is-error
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  I'm not a robot.
+      .form-group.has-error
+        label.form-radio
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-switch.is-error
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Send me emails with news and tips
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
+        
    
+          
+          
+          
    The name is invalid.
    
+        
    
+
+        
+        
    
+          
+          
+          
    The name is invalid.
    
+        
    
+
+        
+        
    
+          
+        
    
+      
    
+
++docs-subheading('forms-disabled', 'Form disabled styles')
+
+p 
+  | Add the #[code disabled] attribute to the element or #{'
    '} for a disabled form components style.
+
+.columns
+  .column.col-6.col-xs-12
+    form(action="#forms")
+      fieldset(disabled="")
+        .form-group
+          label.form-label(for="input-example-19") Name
+          input#input-example-19.form-input(type="text" placeholder="Name")
+        .form-group
+          label.form-label Gender
+          label.form-radio
+            input(type="radio" name="gender" disabled="")
+            i.form-icon
+            |  Male
+          label.form-radio
+            input(type="radio" name="gender" disabled="")
+            i.form-icon
+            |  Female
+        .form-group
+          select.form-select(disabled="")
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+        .form-group
+          label.form-switch
+            input(type="checkbox" disabled="")
+            i.form-icon
+            |  Send me emails with news and tips
+        .form-group
+          label.form-label(for="input-example-20") Message
+          textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
+        .form-group
+          label.form-checkbox
+            input(type="checkbox" disabled="")
+            i.form-icon
+            |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
    
+          
    
+            
+            
+          
    
+          
    
+            
+            
+            
+          
    
+          
    
+            
+          
    
+          
    
+            
+          
    
+          
    
+            
+            
+          
    
+          
    
+            
+          
    
+        
    
\ No newline at end of file
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index a66aa34..64e4ffd 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -27,21 +27,12 @@ p Tables include default styles for tables and data sets.
           td 22 September 1995
 
 p
-  | Add the 
-  code table
-  |  class to any 
-  = ''
-  |  element. The class will add padding, border and emphasized table header. Use the 
-  code table-striped
-  |  class to 
-  = '
    '
-  |  to add zebra striped style. For hoverable table rows, you can add the 
-  code table-hover
-  |  class to enable hover style.
+  | Add the #[code table] class to any #{'
    '} element. 
+  | The class will add padding, border and emphasized table header. 
+  | Use the #[code table-striped] class to #{'
    '} 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  element highlighted.
+  | Use the #[code active] class to make #{''} element highlighted.
 
 pre.code(data-lang='HTML')
   code
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 47b980a..28ffc17 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -40,9 +40,8 @@ pre.code(data-lang='HTML')
 +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.
+  | 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.
 
@@ -127,7 +126,7 @@ p.h5
   small(lang='zh-Hans') 你好
   | , 
   small(lang='ja') こんにちは
-  | , 
+  | ,
   small(lang='ko') 안녕하세요
 
 p.h6 Chinese (Simplified)
@@ -142,9 +141,7 @@ 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.
+  | 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
@@ -154,11 +151,7 @@ pre.code(data-lang='HTML')
       
    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……
    
 
 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.
+  | 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 祇園
@@ -178,9 +171,8 @@ pre.code(data-lang='HTML')
 +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.
+  | 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
-- 
cgit v1.3.1-23-gd82d