mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Documented forms
And common inputs.
This commit is contained in:
Angelos Chalaris
parent
83f5f12c95
commit
148a797826
@ -1,6 +1,3 @@
|
||||
/*
|
||||
<div id="root"><div class="App"><header class="row"><span href="#" class="logo col-md-2 hidden-sm">mini.css</span><a class="button col-sm-2" href="https://github.com/Chalarangelo/mini.css">Github</a><label for="doc-drawer-checkbox" class="button drawer-toggle col-sm-2"></label></header><div class="row" id="doc-wrapper"><input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"><nav><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search"></div></nav><main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><button>Home</button><a href="#" class="button">News</a></main></div></div></div>
|
||||
*/
|
||||
var fs = require('fs');
|
||||
|
||||
var docFragments = require('./doc-fragments/docFragments'); // Gets all document fragments as a list.
|
||||
|
||||
@ -2,7 +2,7 @@ module.exports = {
|
||||
id: 'card-sections',
|
||||
title: 'Card sections',
|
||||
keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `media`, `double-padded`, `dark`],
|
||||
description: '<p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the apropriate class applied to it.</p>',
|
||||
description: '<p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the appropriate class applied to it.</p>',
|
||||
example: `<div class="container" style="padding: 0.25rem"><div class="row"><div class="col-sm-12">
|
||||
<div class="card fluid" style="margin: 0.5rem 0.25rem"><h3 class="doc section">Title section</h3><p class="doc section">This is a section with some textual content.</p></div>
|
||||
</div></div></div>`,
|
||||
@ -28,8 +28,8 @@ module.exports = {
|
||||
title : 'Media sections',
|
||||
description: '<p>You can create sections for media (<code>.media</code>), such as images or videos (using an <code><img></code> or a <code><iframe></code> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.</p>',
|
||||
example: `<div class="container" style="padding: 0.25rem;"><div class="row">
|
||||
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="placeholder"></div>
|
||||
<div class="card"><div class="section"><h3>Card with video</h3></div><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="placeholder"></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Card with video</h3></div><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe></div>
|
||||
</div></div>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><img</span> <span class="highlight-b">src</span>=<span class="highlight-c">"image.png"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section media"</span><span class="highlight-a">/></span></span>
|
||||
@ -39,7 +39,7 @@ module.exports = {
|
||||
title : 'Color variants',
|
||||
description: '<p>You can create sections with a darker (<code>.dark</code>) background, by applying the appropriate modifier.</p>',
|
||||
example: `<div class="container" style="padding: 0.25rem;"><div class="row">
|
||||
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Normal section</h3></div><div class="section dark"><h3 class="doc">Dark section</h3></div></div>
|
||||
</div></div>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section dark"</span><span class="highlight-a">></div></span></span>
|
||||
@ -49,7 +49,7 @@ module.exports = {
|
||||
title : 'Additional spacing',
|
||||
description: '<p>You can create sections with additional spacing (<code>.double-padded</code>), by applying the appropriate modifier.</p>',
|
||||
example: `<div class="container" style="padding: 0.25rem;"><div class="row">
|
||||
<div class="card"><div class="section"><h3>Normal spacing</h3></div><div class="section double-padded"><h3>Additional spacing</h3></div></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Normal spacing</h3></div><div class="section double-padded"><h3 class="doc">Additional spacing</h3></div></div>
|
||||
</div></div>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section double-padded"</span><span class="highlight-a">></div></span></span>
|
||||
|
||||
@ -2,7 +2,7 @@ module.exports = {
|
||||
id: 'cards',
|
||||
title: 'Cards',
|
||||
keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `small`, `large`, `fluid`, `warning`, `error`],
|
||||
description: `<p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p>`,
|
||||
description: `<p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside a grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p>`,
|
||||
example: `<div class="container" style="padding: 0.25rem"><div class="row">
|
||||
<div class="card"><div class="section"><h3 class="doc">Card 1</h3><p class="doc">This is a basic card with some sample content.</p></div></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Card 2</h3><p class="doc">This is another card with some sample content.</p></div></div>
|
||||
|
||||
@ -2,7 +2,7 @@ module.exports = {
|
||||
id: 'code-and-quotations',
|
||||
title: 'Code & quotations',
|
||||
keywords: [`code`, `pre`, `kbd`, `blockquote`, `quotation`],
|
||||
description: '<p>Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are styled in a similar manner, while aiming not to break the flow of regular text.</p>',
|
||||
description: '<p>Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are minimally styled, aiming not to break the flow of regular text.</p>',
|
||||
example: `<p class="doc">This is some text with some inline <code class="doc">source code</code> and some keyboard <kbd class="doc">input</kbd>.</p>
|
||||
<pre class="doc">function sum(num1, num2){
|
||||
return num1 + num2;
|
||||
|
||||
@ -3,7 +3,7 @@ module.exports = {
|
||||
title: 'Common textual elements',
|
||||
tag: 'p',
|
||||
keywords: ['p', 'paragraph', 'text', 'textual elements', 'strong', 'bold', 'b', 'em', 'i', 'emphasis', 'italics', 'small', 'a', 'link', 'hr', 'horizontal rule', 'sub', 'subscript', 'sup', 'exponent', 'superscript', 'normalize', 'reset'],
|
||||
description: `<p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" targe="_blank">Normalize.css</a> v7.0.0 to reliably deal with inconsistencies between browsers, ensuring that your web apps will look beatiful no matter on what browser or device you're at. On top of these rules, we have applied some tasteful rules, such as using <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank">native font stack</a> to figure out the best font for each device, slightly altering the background and foreground colors, as well as setting the size of the text to <code>16px</code> and its line height to <code>1.5</code>.</p>
|
||||
description: `<p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" targe="_blank">Normalize.css</a> v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank">native font stack</a> to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to <code>16px</code> and its line height to <code>1.5</code>.</p>
|
||||
<p>All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.</p>`,
|
||||
example: `<p class="doc">This is a paragraph with some sample text. Did you know that the latest version of <strong class="doc">mini.css</strong> is codenamed <em class="doc">Gluon</em>? Well, now you do!</p><hr class="doc"/><p><small class="doc">Remember that <strong class="doc">mini.css</strong> is totally free, no fine print involved!</small></p>`,
|
||||
samples: [
|
||||
|
||||
@ -7,9 +7,11 @@ var codeAndQuotations = require('./codeAndQuotations');
|
||||
var grid = require('./grid');
|
||||
var cards = require('./cards');
|
||||
var cardSections = require('./cardSections');
|
||||
var formsAndInput = require('./formsAndInput');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
commonTextualElements, headings, images, lists, codeAndQuotations,
|
||||
grid, cards, cardSections
|
||||
grid, cards, cardSections,
|
||||
formsAndInput
|
||||
]
|
||||
|
||||
76
docs/doc-fragments/formsAndInput.js
Normal file
76
docs/doc-fragments/formsAndInput.js
Normal file
@ -0,0 +1,76 @@
|
||||
module.exports = {
|
||||
id: 'forms-and-input',
|
||||
title: 'Forms & input',
|
||||
keywords: [`form`, `fieldset`, `legend`, `input`, `type`, `text`, `checkbox`, `radio`, `email`, `password`, `tel`, `input-group`, `input group`, `row`, `col`, `column`, `vertical`, `fluid`, `file`, `upload`, `select`, `textarea`, `option`, `label`],
|
||||
description: `<p>Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.</p>`,
|
||||
example: `<form><fieldset><legend class="doc">Sample form</legend>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-text" class="doc">Text</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="text" placeholder="Text" id="sf1-text" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-pwd" class="doc">Password</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="password" placeholder="Password" id="sf1-pwd" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-num" class="doc">Number</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="number" value="42" id="sf1-num" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-select" class="doc">Select</label></div>
|
||||
<div class="col-sm-12 col-md"><select id="sf1-select" style="width:85%;" class="doc"><option class="doc">Apples</option><option class="doc">Oranges</option></select></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-check" class="doc">Checkbox</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="checkbox" autocomplete="off" id="sf1-check" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-radio" class="doc">Radio</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="radio" autocomplete="off" id="sf1-radio" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-textarea" class="doc">Textarea</label></div>
|
||||
<div class="col-sm-12 col-md"><textarea class="doc" style="width:85%;" placeholder="Textarea"></textarea></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-invalid" class="doc">Invalid</label></div>
|
||||
<div class="col-sm-12 col-md"><input value="Invalid" id="sf1-invalid" style="width:85%;" class="doc"></div>
|
||||
<script>document.getElementById("sf1-invalid").setCustomValidity("This field is invalid");</script></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-disabled" class="doc">Disabled</label></div>
|
||||
<div class="col-sm-12 col-md"><input disabled value="Disabled" id="sf1-disabled" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-readonly" class="doc">Readonly</label></div>
|
||||
<div class="col-sm-12 col-md"><input readonly value="Readonly" id="sf1-readonly" style="width:85%;" class="doc"></div></div>
|
||||
</fieldset></form>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></form></span></span></pre>`],
|
||||
notes: [
|
||||
`Using the <code><fieldset></code> and <code><legend></code> elements is highly recommended, as it improves semantic markup and accessibility.`,
|
||||
`Some input elements, such as date & 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.`
|
||||
],
|
||||
customization: [
|
||||
`Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.`,
|
||||
`Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.`,
|
||||
`Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.`,
|
||||
`Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.`,
|
||||
`Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.`,
|
||||
`Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.`,
|
||||
`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.`,
|
||||
`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.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [
|
||||
{
|
||||
description: 'Form inputs are inline by defaut, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.',
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></form></span></span></pre>`
|
||||
}
|
||||
],
|
||||
donts: []
|
||||
}
|
||||
@ -2,7 +2,7 @@ module.exports = {
|
||||
id: 'images-captions',
|
||||
title: 'Images & captions',
|
||||
keywords: [`img`, `image`, `responsive`, `responsiveness`, `caption`, `figure`, `figcaption`],
|
||||
description: `<p>Image elements are responsive by default, without the need for any special classes or anything similar. They automatically scale down as necessary to display properly on smaller devices, while retaining their original aspect ratio, while they will never scale above their original size.</p>
|
||||
description: `<p>Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.</p>
|
||||
<p>If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.</p>`,
|
||||
example: '<figure><img src="https://placehold.it/800x600" alt="placeholder"><figcaption class="doc">Image caption</figcaption></figure>',
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><img</span> <span class="highlight-b">src</span>=<span class="highlight-c">"image.png"</span> <span class="highlight-b">alt</span>=<span class="highlight-c">"Image description"</span><span class="highlight-a">/></span></span></pre>`,
|
||||
|
||||
@ -176,3 +176,4 @@
|
||||
|
||||
- Documented `card` and `card section` to complete the `layout` module's docs.
|
||||
- Altered the `dark` section colors, didn't really like them.
|
||||
- Cleaned up certain parts of the docs just a little bit.
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
</div><br/><div id="common-textual-elements" class="card fluid">
|
||||
<h2 class="section double-padded">Common textual elements</h2>
|
||||
<div class="section"><p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" targe="_blank">Normalize.css</a> v7.0.0 to reliably deal with inconsistencies between browsers, ensuring that your web apps will look beatiful no matter on what browser or device you're at. On top of these rules, we have applied some tasteful rules, such as using <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank">native font stack</a> to figure out the best font for each device, slightly altering the background and foreground colors, as well as setting the size of the text to <code>16px</code> and its line height to <code>1.5</code>.</p>
|
||||
<div class="section"><p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" targe="_blank">Normalize.css</a> v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank">native font stack</a> to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to <code>16px</code> and its line height to <code>1.5</code>.</p>
|
||||
<p>All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.</p></div>
|
||||
<div class="section"><h3>Example</h3><p class="doc">This is a paragraph with some sample text. Did you know that the latest version of <strong class="doc">mini.css</strong> is codenamed <em class="doc">Gluon</em>? Well, now you do!</p><hr class="doc"/><p><small class="doc">Remember that <strong class="doc">mini.css</strong> is totally free, no fine print involved!</small></p></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><p></span>This is a paragraph. with some <span class="highlight-a"><strong></span>bold text<span class="highlight-a"></strong></span> and some <span class="highlight-a"><em></span>italics text<span class="highlight-a"></em></span>.<span class="highlight-a"></p></span></span>
|
||||
@ -84,7 +84,7 @@
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the color of the headings' main text.</li><li>Secondary text color can be changed globally by changing the value of the <code>--secondary-fore-color</code> variable. This will affect the color of subheadings.</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>You can change the ratio of headings' size by chaning the value of the <code>--heading-ratio</code> variable. Bear in mind that the value of this variable must be unitless to work properly.</li></ul></div>
|
||||
</div><br/><div id="images-captions" class="card fluid">
|
||||
<h2 class="section double-padded">Images & captions</h2>
|
||||
<div class="section"><p>Image elements are responsive by default, without the need for any special classes or anything similar. They automatically scale down as necessary to display properly on smaller devices, while retaining their original aspect ratio, while they will never scale above their original size.</p>
|
||||
<div class="section"><p>Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.</p>
|
||||
<p>If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.</p></div>
|
||||
<div class="section"><h3>Example</h3><figure><img src="https://placehold.it/800x600" alt="placeholder"><figcaption class="doc">Image caption</figcaption></figure></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><img</span> <span class="highlight-b">src</span>=<span class="highlight-c">"image.png"</span> <span class="highlight-b">alt</span>=<span class="highlight-c">"Image description"</span><span class="highlight-a">/></span></span></pre><pre><span class="code-line"><span class="highlight-a"><figure></span></span>
|
||||
@ -116,7 +116,7 @@
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable.</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></ul></div>
|
||||
</div><br/><div id="code-and-quotations" class="card fluid">
|
||||
<h2 class="section double-padded">Code & quotations</h2>
|
||||
<div class="section"><p>Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are styled in a similar manner, while aiming not to break the flow of regular text.</p></div>
|
||||
<div class="section"><p>Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are minimally styled, aiming not to break the flow of regular text.</p></div>
|
||||
<div class="section"><h3>Example</h3><p class="doc">This is some text with some inline <code class="doc">source code</code> and some keyboard <kbd class="doc">input</kbd>.</p>
|
||||
<pre class="doc">function sum(num1, num2){
|
||||
return num1 + num2;
|
||||
@ -297,7 +297,7 @@
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable. This only affects the padding of the container.</li></ul></div>
|
||||
</div><br/><div id="cards" class="card fluid">
|
||||
<h2 class="section double-padded">Cards</h2>
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p></div>
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside a grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="container" style="padding: 0.25rem"><div class="row">
|
||||
<div class="card"><div class="section"><h3 class="doc">Card 1</h3><p class="doc">This is a basic card with some sample content.</p></div></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Card 2</h3><p class="doc">This is another card with some sample content.</p></div></div>
|
||||
@ -341,7 +341,7 @@
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.</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 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="card-sections" class="card fluid">
|
||||
<h2 class="section double-padded">Card sections</h2>
|
||||
<div class="section"><p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the apropriate class applied to it.</p></div>
|
||||
<div class="section"><p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the appropriate class applied to it.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="container" style="padding: 0.25rem"><div class="row"><div class="col-sm-12">
|
||||
<div class="card fluid" style="margin: 0.5rem 0.25rem"><h3 class="doc section">Title section</h3><p class="doc section">This is a section with some textual content.</p></div>
|
||||
</div></div></div></div>
|
||||
@ -351,16 +351,16 @@
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Modifiers</h3>
|
||||
<h4>Media sections</h4><p>You can create sections for media (<code>.media</code>), such as images or videos (using an <code><img></code> or a <code><iframe></code> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.</p><h5>Example</h5><div class="container" style="padding: 0.25rem;"><div class="row">
|
||||
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="placeholder"></div>
|
||||
<div class="card"><div class="section"><h3>Card with video</h3></div><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="placeholder"></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Card with video</h3></div><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe></div>
|
||||
</div></div><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><img</span> <span class="highlight-b">src</span>=<span class="highlight-c">"image.png"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section media"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre><br/><h4>Color variants</h4><p>You can create sections with a darker (<code>.dark</code>) background, by applying the appropriate modifier.</p><h5>Example</h5><div class="container" style="padding: 0.25rem;"><div class="row">
|
||||
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Normal section</h3></div><div class="section dark"><h3 class="doc">Dark section</h3></div></div>
|
||||
</div></div><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section dark"</span><span class="highlight-a">></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre><br/><h4>Additional spacing</h4><p>You can create sections with additional spacing (<code>.double-padded</code>), by applying the appropriate modifier.</p><h5>Example</h5><div class="container" style="padding: 0.25rem;"><div class="row">
|
||||
<div class="card"><div class="section"><h3>Normal spacing</h3></div><div class="section double-padded"><h3>Additional spacing</h3></div></div>
|
||||
<div class="card"><div class="section"><h3 class="doc">Normal spacing</h3></div><div class="section double-padded"><h3 class="doc">Additional spacing</h3></div></div>
|
||||
</div></div><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section double-padded"</span><span class="highlight-a">></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div>
|
||||
@ -370,5 +370,58 @@
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.</li><li>Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.</li><li>Media sections have a default height of <code>200px</code>.</li><li>Due to the media sections using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support (recommended: <a href="https://github.com/bfred-it/object-fit-images">image polyfill</a>, <a href="https://github.com/jonathantneal/fitie">video polyfill</a>).</li><li>Depending on the source website, some embedded videos might not display properly as media sections.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards and card sections can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards and card sections can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for cards and card sections can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="forms-and-input" class="card fluid">
|
||||
<h2 class="section double-padded">Forms & input</h2>
|
||||
<div class="section"><p>Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.</p></div>
|
||||
<div class="section"><h3>Example</h3><form><fieldset><legend class="doc">Sample form</legend>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-text" class="doc">Text</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="text" placeholder="Text" id="sf1-text" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-pwd" class="doc">Password</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="password" placeholder="Password" id="sf1-pwd" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-num" class="doc">Number</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="number" value="42" id="sf1-num" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-select" class="doc">Select</label></div>
|
||||
<div class="col-sm-12 col-md"><select id="sf1-select" style="width:85%;" class="doc"><option class="doc">Apples</option><option class="doc">Oranges</option></select></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-check" class="doc">Checkbox</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="checkbox" autocomplete="off" id="sf1-check" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-radio" class="doc">Radio</label></div>
|
||||
<div class="col-sm-12 col-md"><input type="radio" autocomplete="off" id="sf1-radio" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-textarea" class="doc">Textarea</label></div>
|
||||
<div class="col-sm-12 col-md"><textarea class="doc" style="width:85%;" placeholder="Textarea"></textarea></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-invalid" class="doc">Invalid</label></div>
|
||||
<div class="col-sm-12 col-md"><input value="Invalid" id="sf1-invalid" style="width:85%;" class="doc"></div>
|
||||
<script>document.getElementById("sf1-invalid").setCustomValidity("This field is invalid");</script></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-disabled" class="doc">Disabled</label></div>
|
||||
<div class="col-sm-12 col-md"><input disabled value="Disabled" id="sf1-disabled" style="width:85%;" class="doc"></div></div>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-readonly" class="doc">Readonly</label></div>
|
||||
<div class="col-sm-12 col-md"><input readonly value="Readonly" id="sf1-readonly" style="width:85%;" class="doc"></div></div>
|
||||
</fieldset></form></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></form></span></span></pre></div>
|
||||
|
||||
<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"><form></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></form></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> 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>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Using the <code><fieldset></code> and <code><legend></code> elements is highly recommended, as it improves semantic markup and accessibility.</li><li>Some input elements, such as date & 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></main>
|
||||
</div></div></body></html>
|
||||
2
docs/v3/style.min.css
vendored
2
docs/v3/style.min.css
vendored
File diff suppressed because one or more lines are too long
@ -259,7 +259,7 @@ $cc-line-name: 'code-line' !default; // Class name for code
|
||||
$cc-code-fonts:'Inconsolata', Menlo, Consolas, monospace;// Fonts used for code. -- Has been customized.
|
||||
$cc-code-font-size: 0.85rem !default; // Font size for code.
|
||||
$cc-padding-left: 3.5rem !default; // Left padding for code lines.
|
||||
$cc-number-left: 1rem !default; // Left position of the line numbers.
|
||||
$cc-number-left: 1.75rem !default; // Left position of the line numbers. -- Has been customized.
|
||||
$cc-number-width: 2rem !default; // Width of the line numbers.
|
||||
$cc-highlight-a-name: 'highlight-a' !default; // Class name for highlight A.
|
||||
$cc-highlight-b-name: 'highlight-b' !default; // Class name for highlight B.
|
||||
@ -293,6 +293,7 @@ pre {
|
||||
font-family: $cc-code-fonts; // Reapply to avoid problems
|
||||
padding-left: var(#{$cc-padding-left-var});
|
||||
&:before {
|
||||
background: #eee; // This was manually applied, it's a bit of a hack!
|
||||
counter-increment: #{$cc-counter-name};
|
||||
content: counter(#{$cc-counter-name});
|
||||
display: inline-block;
|
||||
@ -358,3 +359,6 @@ mark.dont {
|
||||
main {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.responsive-label {align-items: center;}
|
||||
@media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user