beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Rebuild docs - Resolve #156

Browse source
This commit is contained in:
Angelos Chalaris 2019-07-08 08:06:38 +03:00
parent e437b20d80
commit a33fcb5e59
5 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/docs.html
View file

@ -423,18 +423,18 @@
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;form&gt;</span></span> <div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;form&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;fieldset&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;fieldset&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;legend&gt;</span>Simple form<span class="highlight-a">&lt;/legend&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;legend&gt;</span>Simple form<span class="highlight-a">&lt;/legend&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;row&quot;</span><span class="highlight-a">&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;row&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;username&quot;</span><span class="highlight-a">&gt;</span>Username<span class="highlight-a">&lt;/label&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;username&quot;</span><span class="highlight-a">&gt;</span>Username<span class="highlight-a">&lt;/label&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;text&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;Username&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Username&quot;</span><span class="highlight-a">/&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;text&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;Username&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Username&quot;</span><span class="highlight-a">/&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;/div&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;password&quot;</span><span class="highlight-a">&gt;</span>Password<span class="highlight-a">&lt;/label&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;password&quot;</span><span class="highlight-a">&gt;</span>Password<span class="highlight-a">&lt;/label&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Password&quot;</span><span class="highlight-a">/&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Password&quot;</span><span class="highlight-a">/&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;/div&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;/div&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;/fieldset&gt;</span></span> <span class="code-line"> <span class="highlight-a">&lt;/fieldset&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/form&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark>&nbsp;Form inputs are inline by defaut, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.</p></div></div></div> <span class="code-line"><span class="highlight-a">&lt;/form&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark>&nbsp;Form inputs are inline by default, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended, as it improves semantic markup and accessibility.</li><li>Some input elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.</li></ul></div> <div class="section double-padded"><h3>Notes</h3><ul><li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended, as it improves semantic markup and accessibility.</li><li>Some input elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.</li><li>Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.</li><li>Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.</li><li>Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.</li><li>Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.</li><li>Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.</li><li>Border color for focused and invalid input elements can be changed by changing the value of the <code>--input-focus-color</code> and <code>--input-invalid-color</code> variables respectively.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div> <div class="section double-padded"><h3>Customization</h3><ul><li>Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.</li><li>Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.</li><li>Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.</li><li>Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.</li><li>Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.</li><li>Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.</li><li>Border color for focused and invalid input elements can be changed by changing the value of the <code>--input-focus-color</code> and <code>--input-invalid-color</code> variables respectively.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
</div><br/><div id="buttons" class="card fluid"> </div><br/><div id="buttons" class="card fluid">

2
docs/flavorFiles/mini-dark.css
View file

@ -3,7 +3,7 @@
Flavor name: Dark (mini-dark) Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0 mini.css version: v3.0.1
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.

2
docs/flavorFiles/mini-default.css
View file

@ -3,7 +3,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.3 mini.css version: v3.0.1
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.

2
docs/flavorFiles/mini-nord.css
View file

@ -3,7 +3,7 @@
Flavor name: Nord (mini-nord) Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca) Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca Maintainers: tphecca
mini.css version: v3.0.0 mini.css version: v3.0.1
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.

2
docs/index.html
View file

@ -60,4 +60,4 @@
</div> </div>
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer> <footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
</body> </body>
</html> </html>