mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-20 04:31:29 +02:00
Documented forms
And common inputs.
This commit is contained in:
Angelos Chalaris
@@ -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>`,
|
||||
|
||||
Reference in New Issue
Block a user