mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-16 02:12:07 +02:00
Code Issues Releases Wiki Activity

Button and button group documentation

Browse Source
This commit is contained in:
Angelos Chalaris 2016-12-07 10:29:59 +02:00
parent 365bde4392
commit cf37f44d13
3 changed files with 75 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View File

@ -616,3 +616,4 @@
- Documented `radio` and `checkbox` in the `input_control` doc page.
- Tweaked all references of `$back-color` to now use `#fafafa` instead of the previous `#f5f5f5`. This will make contrast better and allow for better visibility of certain pieces of text.
- Full documentation for `button`s and `button-group`s.

69
docs/v2/input_control.html
View File

@ -394,29 +394,76 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<!-- sample -->
<button>Default button</button>
<button class="primary">Primary button</button>
<button class="secondary">Secondary button</button>
<button class="tertiary">Tertiary button</button>
<button class="inverse">Inverse button</button>
<button class="small">Small button</button>
<button class="large">Large button</button>
<button disabled>Disabled button</button>
<h4>Button group</h4>
<div class="button-group">
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
</div>
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p></p>
<p>All button types have been stylized by default, while maintaining accessiblity. Simply add any <code>&lt;button&gt;</code> or an <code>&lt;input&gt;</code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">&quot;button&quot;</span></code>, <code><span class="fore-primary">&quot;submit&quot;</span></code> or <code><span class="fore-primary">&quot;reset&quot;</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class for links, labels and other elements of your choice to make them look like buttons.</p>
<p>Color variants are available in the form of the <code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> classes. Size variants are available as well in the form of <code>.small</code> and <code>.large</code> classes.</p>
<p>Finally, you can create responsive groups of buttons by wrapping them inside a <code>&lt;div&gt;</code> with the <code>.button-group</code> class.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;button&gt;Default button&lt;/button&gt;
&lt;input type=&quot;button&quot; class=&quot;primary&quot; value=&quot;Primary button&quot;&gt;
&lt;input type=&quot;reset&quot; class=&quot;secondary&quot; value=&quot;Secondary button&quot;&gt;
&lt;input type=&quot;submit&quot; class=&quot;tertiary&quot; value=&quot;Tertiary button&quot;&gt;
&lt;button class=&quot;inverse&quot;&gt;Inverse button&lt;/button&gt;
&lt;button class=&quot;small&quot;&gt;Small button&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt;
&lt;button disabled&gt;Disabled button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Link button&lt;/a&gt;
&lt;label class=&quot;button&quot;&gt;Label button&lt;/label&gt;
&lt;div class=&quot;button-group&quot;&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li></li>
<li>If you want more color or size variants for your buttons, check out the <a href="customization.html">customization</a> page.</li>
</ul>
<hr>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<pre><!-- do code --></pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p>
<div class="col-sm-12 col-md-6">
<pre>&lt;button class=&quot;inverse small&quot;&gt;Small inverse button&lt;/button&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can mix and match button color and size variants to achieve the desired effect.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
<pre><!-- don't code --></pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;</p>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;button class=&quot;secondary inverse&quot;&gt;Problematic button&lt;/button&gt;
<span class="fore-secondary">&lt;!-- or --&gt;</span>
&lt;button class=&quot;small large&quot;&gt;Problematic button&lt;/button&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid mixing two or more button color or size variants, as these combinations might result in unexpected behavior.</p>
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;button-group&quot;&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;input type=&quot;reset&quot; class=&quot;secondary&quot; value=&quot;Secondary button&quot;&gt;
&lt;label class=&quot;button inverse&quot;&gt;Label button&lt;/label&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can use button color variants inside the same <code>.button-group</code>. You can also use any component styled like a button inside a <code>.button-group</code>.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;div class=&quot;button-group&quot;&gt;
&lt;button class=&quot;large&quot;&gt;Button&lt;/button&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;button class=&quot;small&quot;&gt;Button&lt;/button&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using button size variants inside a <code>.button-group</code>, as this might result in unexpected behavior.</p>
</div>
</div>
</div>

16
docs/v2/playground.html
View File

@ -212,6 +212,22 @@
<input type="reset" value="Tertiary reset button" class="tertiary">
<input type="submit" value="Large submit button" class="large">
<label disabled class="button small primary">Small primary disabled label button</label>
<br><br>
<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>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>