mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-18 05:18:25 +01:00
Updated quick reference for navigation, input_control and table
This commit is contained in:
Angelos Chalaris
parent
51533acf85
commit
e6b291144a
@ -243,7 +243,7 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Predefined layouts <a href="http://codepen.io/chalarangelo/pen/ygGqQg" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<h3>Predefined layouts <a href="https://codepen.io/chalarangelo/pen/ygGqQg" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="row cols-sm-6">
|
||||
<div>
|
||||
<p>col-sm-6</p>
|
||||
@ -329,7 +329,7 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Media object pattern<a href="http://codepen.io/chalarangelo/pen/oBdvPX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<h3>Media object pattern<a href="https://codepen.io/chalarangelo/pen/oBdvPX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="row">
|
||||
<div class="col-sm-1">
|
||||
<img src="...">
|
||||
@ -374,7 +374,7 @@
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
|
||||
<li>The rest of the elements inside the <code><header></code> must be <code><button></code>, <code><label class="button"></code> or <code><a class="button"></code> elements</li>
|
||||
<li>The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> or <code>.button</code>)</li>
|
||||
<li>Use <code><span></code> elements as separators</li>
|
||||
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
|
||||
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
|
||||
@ -420,6 +420,25 @@
|
||||
<li>Simple syntax and structure, add content as normal</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header class="sticky">
|
||||
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
||||
</header>
|
||||
|
||||
<footer class="sticky">
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code>.sticky</code> class to create</li>
|
||||
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -436,11 +455,11 @@
|
||||
<pre><form>
|
||||
<fieldset>
|
||||
<legend>Simple form</legend>
|
||||
<div class="input-group">
|
||||
<div class="input-group fluid">
|
||||
<label for="username">username</label>
|
||||
<input type="email" value="" id="username" placeholder="username">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group fluid">
|
||||
<label for="pwd">password</label>
|
||||
<input type="password" value="" id="pwd" placeholder="password">
|
||||
</div>
|
||||
@ -457,6 +476,7 @@
|
||||
<li>Checkboxes and radio buttons are stylized differently, as shown below</li>
|
||||
<li>You can use the grid module's column classes to align form elements or make them responsive</li>
|
||||
<li>Avoid using <code>.input-group</code> in aligned forms</li>
|
||||
<li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -497,7 +517,9 @@
|
||||
<button class="large">Large button</button>
|
||||
<button disabled>Disabled button</button>
|
||||
<a href="#" class="button">Link button</a>
|
||||
<a href="#" role="button">Link button</a>
|
||||
<label class="button">Label button</label>
|
||||
<label role="button">Label button</label>
|
||||
|
||||
<div class="button-group">
|
||||
<button>Button</button>
|
||||
@ -509,7 +531,7 @@
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>All button types have been stylized</li>
|
||||
<li>Button styles are available for other elements, using the <code>.button</code> class</li>
|
||||
<li>Button styles are available for other elements, using the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> attribute</li>
|
||||
<li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
|
||||
<li><code>.small</code> and <code>.large</code> size variants</li>
|
||||
<li>Create responsive button groups by wrapping multiple button elements inside a <code>.button-group</code> wrapper</li>
|
||||
@ -586,6 +608,7 @@
|
||||
</li>
|
||||
<li>Tables are responsive and collapse into cards on mobile devices</li>
|
||||
<li>Always specify a <code>data-label</code> for each <code><td></code> element corresponding to the column's header to properly display table on mobile devices</li>
|
||||
<li>Avoid having multiline <code><thead></code> elements, however if you need to, you can use <a href="https://codepen.io/chalarangelo/pen/VPqWQE">this fix</a></li>
|
||||
<li>For horizontal tables or matrices, check the examples below</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -871,3 +871,4 @@
|
||||
## 20170213
|
||||
|
||||
- Updated the `quick_reference.html` page with the new guidelines for `grid` module.
|
||||
- Updated the `quick_reference.html` page with new guidelines for `navigation`, `input_control` and `table`.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user