mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-08 23:06:31 +02:00
Documentation update
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
This commit is contained in:
Angelos Chalaris
@@ -80,8 +80,7 @@
|
||||
<div class="row" style="padding-top: 40px;" id="input-control-title">
|
||||
<div class="col-sm-12">
|
||||
<h1>Input Control</h1>
|
||||
<p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
|
||||
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@@ -89,11 +88,11 @@
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p>The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The <strong>input_control</strong> module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.</p><br>
|
||||
<p style="text-align:justify">The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The <strong>input_control</strong> module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p>To customize the <strong>input_control</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
<p style="text-align:justify">To customize the <strong>input_control</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,7 +103,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Forms & input</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.</p><br/>
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
@@ -252,7 +251,7 @@
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol>
|
||||
<ol style="text-align:justify">
|
||||
<li id="forms-note-one">The values of <code>$input-group-fluid-name</code> and <code>$input-group-mobile-breakpoint</code> will only be used if <code>$include-fluid-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
@@ -265,7 +264,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code><label></code> elements and input groups to be stylized and properly displayed.</p><br/>
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code><label></code> elements and input groups to be stylized and properly displayed.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
@@ -313,7 +312,7 @@
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol>
|
||||
<ol style="text-align:justify">
|
||||
<li id="checkbox-note-one">It is highly recommended to stick to one unit type for the definitions of checkbox/radio elements (our suggestion is <code>px</code>).</li>
|
||||
</ol>
|
||||
</div>
|
||||
@@ -326,7 +325,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Button & button groups</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's button elements are highly customizable, along with the button groups that can be used in combination with them.</p><br/>
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module's button elements are highly customizable, along with the button groups that can be used in combination with them.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
@@ -409,7 +408,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Button mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module contains a couple of mixins for adding custom styles to button elements (color and style variants).</p><br/>
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module contains a couple of mixins for adding custom styles to button elements (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
@@ -495,10 +494,10 @@
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer style="text-align:justify"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user