mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-13 00:41:51 +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 7dd5b4fd7b
commit bc206ee76f
20 changed files with 153 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -9,3 +9,5 @@ docs/v3/index-splash-o1\.jpg
docs/v3/index-splash-o2\.jpg
docs/v3/responsive-original\.svg
docs/v3/index-splash_original\.jpg

114
docs/build-docs.js
View File

@ -1,17 +1,93 @@
var fs = require('fs');
var version = require('./vinf'); // Gets version info.
// INDEX
var indexHtml = `<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="./style.min.css">
<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 is a tiny CSS framework designed to build quick, modern and responsive websites.">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<div class="index-splash">
<div class="index-splash-image no-filter"></div>
<div class="index-splash-image"></div>
<h1 class="splash">mini<small>.css</small></h1>
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
<p id="version-info">${version.version}</p>
<a class="button splash">Get started</a>
</div>
<header class="row sticky">
<span class="col-md-1 col-lg-2"></span>
<span class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>&nbsp;Docs</span></a>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<a class="button col-sm col-md" href="#" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>&nbsp;Blog</span></a>
<span class="col-md-1 col-lg-2"></span>
</header>
<div class="row padded">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<img src="./responsive.svg" class="feature-image">
<h2 class="feature-header">Fast and Responsive</h2><br>
<p>Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then <strong>mini.css</strong> is the right tool for you! Its tiny size (under 10KB gzipped), along with its <strong>responsive grid</strong> and modern components ensures that all your users are satisfied and can access your website anytime, anywhere. Bridging the gap between fully-featured frameworks (e.g. Bootstrap and Semantic UI) and micro frameworks (e.g. Milligram and Pure.CSS), <strong>mini.css</strong> packs a lot of features in a small package, while it relies solely on CSS, meaning you do not have to worry about any conflicts with other Javascript libraries you might be using.</p>
</div>
</div>
<div class="row padded alt-back">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<img src="./tailored.svg" class="feature-image">
<h2 class="feature-header">Tailored to Your Needs</h2><br>
<p>Creating a CSS framework that caters to everyone's needs is no easy task, but <strong>mini.css</strong> manages to rise to the occasion by providing extensive and coherent documentation in combination with templates, examples and semantic HTML5 markup. Modern UX patterns and accessibility guidelines are well-documented and can be used out of the box, using one of the unique <strong>flavors</strong> that the framework provides. If you still want more, you can create your own custom flavor or tweak an existing one just by opening its CSS file and changing a few custom properties. It's that simple! </p>
</div>
</div>
<div class="row padded primary-section">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<h2 class="feature-header">Get started now!</h2><br>
<p>Head over to the <a href="docs">documentation</a> to learn how to get started using <strong>mini.css</strong>, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!</p>
<p style="text-align:center;"><a href="docs" class="button">Get started</a></p>
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="centered">mini.css on Github</a>
</div>
</div>
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
</body>
</html>`;
var indexOutputPath = './docs/v3/index.html'; // This path is relative to package.json.
fs.writeFile(indexOutputPath,
`${indexHtml}`,
function(err) { if(err) return console.log(err); console.log("Index file generated!"); }
);
// DOCUMENTATION
var docFragments = require('./doc-fragments/docFragments'); // Gets all document fragments as a list.
var outputPath = './docs/v3/docs.html'; // This path is relative to package.json.
var docOutputPath = './docs/v3/docs.html'; // This path is relative to package.json.
var documentStart = `<!DOCTYPE html><html lang="en"><head>
<!-- TODO: Add missing favicon and page_thumb images when about to release -->
<!-- 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&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="./style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js"></script>
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
<title>mini.css - Docs</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">
<meta name="description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
@ -22,15 +98,15 @@ var documentStart = `<!DOCTYPE html><html lang="en"><head>
var documentEnd = `</body></html>`;
var appShellStart = `<div id="root"><header class="row">
<span href="#" class="logo col-sm-3 col-md">mini.css</span>
<span class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<a class="button col-sm col-md" href="#" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>&nbsp;Blog</span></a>
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
</header>
@ -71,16 +147,6 @@ var documentationSearch = `<script>
</script>
<style id="search-style">#no-results{display:none;}</style>`;
fs.writeFile(outputPath,
`${documentStart}${appShellStart}
${appSidebarStart}${documentationLinks}${appSidebarEnd}
${mainStart}${documentationFragments}${mainEnd}
${appShellEnd}
${documentationSearch}
${documentEnd}`,
function(err) { if(err) return console.log(err); console.log("The file was saved!"); }
);
function buildFragment(fragment){
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
<h2 class="section double-padded">${fragment.title}</h2>
@ -106,3 +172,13 @@ function buildLink(fragment){
function stripData(fragment){
return `{id: "${fragment.id}", keys: [${fragment.keywords.map(k=>`"${k}"`)}] }`;
}
fs.writeFile(docOutputPath,
`${documentStart}${appShellStart}
${appSidebarStart}${documentationLinks}${appSidebarEnd}
${mainStart}${documentationFragments}${mainEnd}
${appShellEnd}
${documentationSearch}
${documentEnd}`,
function(err) { if(err) return console.log(err); console.log("Documentation file generated!"); }
);

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>`,

7
docs/v3/DEVLOG.md
View File

@ -181,3 +181,10 @@
- Documented `header`, `footer` and `nav`.
- Documented `drawer`.
- Implemented search functionality, using `fuse`. It all works pretty well.
- Added `index.html` generation code in the build file, this will allow me to not load a script for the versioning.
- Polished menus with icons, updated menus.
- Updated splash page with all the necessary thing and buttons.
- Optimized all images to make the pages lighter.
- Updated links to open in new tabs when they are external.
- Generated new favicons.
- Everything should be ready to release `v3.0.0-alpha.1` tomorrow.

BIN
docs/v3/browser-logos/android_128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
docs/v3/browser-logos/chrome_128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
docs/v3/browser-logos/edge_128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
docs/v3/browser-logos/firefox_128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
docs/v3/browser-logos/opera_128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
docs/v3/browser-logos/safari_128x128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

20
docs/v3/docs.html
View File

@ -1,12 +1,10 @@
<!DOCTYPE html><html lang="en"><head>
<!-- TODO: Add missing favicon and page_thumb images when about to release -->
<!-- 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&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="./style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js"></script>
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
<title>mini.css - Docs</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">
<meta name="description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
@ -14,15 +12,15 @@
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
</head><body><div id="root"><header class="row">
<span href="#" class="logo col-sm-3 col-md">mini.css</span>
<span class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<a class="button col-sm col-md" href="#" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>&nbsp;Blog</span></a>
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
</header>
@ -55,7 +53,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, 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>
<div class="section"><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></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">&lt;p&gt;</span>This is a paragraph. with some <span class="highlight-a">&lt;strong&gt;</span>bold text<span class="highlight-a">&lt;/strong&gt;</span> and some <span class="highlight-a">&lt;em&gt;</span>italics text<span class="highlight-a">&lt;/em&gt;</span>.<span class="highlight-a">&lt;/p&gt;</span></span>
@ -142,7 +140,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 text color of <code>&lt;code&gt</code> and <code>&lt;pre&gt</code> elements and background color of <code>&lt;kbd&gt;</code> elements.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable. This will affect the background color of <code>&lt;blockquote&gt</code> elements and text color of <code>&lt;kbd&gt</code>.</li><li>You can change the background color of <code>&lt;code&gt</code> and <code>&lt;pre&gt</code> elements by changing the value of the <code>--secondary-back-color</code> variable.</li><li>You can change the text color of <code>&lt;blockquote&gt;</code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li><li>You can change the border color of <code>&lt;pre&gt;</code> and <code>&lt;blockquote&gt;</code> elements by changing the value of the <code>--secondary-border-color</code> variable.</li><li>You can change the border color of the left border of <code>&lt;pre&gt;</code> elements by changing the value of the <code>--pre-color</code> variable.</li><li>You can change the border color of the left border of <code>&lt;blockquote&gt;</code> elements by changing the value of the <code>--blockquote-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>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="grid" class="card fluid">
<h2 class="section double-padded">Grid system</h2>
<div class="section"><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>
<div class="section"><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></div>
@ -377,7 +375,7 @@
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;p&gt;</span>This should have been a section!<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;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>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" 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>).</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>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</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 &amp; input</h2>

BIN
docs/v3/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
docs/v3/favicon_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
docs/v3/index-splash.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 390 KiB

28
docs/v3/index.html
View File

@ -1,14 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- TODO: Add missing favicon and page_thumb images when about to release -->
<!-- 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&amp;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">
<meta name="description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
@ -22,23 +19,23 @@
<div class="index-splash-image"></div>
<h1 class="splash">mini<small>.css</small></h1>
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
<p id="version-info">v3</p>
<p id="version-info">v3.0.0-alpha.1</p>
<a class="button splash">Get started</a>
</div>
<!-- TODO: Add CTA ghost button and a link (?) in splash -->
<header class="row sticky">
<span class="col-md-1 col-lg-2"></span>
<span href="#" class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>&nbsp;Docs</span></a>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<a class="button col-sm col-md" href="#" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>&nbsp;Blog</span></a>
<span class="col-md-1 col-lg-2"></span>
</header>
@ -64,9 +61,6 @@
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="centered">mini.css on Github</a>
</div>
</div>
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
<!-- TODO: Add footer with credits for splash image etc. -->
<!-- Scripts -->
<script>document.getElementById('version-info').innerHTML = version();</script>
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
</body>
</html>
</html>

2
docs/v3/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
docs/v3/vinf.js
View File

@ -1,5 +0,0 @@
// Get the current version of the Gluon branch.
function version(){
var version = 'v3.0.0-alpha.1';
return version;
}

25
src/flavors/mini-doc.scss
View File

@ -141,6 +141,31 @@ p.splash {
text-align: justify;
}
a.button.splash {
position: absolute;
top: 65vh;
width: 50vw;
left: 25vw;
text-align: center;
font-size: 1.25rem;
border-color: #f22f21;
background: rgba(255,255,255,0.35);
transition: all 0.3s;
&:hover {
background: #f22f21;
color: #f8f8f8;
border-color: #f22f21;
}
@media screen and (min-width: 768px){
width: 30vw;
left: 35vw;
}
@media screen and (min-width: 1280px){
width: 25vw;
left: 37.5vw;
}
}
#version-info {
position: absolute;
bottom: 0;