From dd2930530f265f6fac4f81c621dd8318b0dbd756 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 19 Dec 2016 13:58:13 +0200 Subject: [PATCH] Quick reference code commit --- docs/quick_reference.html | 309 +++++++++++++++++++++++++++++++++++--- docs/v2/DEVLOG.md | 5 + 2 files changed, 289 insertions(+), 25 deletions(-) diff --git a/docs/quick_reference.html b/docs/quick_reference.html index 54e0e57..0edd22a 100644 --- a/docs/quick_reference.html +++ b/docs/quick_reference.html @@ -457,7 +457,19 @@

Forms & input  View on Codepen

- 

+                
<form>
+  <fieldset>
+    <legend>Simple form</legend>
+    <div class="input-group">
+      <label for="username">username</label> 
+      <input type="email" value="" id="username" placeholder="username">
+    </div>
+    <div class="input-group">
+      <label for="pwd">password</label> 
+      <input type="password" value="" id="pwd" placeholder="password">
+    </div>
+  </fieldset>
+</form>

               

               

                 
Notes

@@ -469,7 +481,15 @@
             

               

                 
Checkboxes & radio buttons  View on Codepen

-                

+                
<div class="input-group">
+  <input type="checkbox" id="check1" tabindex="0"> 
+  <label for="check1">Checkbox</label>
+</div>
+
+<div class="input-group">
+  <input type="radio" id="rad1" tabindex="0" name="radio-group-1"> 
+  <label for="rad1">Radio</label>
+</div>

               

               

                 
Notes

@@ -481,7 +501,22 @@
             

               

                 
Buttons & button groups  View on Codepen

-                

+                
<button>Default button</button>
+<input type="button" class="primary" value="Primary button">
+<input type="reset" class="secondary" value="Secondary button">
+<input type="submit" class="tertiary" value="Tertiary button">
+<button class="inverse">Inverse button</button>
+<button class="small">Small button</button>
+<button class="large">Large button</button>           
+<button disabled>Disabled button</button>
+<a href="#" class="button">Link button</a>
+<label class="button">Label button</label>
+
+<div class="button-group">
+  <button>Button</button>
+  <button>Button</button>
+  <button>Button</button>
+</div>

               

               

                 
Notes

@@ -493,7 +528,8 @@
             

               

                 
File upload buttons  View on Codepen

-                

+                
<input type="file" id="file-input">
+<label for="file-input" class="button">Upload file...</label>

               

               

                 
Notes

@@ -514,7 +550,33 @@
             

               

                 
Basic syntax & responsiveness  View on Codepen

-                

+                
<table>
+  <caption>People</caption>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Surname</th>
+      <th>Alias</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-label="Name">Chad</td>
+      <td data-label="Surname">Wilberts</td>
+      <td data-label="Alias">MrOne</td>
+    </tr>
+    <tr>
+      <td data-label="Name">Adam</td>
+      <td data-label="Surname">Smith</td>
+      <td data-label="Alias">TheSmith</td>
+    </tr>
+    <tr>
+      <td data-label="Name">Sophia</td>
+      <td data-label="Surname">Canderson</td>
+      <td data-label="Alias">Candee</td>
+    </tr>
+  </tbody>
+</table>

               

               

                 
Notes

@@ -526,7 +588,33 @@
             

               

                 
Horizontal tables  View on Codepen

-                

+                
<table class="horizontal">
+  <caption>People</caption>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Surname</th>
+      <th>Alias</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-label="Name">Chad</td>
+      <td data-label="Surname">Wilberts</td>
+      <td data-label="Alias">MrOne</td>
+    </tr>
+    <tr>
+      <td data-label="Name">Adam</td>
+      <td data-label="Surname">Smith</td>
+      <td data-label="Alias">TheSmith</td>
+    </tr>
+    <tr>
+      <td data-label="Name">Sophia</td>
+      <td data-label="Surname">Canderson</td>
+      <td data-label="Alias">Candee</td>
+    </tr>
+  </tbody>
+</table>

               

               

                 
Notes

@@ -538,7 +626,48 @@
             

               

                 
Table variants & matrices  View on Codepen

-                

+                
<table class="preset">
+  <caption>Star Wars Character Alignment Table</caption>
+  <tbody>
+    <tr>
+      <th></th>
+      <th>Lawful</td>
+      <th>Neutral</td>
+      <th>Chaotic</td>
+    </tr>
+    <tr>
+      <th>Good</th>
+      <td>Yoda</td>
+      <td>Luke Skywalker</td>
+      <td>Chewbacca</td>
+    </tr>
+    <tr>
+      <th>Neutral</th>
+      <td>C-3PO</td>
+      <td>Boba Fett</td>
+      <td>Han Solo</td>
+    </tr>
+    <tr>
+      <th>Bad</th>
+      <td>Darth Vader</td>
+      <td>Emperor Palpatine</td>
+      <td>Jabba the Hutt</td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="striped">
+  <caption>People</caption>
+  <thead>
+    <!-- ... -->
+  </thead>
+  <tbody>
+    <!-- ... -->
+  </tbody>
+  <tfoot>
+    <!-- ... -->
+  </tfoot>
+</table>

               

               

                 
Notes

@@ -559,7 +688,20 @@
             

               

                 
Basic syntax  View on Codepen

-                

+                
<div class="row">
+  <div class="card">
+    <div class="section">
+      <h3>Card Title</h3>
+      <p>Card content...</p>
+    </div>
+  </div>
+  <div class="card">
+    <div class="section">
+      <h3>Card Title</h3>
+      <p>Card content...</p>
+    </div>
+  </div>
+</div>

               

               

                 
Notes

@@ -571,7 +713,16 @@
             

               

                 
Sections & media  View on Codepen

-                

+                
<div class="card">
+  <img src="..." class="section media">
+  <div class="section double-padded"><p>Content</p></div>
+  <div class="section dark"><p>Content</p></div>
+  <div class="section darker"><p>Content</p></div>
+</div>
+
+<div class="card inverse">
+  <div class="section"><p>Content</p></div>
+</div>

               

               

                 
Notes

@@ -583,7 +734,25 @@
             

               

                 
Card sizing & fluidity  View on Codepen

-                

+                
<div class="card small">
+  <div class="section">
+    <p>Content</p>
+  </div>
+</div>
+
+<div class="card large">
+  <div class="section">
+    <p>Content</p>
+  </div>
+</div>
+
+<div class="col-sm-12">
+  <div class="card fluid">
+    <div class="section">
+      <p>Content</p>
+    </div>
+  </div>
+</div>

               

               

                 
Notes

@@ -604,7 +773,26 @@
             

               

                 
Basic syntax  View on Codepen

-                

+                
<div class="tabs">
+  <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
+  <label for="tab1" aria-hidden="true">Tab 1</label>
+  <div>
+    <h3>Tab 1</h3>
+    <p>This is the first tab's content.</p>
+  </div>
+  <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
+  <label for="tab2" aria-hidden="true">Tab 2</label>
+  <div>
+    <h3>Tab 2</h3>
+    <p>This is the second tab's content.</p>
+  </div>
+  <input type="radio" name="tab-group" id="tab3" aria-hidden="true">
+  <label for="tab3" aria-hidden="true">Tab 3</label>
+  <div>
+    <h3>Tab 3</h3>
+    <p>This is the third tab's content.</p>
+  </div>
+</div>

               

               

                 
Notes

@@ -616,7 +804,33 @@
             

               

                 
Stacked tabs  View on Codepen

-                

+                
<div class="tabs stacked">
+  <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
+  <label for="a1" aria-hidden="true">Accordion section 1</label>
+  <div>
+    <h3>Section 1</h3>
+    <p>This is the first accordion section's content.</p>
+  </div>              
+  <input type="radio" name="accordion" id="a2"aria-hidden="true">
+  <label for="a2" aria-hidden="true">Accordion section 2</label>
+  <div>
+    <h3>Section 2</h3>
+    <p>This is the second accordion section's content.</p>
+  </div>
+</div>
+
+<div class="tabs stacked">
+  <input type="checkbox" id="c1" aria-hidden="true">
+  <label for="c1" aria-hidden="true">Collapse section 1</label>
+  <div>
+    <p>This is the first collapse section's content.</p>
+  </div>
+  <input type="checkbox" id="c2" aria-hidden="true">
+  <label for="c2" aria-hidden="true">Collapse section 2</label>
+  <div>
+    <p>This is the second collapse section's content.</p>
+  </div>
+</div>

               

               

                 
Notes

@@ -637,7 +851,11 @@
             

               

                 
Text highlighting  View on Codepen

-                

+                
<mark>primary</mark>
+<mark class="secondary">secondary</mark>
+<mark class="tertiary">tertiary</mark>
+<mark class="inline-block">long highlight text...</mark>
+<mark class="tag">tag</mark>

               

               

                 
Notes

@@ -649,7 +867,18 @@
             

               

                 
Alerts  View on Codepen

-                

+                
<div class="alert">
+  <h3>This is an alert</h3>
+  <p>Make sure you read this!</p>
+</div>
+<div class="alert urgent">
+  <h3>This is an urgent alert</h3>
+  <p>Make absolutely sure you read this!</p>
+</div>
+<div class="alert critical">
+  <h3>This is a critical alert</h3>
+  <p>Make certain you read and actually understand this!</p>
+</div>

               

               

                 
Notes

@@ -661,7 +890,15 @@
             

               

                 
Animated alerts  View on Codepen

-                

+                
<div class="alert animated">
+  <h3>Animated alert</h3>
+</div>
+<div class="alert urgent animated">
+  <h3>Animated urgent alert</h3>
+</div>
+<div class="alert critical animated">
+  <h3>Animated critical alert</h3>
+</div>

               

               

                 
Notes

@@ -682,7 +919,9 @@
             

               

                 
Basic progress bar  View on Codepen

-                

+                
<progress value="0" max="1000"></progress>
+<progress value="450" max="1000"></progress>
+<progress value="1000" max="1000"></progress>

               

               

                 
Notes

@@ -694,7 +933,10 @@
             

               

                 
Progress bar variants  View on Codepen

-                

+                
<progress class="secondary" value="600" max="1000"></progress>
+<progress class="tertiary" value="300" max="1000"></progress>
+<progress class="nano" value="750" max="1000"></progress>
+<progress class="inline" value="150" max="1000"></progress>

               

               

                 
Notes

@@ -706,7 +948,7 @@
             

               

                 
Donut spinner  View on Codepen

-                

+                
<div class="spinner-donut"></div>

               

               

                 
Notes

@@ -718,7 +960,9 @@
             

               

                 
Donut spinner variants  View on Codepen

-                

+                
<div class="spinner-donut secondary"></div>
+<div class="spinner-donut tertiary"></div>
+<div class="spinner-donut large"></div>

               

               

                 
Notes

@@ -739,7 +983,8 @@
             

               

                 
Visibility helpers  View on Codepen

-                

+                
<span class="hidden">Hidden text</span>
+<span class="visually-hidden">Screen-reader-only text</span>

               

               

                 
Notes

@@ -751,7 +996,10 @@
             

               

                 
Floats, centering & clearfix  View on Codepen

-                

+                
<span class="float-left">Float left</span>
+<span class="float-right">Float right</span>
+<span class="clearfix">Clearfix</span>
+<span class="center-block">Center block</span>

               

               

                 
Notes

@@ -763,7 +1011,13 @@
             

               

                 
Generic border & shadows  View on Codepen

-                

+                
<span class="bordered">Bordered</span>
+<span class="rounded">Rounded</span>
+<span class="circular">Circular</span>
+<span class="shadow-none">No shadow</span>
+<span class="shadow-small">Small shadow</span>
+<span class="shadow-medium">Medium shadow</span>
+<span class="shadow-large">Large shadow</span>

               

               

                 
Notes

@@ -775,7 +1029,8 @@
             

               

                 
Responsive sizing & spacing classes  View on Codepen

-                

+                
<div class="responsive-padding">Responsive padding</div>
+<div class="responsive-margin">Responsive margin</div>

               

               

                 
Notes

@@ -787,7 +1042,11 @@
             

               

                 
Breadcrumbs  View on Codepen

-                

+                
<ul class="breadcrumbs">
+  <li><a href="#">Root</a></li>
+  <li><a href="#">Folder</a></li>
+  <li>File</li>
+</ul>

               

               

                 
Notes

@@ -799,7 +1058,7 @@
             

               

                 
Close icon  View on Codepen

-                

+                
<span class="close"></span>

               

               

                 
Notes

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index e742ef5..97caae3 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -668,3 +668,8 @@
 - Structured base of the whole `quick reference` page.
 - Written documentation for `navigation` in quick reference.
 - Linked to `quick_reference.html` from all page's header.
+
+
+## 20161219
+
+- Added code to `quick reference` from all modules. Codepens not done yet.