mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Polished documentation

Browse Source 
Everything should be ready for the alpha release.
This commit is contained in:
Angelos Chalaris
2017-11-19 15:02:15 +02:00
parent 4b42a2c784
commit 8ee81c8908
18 changed files with 153 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/doc-fragments/cardSections.js
View File

@@ -14,7 +14,7 @@ module.exports = {
`While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.`,
`Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.`,
`Media sections have a default height of <code>200px</code>.`,
`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>).`,
`Due to the media sections using <a href="http://caniuse.com/#feat=object-fit" target="_blank><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" target="_blank>image polyfill</a>, <a href="https://github.com/jonathantneal/fitie" target="_blank>video polyfill</a>).`,
`Depending on the source website, some embedded videos might not display properly as media sections.`
],
customization: [

2
docs/doc-fragments/commonTextualElements.js
View File

@@ -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, 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>
description: `<p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" target="_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: [

2
docs/doc-fragments/grid.js
View File

@@ -2,7 +2,7 @@ module.exports = {
id: 'grid',
title: 'Grid system',
keywords: [`grid`, `grid system`, `col`, `column`, `layout`, `row`, `container`, `small`, `medium`, `large`, `sm`, `md`, `lg`, `cols`, `predefined`, `offset`, `order`, `reorder`, `first`, `last`, `normal`],
description: `<p>The grid system of <strong>mini.css</strong> utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" targe="_blank">Flexbox layout</a> to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:</p>
description: `<p>The grid system of <strong>mini.css</strong> utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a> to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:</p>
<ul><li>The container (<code>.container</code>) is the outermost layer of the grid system and serves as a fluid wrapper, which can be used as the basis for your layout.</li>
<li>Inside the container, you can add one or more rows (<code>.row</code>), which will in turn house the columns.</li>
<li>Columns (<code>col-*-*</code>) are placed inside rows and they can be customized to display differently on different screen sizes, make use of fluid layouts, use offsets or change ordering.</li></ul>`,