Quick reference code commit
This commit is contained in:
Angelos Chalaris
parent
3e398def15
commit
dd2930530f
2 changed files with 289 additions and 25 deletions
|
|
@ -457,7 +457,19 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Forms & input <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -469,7 +481,15 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Checkboxes & radio buttons <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -481,7 +501,22 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Buttons & button groups <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -493,7 +528,8 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>File upload buttons <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><input type="file" id="file-input">
|
||||
<label for="file-input" class="button">Upload file...</label></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -514,7 +550,33 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Basic syntax & responsiveness <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -526,7 +588,33 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Horizontal tables <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -538,7 +626,48 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Table variants & matrices <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</thead>
|
||||
<tbody>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</table></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -559,7 +688,20 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -571,7 +713,16 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sections & media <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -583,7 +734,25 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Card sizing & fluidity <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -604,7 +773,26 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -616,7 +804,33 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Stacked tabs <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -637,7 +851,11 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Text highlighting <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -649,7 +867,18 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Alerts <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -661,7 +890,15 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Animated alerts <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -682,7 +919,9 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Basic progress bar <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><progress value="0" max="1000"></progress>
|
||||
<progress value="450" max="1000"></progress>
|
||||
<progress value="1000" max="1000"></progress></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -694,7 +933,10 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -706,7 +948,7 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Donut spinner <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><div class="spinner-donut"></div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -718,7 +960,9 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Donut spinner variants <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><div class="spinner-donut secondary"></div>
|
||||
<div class="spinner-donut tertiary"></div>
|
||||
<div class="spinner-donut large"></div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -739,7 +983,8 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Visibility helpers <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><span class="hidden">Hidden text</span>
|
||||
<span class="visually-hidden">Screen-reader-only text</span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -751,7 +996,10 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Floats, centering & clearfix <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -763,7 +1011,13 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Generic border & shadows <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><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></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -775,7 +1029,8 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Responsive sizing & spacing classes <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><div class="responsive-padding">Responsive padding</div>
|
||||
<div class="responsive-margin">Responsive margin</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -787,7 +1042,11 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Breadcrumbs <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><ul class="breadcrumbs">
|
||||
<li><a href="#">Root</a></li>
|
||||
<li><a href="#">Folder</a></li>
|
||||
<li>File</li>
|
||||
</ul></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
@ -799,7 +1058,7 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Close icon <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre></pre>
|
||||
<pre><span class="close"></span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue