Documentation updates
Added a couple of cards to the new documentation system, it's starting to take shape.
This commit is contained in:
Angelos Chalaris
parent
f6a896a18b
commit
c23c465c6d
19 changed files with 272 additions and 28 deletions
36
dist/mini-default.css
vendored
36
dist/mini-default.css
vendored
|
|
@ -260,6 +260,7 @@ a:hover, a:focus {
|
|||
.col-sm-1,
|
||||
.row.cols-sm-1 > * {
|
||||
flex-basis: 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-0 {
|
||||
|
|
@ -269,6 +270,7 @@ a:hover, a:focus {
|
|||
.col-sm-2,
|
||||
.row.cols-sm-2 > * {
|
||||
flex-basis: 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-1 {
|
||||
|
|
@ -278,6 +280,7 @@ a:hover, a:focus {
|
|||
.col-sm-3,
|
||||
.row.cols-sm-3 > * {
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-sm-offset-2 {
|
||||
|
|
@ -287,6 +290,7 @@ a:hover, a:focus {
|
|||
.col-sm-4,
|
||||
.row.cols-sm-4 > * {
|
||||
flex-basis: 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-3 {
|
||||
|
|
@ -296,6 +300,7 @@ a:hover, a:focus {
|
|||
.col-sm-5,
|
||||
.row.cols-sm-5 > * {
|
||||
flex-basis: 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-4 {
|
||||
|
|
@ -305,6 +310,7 @@ a:hover, a:focus {
|
|||
.col-sm-6,
|
||||
.row.cols-sm-6 > * {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-sm-offset-5 {
|
||||
|
|
@ -314,6 +320,7 @@ a:hover, a:focus {
|
|||
.col-sm-7,
|
||||
.row.cols-sm-7 > * {
|
||||
flex-basis: 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-6 {
|
||||
|
|
@ -323,6 +330,7 @@ a:hover, a:focus {
|
|||
.col-sm-8,
|
||||
.row.cols-sm-8 > * {
|
||||
flex-basis: 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-7 {
|
||||
|
|
@ -332,6 +340,7 @@ a:hover, a:focus {
|
|||
.col-sm-9,
|
||||
.row.cols-sm-9 > * {
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-sm-offset-8 {
|
||||
|
|
@ -341,6 +350,7 @@ a:hover, a:focus {
|
|||
.col-sm-10,
|
||||
.row.cols-sm-10 > * {
|
||||
flex-basis: 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-9 {
|
||||
|
|
@ -350,6 +360,7 @@ a:hover, a:focus {
|
|||
.col-sm-11,
|
||||
.row.cols-sm-11 > * {
|
||||
flex-basis: 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-10 {
|
||||
|
|
@ -359,6 +370,7 @@ a:hover, a:focus {
|
|||
.col-sm-12,
|
||||
.row.cols-sm-12 > * {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-sm-offset-11 {
|
||||
|
|
@ -394,6 +406,7 @@ a:hover, a:focus {
|
|||
.col-md-1,
|
||||
.row.cols-md-1 > * {
|
||||
flex-basis: 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
.col-md-offset-0 {
|
||||
margin-left: 0;
|
||||
|
|
@ -401,6 +414,7 @@ a:hover, a:focus {
|
|||
.col-md-2,
|
||||
.row.cols-md-2 > * {
|
||||
flex-basis: 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
|
|
@ -408,6 +422,7 @@ a:hover, a:focus {
|
|||
.col-md-3,
|
||||
.row.cols-md-3 > * {
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-md-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
|
|
@ -415,6 +430,7 @@ a:hover, a:focus {
|
|||
.col-md-4,
|
||||
.row.cols-md-4 > * {
|
||||
flex-basis: 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
.col-md-offset-3 {
|
||||
margin-left: 25%;
|
||||
|
|
@ -422,6 +438,7 @@ a:hover, a:focus {
|
|||
.col-md-5,
|
||||
.row.cols-md-5 > * {
|
||||
flex-basis: 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
.col-md-offset-4 {
|
||||
margin-left: 33.33333%;
|
||||
|
|
@ -429,6 +446,7 @@ a:hover, a:focus {
|
|||
.col-md-6,
|
||||
.row.cols-md-6 > * {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-md-offset-5 {
|
||||
margin-left: 41.66667%;
|
||||
|
|
@ -436,6 +454,7 @@ a:hover, a:focus {
|
|||
.col-md-7,
|
||||
.row.cols-md-7 > * {
|
||||
flex-basis: 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
.col-md-offset-6 {
|
||||
margin-left: 50%;
|
||||
|
|
@ -443,6 +462,7 @@ a:hover, a:focus {
|
|||
.col-md-8,
|
||||
.row.cols-md-8 > * {
|
||||
flex-basis: 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
.col-md-offset-7 {
|
||||
margin-left: 58.33333%;
|
||||
|
|
@ -450,6 +470,7 @@ a:hover, a:focus {
|
|||
.col-md-9,
|
||||
.row.cols-md-9 > * {
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-md-offset-8 {
|
||||
margin-left: 66.66667%;
|
||||
|
|
@ -457,6 +478,7 @@ a:hover, a:focus {
|
|||
.col-md-10,
|
||||
.row.cols-md-10 > * {
|
||||
flex-basis: 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
.col-md-offset-9 {
|
||||
margin-left: 75%;
|
||||
|
|
@ -464,6 +486,7 @@ a:hover, a:focus {
|
|||
.col-md-11,
|
||||
.row.cols-md-11 > * {
|
||||
flex-basis: 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
.col-md-offset-10 {
|
||||
margin-left: 83.33333%;
|
||||
|
|
@ -471,6 +494,7 @@ a:hover, a:focus {
|
|||
.col-md-12,
|
||||
.row.cols-md-12 > * {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-md-offset-11 {
|
||||
margin-left: 91.66667%;
|
||||
|
|
@ -503,6 +527,7 @@ a:hover, a:focus {
|
|||
.col-lg-1,
|
||||
.row.cols-lg-1 > * {
|
||||
flex-basis: 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
.col-lg-offset-0 {
|
||||
margin-left: 0;
|
||||
|
|
@ -510,6 +535,7 @@ a:hover, a:focus {
|
|||
.col-lg-2,
|
||||
.row.cols-lg-2 > * {
|
||||
flex-basis: 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
.col-lg-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
|
|
@ -517,6 +543,7 @@ a:hover, a:focus {
|
|||
.col-lg-3,
|
||||
.row.cols-lg-3 > * {
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
|
|
@ -524,6 +551,7 @@ a:hover, a:focus {
|
|||
.col-lg-4,
|
||||
.row.cols-lg-4 > * {
|
||||
flex-basis: 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
.col-lg-offset-3 {
|
||||
margin-left: 25%;
|
||||
|
|
@ -531,6 +559,7 @@ a:hover, a:focus {
|
|||
.col-lg-5,
|
||||
.row.cols-lg-5 > * {
|
||||
flex-basis: 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
.col-lg-offset-4 {
|
||||
margin-left: 33.33333%;
|
||||
|
|
@ -538,6 +567,7 @@ a:hover, a:focus {
|
|||
.col-lg-6,
|
||||
.row.cols-lg-6 > * {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-lg-offset-5 {
|
||||
margin-left: 41.66667%;
|
||||
|
|
@ -545,6 +575,7 @@ a:hover, a:focus {
|
|||
.col-lg-7,
|
||||
.row.cols-lg-7 > * {
|
||||
flex-basis: 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
.col-lg-offset-6 {
|
||||
margin-left: 50%;
|
||||
|
|
@ -552,6 +583,7 @@ a:hover, a:focus {
|
|||
.col-lg-8,
|
||||
.row.cols-lg-8 > * {
|
||||
flex-basis: 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
.col-lg-offset-7 {
|
||||
margin-left: 58.33333%;
|
||||
|
|
@ -559,6 +591,7 @@ a:hover, a:focus {
|
|||
.col-lg-9,
|
||||
.row.cols-lg-9 > * {
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-lg-offset-8 {
|
||||
margin-left: 66.66667%;
|
||||
|
|
@ -566,6 +599,7 @@ a:hover, a:focus {
|
|||
.col-lg-10,
|
||||
.row.cols-lg-10 > * {
|
||||
flex-basis: 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
.col-lg-offset-9 {
|
||||
margin-left: 75%;
|
||||
|
|
@ -573,6 +607,7 @@ a:hover, a:focus {
|
|||
.col-lg-11,
|
||||
.row.cols-lg-11 > * {
|
||||
flex-basis: 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
.col-lg-offset-10 {
|
||||
margin-left: 83.33333%;
|
||||
|
|
@ -580,6 +615,7 @@ a:hover, a:focus {
|
|||
.col-lg-12,
|
||||
.row.cols-lg-12 > * {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-lg-offset-11 {
|
||||
margin-left: 91.66667%;
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,6 @@ var documentStart = `<!DOCTYPE html><html lang="en"><head>
|
|||
<!-- TODO: Update meta information when about to release -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.min.css">
|
||||
<script src="./vinf.js"></script>
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
|
|
@ -33,22 +32,33 @@ var appShellStart = `<div id="root"><header>
|
|||
var appShellEnd = `</div></div>`;
|
||||
|
||||
var appSidebarStart = `<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 class="col-md-4 col-lg-3"><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search"></div>`;
|
||||
var appSidebarEnd = `</nav>`;
|
||||
|
||||
var mainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><button>Home</button><a href="#" class="button">News</a>`;
|
||||
var mainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content">`;
|
||||
var mainEnd = `</main>`;
|
||||
|
||||
var documentationFragments = docFragments.map(f => buildFragment(f)).join('<br/>');
|
||||
|
||||
fs.writeFile(outputPath,
|
||||
`${documentStart}${appShellStart}
|
||||
${appSidebarStart}${appSidebarEnd}
|
||||
${mainStart}${mainEnd}
|
||||
${mainStart}${documentationFragments}${mainEnd}
|
||||
${appShellEnd}${documentEnd}`,
|
||||
function(err) {
|
||||
if(err) {
|
||||
return console.log(err);
|
||||
}
|
||||
function(err) { if(err) return console.log(err); console.log("The file was saved!"); }
|
||||
);
|
||||
|
||||
console.log("The file was saved!");
|
||||
});
|
||||
console.log('done');
|
||||
function buildFragment(fragment){
|
||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||
<h2 class="section double-padded">${fragment.title}</h2>
|
||||
<div class="section">${fragment.description}</div>
|
||||
${fragment.example?`<div class="section"><h3>Example</h3>${fragment.example}</div>`:''}
|
||||
${fragment.samples.length?`<div class="section double-padded"><h3>Sample code</h3>${fragment.samples.join('<br/>')}</div>`:''}
|
||||
${fragment.dos.length||fragment.donts.length?
|
||||
`<div class="section double-padded"><h3>Best practices</h3>${[fragment.dos.map(d => `<div class="row dodos"><div class="col-sm-12 col-md-6">${d.sample}</div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> ${d.description}</p></div></div>`).join('<br/>'),fragment.donts.map(d => `<div class="row dodos"><div class="col-sm-12 col-md-6">${d.sample}</div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> ${d.description}</p></div></div>`).join('<br/>')].join('')}</div>`
|
||||
:''}
|
||||
${fragment.notes.length?`<div class="section double-padded"><h3>Notes</h3><ul>${fragment.notes.map(n => `<li>${n}</li>`).join('')}</ul></div>`:''}
|
||||
${fragment.customization.length?`<div class="section double-padded"><h3>Customization</h3><ul>${fragment.customization.map(s => `<li>${s}</li>`).join('')}</ul></div>`:''}
|
||||
</div>`;
|
||||
return fragmentHtml;
|
||||
}
|
||||
|
|
|
|||
38
docs/doc-fragments/commonTextualElements.js
Normal file
38
docs/doc-fragments/commonTextualElements.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
module.exports = {
|
||||
id: 'common-textual-elements',
|
||||
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>
|
||||
<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>This is a paragraph with some sample text. Did you know that the latest version of <strong>mini.css</strong> is codenamed <em>Gluon</em>? Well, now you do!</p><hr/><p><small>Remember that <strong>mini.css</strong> is totally free, no fine print involved!</small></p>`,
|
||||
samples: [
|
||||
`<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>
|
||||
<span class="code-line"><span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>This is a link.<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><small></span>This is some small text.<span class="highlight-a"></small></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><sub></span>Subscript<span class="highlight-a"></sub></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><sup></span>Superscript<span class="highlight-a"></sup></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><hr/></span></span></pre>`
|
||||
],
|
||||
notes: [
|
||||
|
||||
],
|
||||
customization: [
|
||||
`Text color can be changed globally by changing the value of the <code>--fore-color</code> variable.`,
|
||||
`Background color can be changed globally by changing the value of the <code>--back-color</code> variable.`,
|
||||
`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.`,
|
||||
`You can change the color of linkss by changing the values of the <code>--a-link-color</code> and <code>--a-visited-color</code> variables.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: [
|
||||
{description: `Avoid altering the base font size of <code>16px</code> directly in your CSS code, as it can cause problems with the display of certain elements.`,
|
||||
sample:
|
||||
`<pre><span class="code-line"><span class="highlight-c">/* Do not do this (use Sass instead) */</span></span>
|
||||
<span class="code-line"><span class="highlight-a">html</span> {</span>
|
||||
<span class="code-line"> font-size: <span class="highlight-b">14px</span>;</span>
|
||||
<span class="code-line">}</span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
var gettingStarted = require('./gettingStarted');
|
||||
var commonTextualElements = require('./commonTextualElements');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted
|
||||
gettingStarted, commonTextualElements
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,16 +1,29 @@
|
|||
var version = require('../vinf').version;
|
||||
module.exports = {
|
||||
id: 'getting-started',
|
||||
alphaId: '00000gettingStarted', // Ensure that this is at the very top in any sorting
|
||||
moduleId: '00001',
|
||||
title: 'Getting started',
|
||||
tag: 'html', // I had to set something, so don't pay too much attention to this
|
||||
keywords: ['getting started', 'introduction', 'browser support', 'installation', 'usage', 'setup', 'cdn', 'npm', 'yarn'],
|
||||
description: '',
|
||||
keywords: ['html', 'viewport', 'head', 'meta', 'getting started', 'introduction', 'browser support', 'installation', 'usage', 'setup', 'cdn', 'npm', 'yarn'],
|
||||
description: `<p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
<div class="row"><div class="col-sm-12 col-md"><pre>npm install mini.css</pre></div><div class="col-sm-12 col-md"><pre>yarn add mini.css</pre></div></div>
|
||||
<br/><p>Alternatively, you can use either <strong>rawgit</strong> or <strong>cdnjs</strong> to import <strong>mini.css</strong> into your HTML page's <code><head></code> tag:</p>
|
||||
<pre><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/${version}/dist/mini-default.min.css"></pre>
|
||||
<pre><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/${version}/mini-default.min.css"></pre>
|
||||
<br/><p>After adding <strong>mini.css</strong> to your project, remember to also add the following line inside your HTML page's <code><head></code> tag to utilize the viewport meta tag:</p>
|
||||
<pre><meta name="viewport" content="width=device-width, initial-scale=1"></pre>
|
||||
<br/><p><strong>mini.css</strong> is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.</p><br/>
|
||||
<figure class="container"><div class="row">
|
||||
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small> Edge<sup style="-0.675em"><i class="fa fa-lg fa-exclamation" aria-hidden="true" style="font-size: 80%;"></i></sup></small>15</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small> Firefox</small>31</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small> Chrome</small>49</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small> Safari</small>9.1</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small> Opera</small>36</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small> Android</small>56</h3></div>
|
||||
</div><figcaption>Browser versions officially supported</figcaption></figure><br/>`,
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: [],
|
||||
donts: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
export default const doNotUseThisThisIsJustATemplateForHowToMakeDocumentationFragments = {
|
||||
module.exports = {
|
||||
id: '',
|
||||
alphaId: '',
|
||||
moduleId: '',
|
||||
title: '',
|
||||
tag: '',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
|
|
@ -12,7 +9,7 @@ export default const doNotUseThisThisIsJustATemplateForHowToMakeDocumentationFra
|
|||
customization: [],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: [],
|
||||
donts: []
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -148,3 +148,10 @@
|
|||
- Added custom styles necessary for `.card` elements.
|
||||
- After compilation of the completed modules, the size is `4.58KB`, whereas the size of the **Fermion** branch with the same things (meaning the switches and other ditched components were not included) was `4.56KB`. This is unbelievable and makes the **hugging cat** really happy.
|
||||
- Recompiled the `mini-default` flavor files. They should be mostly ready for release by now.
|
||||
|
||||
## 20171114
|
||||
|
||||
- Struggled for a couple of hours with the whole docs architecture, finally moved to a new customized build system.
|
||||
- Added the `getting-started` section to the documentation, this should now start to look like a real website.
|
||||
- Worked on documentation and custom tool, it should now support a lot of the data that is thrown at it.
|
||||
- Fixed a huge bug that I expected to blow up in my face eventually, where I had removed the `max-width` propert from `.col-` elements. Everything should be bug-free in the `grid` components now.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 24 KiB |
|
|
@ -3,7 +3,6 @@
|
|||
<!-- TODO: Update meta information when about to release -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.min.css">
|
||||
<script src="./vinf.js"></script>
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
|
|
@ -20,6 +19,46 @@
|
|||
</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>
|
||||
<nav class="col-md-4 col-lg-3"><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"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
<div class="row"><div class="col-sm-12 col-md"><pre>npm install mini.css</pre></div><div class="col-sm-12 col-md"><pre>yarn add mini.css</pre></div></div>
|
||||
<br/><p>Alternatively, you can use either <strong>rawgit</strong> or <strong>cdnjs</strong> to import <strong>mini.css</strong> into your HTML page's <code><head></code> tag:</p>
|
||||
<pre><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.1/dist/mini-default.min.css"></pre>
|
||||
<pre><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.1/mini-default.min.css"></pre>
|
||||
<br/><p>After adding <strong>mini.css</strong> to your project, remember to also add the following line inside your HTML page's <code><head></code> tag to utilize the viewport meta tag:</p>
|
||||
<pre><meta name="viewport" content="width=device-width, initial-scale=1"></pre>
|
||||
<br/><p><strong>mini.css</strong> is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.</p><br/>
|
||||
<figure class="container"><div class="row">
|
||||
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small> Edge<sup style="-0.675em"><i class="fa fa-lg fa-exclamation" aria-hidden="true" style="font-size: 80%;"></i></sup></small>15</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small> Firefox</small>31</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small> Chrome</small>49</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small> Safari</small>9.1</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small> Opera</small>36</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small> Android</small>56</h3></div>
|
||||
</div><figcaption>Browser versions officially supported</figcaption></figure><br/></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
<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>This is a paragraph with some sample text. Did you know that the latest version of <strong>mini.css</strong> is codenamed <em>Gluon</em>? Well, now you do!</p><hr/><p><small>Remember that <strong>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>
|
||||
<span class="code-line"><span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>This is a link.<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><small></span>This is some small text.<span class="highlight-a"></small></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><sub></span>Subscript<span class="highlight-a"></sub></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><sup></span>Superscript<span class="highlight-a"></sup></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><hr/></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-c">/* Do not do this (use Sass instead) */</span></span>
|
||||
<span class="code-line"><span class="highlight-a">html</span> {</span>
|
||||
<span class="code-line"> font-size: <span class="highlight-b">14px</span>;</span>
|
||||
<span class="code-line">}</span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid altering the base font size of <code>16px</code> directly in your CSS code, as it can cause problems with the display of certain elements.</p></div></div></div>
|
||||
|
||||
<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><li>You can change the color of linkss by changing the values of the <code>--a-link-color</code> and <code>--a-visited-color</code> variables.</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
4
docs/vinf.js
Normal file
4
docs/vinf.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// Get the current version of the Gluon branch.
|
||||
module.exports = {
|
||||
version: 'v3.0.0-alpha.1'
|
||||
}
|
||||
|
|
@ -137,6 +137,9 @@ p.splash {
|
|||
text-align: center;
|
||||
padding-top: 40vh;
|
||||
}
|
||||
.card p:not(.doc), .card li:not(.doc){
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#version-info {
|
||||
position: absolute;
|
||||
|
|
@ -248,3 +251,97 @@ p.splash {
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional styling from custom module: https://github.com/Chalarangelo/mini.css-code-component
|
||||
|
||||
$cc-counter-name: 'line' !default; // Name for the line counter.
|
||||
$cc-line-name: 'code-line' !default; // Class name for code lines.
|
||||
$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-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.
|
||||
$cc-highlight-c-name: 'highlight-c' !default; // Class name for highlight C.
|
||||
$cc-highlight-a-color: #4527a0 !default; // Color for highlight A.
|
||||
$cc-highlight-b-color: #1976d2 !default; // Color for highlight B.
|
||||
$cc-highlight-c-color: #388e3c !default; // Color for highlight C.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$cc-padding-left-var: '--cc-padding-left' !default;
|
||||
$cc-number-left-var: '--cc-number-left' !default;
|
||||
$cc-number-width-var: '--cc-number-width' !default;
|
||||
$cc-highlight-a-var: '--cc-highlight-a-color' !default;
|
||||
$cc-highlight-b-var: '--cc-highlight-b-color' !default;
|
||||
$cc-highlight-c-var: '--cc-highlight-c-color' !default;
|
||||
/* Code component CSS variable definitions */
|
||||
:root {
|
||||
#{$cc-padding-left-var}: $cc-padding-left;
|
||||
#{$cc-number-left-var}: $cc-number-left;
|
||||
#{$cc-number-width-var}: $cc-number-width;
|
||||
#{$cc-highlight-a-var}: $cc-highlight-a-color;
|
||||
#{$cc-highlight-b-var}: $cc-highlight-b-color;
|
||||
#{$cc-highlight-c-var}: $cc-highlight-c-color;
|
||||
}
|
||||
pre {
|
||||
counter-reset: #{$cc-counter-name};
|
||||
& > * {
|
||||
font-family: $cc-code-fonts; // Reapply to avoid problems
|
||||
font-size: $cc-code-font-size;
|
||||
}
|
||||
& > .#{$cc-line-name} {
|
||||
font-family: $cc-code-fonts; // Reapply to avoid problems
|
||||
padding-left: var(#{$cc-padding-left-var});
|
||||
&:before {
|
||||
counter-increment: #{$cc-counter-name};
|
||||
content: counter(#{$cc-counter-name});
|
||||
display: inline-block;
|
||||
border-right: $__1px solid var(#{$pre-color-var});
|
||||
padding: 0 var(#{$universal-padding-var});
|
||||
margin-right: var(#{$universal-margin-var});
|
||||
color: var(#{$border-color-var});
|
||||
position: absolute;
|
||||
left: var(#{$cc-number-left-var});
|
||||
width: var(#{$cc-number-width-var});
|
||||
text-align: right;
|
||||
}
|
||||
& > * {
|
||||
line-height: 0; // Prevent highlights from breaking up the code block.
|
||||
font-family: #{$cc-code-fonts}; // Reapply to avoid problems
|
||||
}
|
||||
}
|
||||
.#{$cc-highlight-a-name} {
|
||||
color: var(#{$cc-highlight-a-var});
|
||||
}
|
||||
.#{$cc-highlight-b-name} {
|
||||
color: var(#{$cc-highlight-b-var});
|
||||
}
|
||||
.#{$cc-highlight-c-name} {
|
||||
color: var(#{$cc-highlight-c-var});
|
||||
}
|
||||
}
|
||||
|
||||
// Custom elements for DOs and DONTs - Possibly use the `contextual` module in the end - TODO
|
||||
|
||||
|
||||
mark.do {
|
||||
background: #689f38;
|
||||
color: #fafafa;
|
||||
font-size: .9375em;
|
||||
line-height: 1em;
|
||||
border-radius: .125rem;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
mark.dont {
|
||||
background: #e53935;
|
||||
color: #fafafa;
|
||||
font-size: .9375em;
|
||||
line-height: 1em;
|
||||
border-radius: .125rem;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
.row.dodos {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,11 +101,13 @@ $card-border-color-var: '--card-border-color' !default;
|
|||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
// Offest definitions.
|
||||
|
|
|
|||
Loading…
Reference in a new issue