mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-20 04:31:29 +02:00
Started working on Gluon core
Core module has been initialized, as well as a default flavor. Minor changes (read DEVLOG), moved things around, cleaned up some things and built some of the basic features.
This commit is contained in:
Angelos Chalaris
265
docs/build-docs.js
Normal file
265
docs/build-docs.js
Normal file
@@ -0,0 +1,265 @@
|
||||
var fs = require('fs');
|
||||
var version = require('./vinf'); // Gets version info.
|
||||
var frameworkUrl = `"https://cdnjs.cloudflare.com/ajax/libs/mini.css/${version.version.slice(1)}/mini-default.css"`;
|
||||
// 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&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" href="docs">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> 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> Github</span></a>
|
||||
<a class="button col-sm col-md" href="flavors">
|
||||
<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> Flavors</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/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 docOutputPath = './docs/docs.html'; // This path is relative to package.json.
|
||||
|
||||
const FEATHER_BANNER = `<a href="https://feathericons.com/" class="section double-padded" id="feather-banner" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8f8f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg> Powered by Feather</a>`;
|
||||
|
||||
var documentStart = `<!DOCTYPE html><html lang="en"><head>
|
||||
<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="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js"></script>
|
||||
<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 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>`;
|
||||
var documentEnd = `</body></html>`;
|
||||
|
||||
var appShellStart = `<div id="root"><header class="row">
|
||||
<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" 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> Github</span></a>
|
||||
<a class="button col-sm col-md" href="flavors">
|
||||
<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> Flavors</span></a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||
</header>
|
||||
<div class="row" id="doc-wrapper">`;
|
||||
var appShellEnd = `</div></div>`;
|
||||
|
||||
var appSidebarStart = `<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div>`;
|
||||
var appSidebarEnd = `<span id="no-results">No results found</span></nav>`;
|
||||
|
||||
var mainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content">`;
|
||||
var mainEnd = `<footer><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>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>`;
|
||||
|
||||
var documentationFragments = docFragments.map(f => buildFragment(f)).join('<br/>');
|
||||
var documentationLinks = docFragments.map(f => buildLink(f)).join('');
|
||||
var documentationSearch = `<script>
|
||||
// Search script
|
||||
var docs= [${docFragments.map(f => stripData(f))}];
|
||||
var options = {threshold:0.4, keys:["keys"]};
|
||||
var fuse = new Fuse(docs,options);
|
||||
function search(){
|
||||
var query = document.getElementById('search-bar').value;
|
||||
if(query.length){
|
||||
var result = fuse.search(query);
|
||||
if(result.length){
|
||||
var resIds = result.map(function(item){
|
||||
return ':not(#link-to-'+item.id+')';
|
||||
}).join('');
|
||||
document.getElementById('search-style').innerHTML = '#no-results{display:none;}#nav-drawer a'+resIds+'{display:none;}';
|
||||
}
|
||||
else {
|
||||
document.getElementById('search-style').innerHTML = '#nav-drawer a{display:none;}#no-results{display:block;}';
|
||||
}
|
||||
}
|
||||
else{
|
||||
document.getElementById('search-style').innerHTML = '#no-results{display:none;}';
|
||||
}
|
||||
}
|
||||
// Codepen prefill script
|
||||
var el = document.querySelectorAll('.prefiller-example > pre');
|
||||
el.forEach(e => e.innerHTML = '<form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">' +
|
||||
'<input type="hidden" name="data" value=\\\'' + JSON.stringify({
|
||||
html : e.innerText,
|
||||
css_external : ${frameworkUrl}
|
||||
}).replace(/"/g, """)
|
||||
.replace(/'/g, "'") + '\\\'>' +
|
||||
'<input type="image" class="codepen-link" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23424242%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2022%208.5%2022%2015.5%2012%2022%202%2015.5%202%208.5%2012%202%22%3E%3C%2Fpolygon%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2215.5%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2222%208.5%2012%2015.5%202%208.5%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%222%2015.5%2012%208.5%2022%2015.5%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%228.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E" width="40" height="40" value="Open in Codepen">' +
|
||||
'</form>' + e.innerHTML);
|
||||
</script>
|
||||
<style id="search-style">#no-results{display:none;}</style>`;
|
||||
|
||||
function buildFragment(fragment){
|
||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||
<h2 class="section double-padded">${fragment.title}</h2>
|
||||
${fragment.id === 'icons'?FEATHER_BANNER:''}
|
||||
<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 prefiller-example"><h3>Sample code</h3>${fragment.samples.join('')}</div>`:''}
|
||||
${fragment.modifiers.length?
|
||||
`<div class="section double-padded prefiller-example"><h3>Modifiers</h3>
|
||||
${fragment.modifiers.map(m => `<h4>${m.title}</h4>${m.description}${m.example?`<h5>Example</h5>${m.example}`:''}${m.samples.length?`<h5>Sample code</h5>${m.samples.join('')}`:''}`).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;
|
||||
}
|
||||
|
||||
function buildLink(fragment){
|
||||
return `<a href="#${fragment.id}" id="link-to-${fragment.id}">${fragment.title}</a>`;
|
||||
}
|
||||
|
||||
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!"); }
|
||||
);
|
||||
|
||||
// CUSTOMIZATION
|
||||
var custFragments = require('./doc-fragments/customizationFragments'); // Gets all customization fragments as a list.
|
||||
var custOutputPath = './docs/flavors.html'; // This path is relative to package.json.
|
||||
|
||||
var customizationStart = `<!DOCTYPE html><html lang="en"><head>
|
||||
<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">
|
||||
<title>mini.css - Flavors</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">
|
||||
<script src="./jszip.min.js"></script>
|
||||
<script src="./FileSaver.min.js"></script>
|
||||
<script src="./sass.js"></script>
|
||||
</head><body>`;
|
||||
var customizationEnd = `</body></html>`;
|
||||
|
||||
var customizationAppShellStart = `<div id="root"><header class="row">
|
||||
<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" 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> Github</span></a>
|
||||
<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> Docs</span></a>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
|
||||
</header>
|
||||
<div class="row" id="doc-wrapper">`;
|
||||
var customizationAppShellEnd = `</div></div>`;
|
||||
|
||||
var customizationAppSidebarStart = `<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label>`;
|
||||
var customizationAppSidebarEnd = `</nav>`;
|
||||
|
||||
var customizationMainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content">`;
|
||||
var customizationMainEnd = `<footer><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>. Flavor generation powered by <a href="http://sass.js.org/" target="_blank">Sass.js</a> and <a href="https://stuk.github.io/jszip/" target="_blank">JSZip</a>.</p></footer></main>`;
|
||||
|
||||
var customizationFragments = custFragments.map(f => buildCustomizationFragment(f)).join('<br/>');
|
||||
var customizationLinks = [buildLink(custFragments[0]), buildLink(custFragments[1]), '<hr style="padding:0;"/>', ...custFragments[2].sections.map(f => buildLink(f))].join('');
|
||||
|
||||
function buildCustomizationFragment(fragment){
|
||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||
<h2 class="section double-padded">${fragment.title}</h2>${fragment.content}
|
||||
</div>`;
|
||||
return fragmentHtml;
|
||||
}
|
||||
|
||||
fs.writeFile(custOutputPath,
|
||||
`${customizationStart}${customizationAppShellStart}
|
||||
${customizationAppSidebarStart}${customizationLinks}${customizationAppSidebarEnd}
|
||||
${customizationMainStart}${customizationFragments}${customizationMainEnd}
|
||||
${customizationAppShellEnd}
|
||||
${customizationEnd}`,
|
||||
function(err) { if(err) return console.log(err); console.log("Flavors file generated!"); }
|
||||
);
|
||||
|
||||
var miniSassFiles = ['_contextual_mixins', '_contextual', '_core', '_icon', '_input_control_mixins', '_input_control', '_layout_mixins', '_layout', '_navigation', '_progress_mixins', '_progress', '_table', '_utility'];
|
||||
|
||||
miniSassFiles.forEach(f => fs.createReadStream(`./src/mini/${f}.scss`).pipe(fs.createWriteStream(`./docs/mini/${f}.scss`)));
|
||||
|
||||
var flavorFiles = ['mini-default', 'mini-dark', 'mini-nord'];
|
||||
|
||||
flavorFiles.forEach(f => {
|
||||
fs.createReadStream(`./src/flavors/${f}.scss`).pipe(fs.createWriteStream(`./docs/flavorFiles/${f}.scss`));
|
||||
fs.createReadStream(`./dist/${f}.css`).pipe(fs.createWriteStream(`./docs/flavorFiles/${f}.css`));
|
||||
fs.createReadStream(`./dist/${f}.min.css`).pipe(fs.createWriteStream(`./docs/flavorFiles/${f}.min.css`));
|
||||
});
|
||||
11
docs/doc-fragments/premadeFlavors.js
Normal file
11
docs/doc-fragments/premadeFlavors.js
Normal file
@@ -0,0 +1,11 @@
|
||||
var version = require('../vinf').version;
|
||||
module.exports = {
|
||||
id: 'prebuilt-flavors',
|
||||
title: 'Prebuilt flavors',
|
||||
content: `<div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
|
||||
<ul>
|
||||
<li>Default: <a href="flavorFiles/mini-default.scss" download>SCSS file</a> - <a href="flavorFiles/mini-default.css" download>CSS file</a> - <a href="flavorFiles/mini-default.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Dark: <a href="flavorFiles/mini-dark.scss" download>SCSS file</a> - <a href="flavorFiles/mini-dark.css" download>CSS file</a> - <a href="flavorFiles/mini-dark.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Nord: <a href="flavorFiles/mini-nord.scss" download>SCSS file</a> - <a href="flavorFiles/mini-nord.css" download>CSS file</a> - <a href="flavorFiles/mini-nord.min.css" download>CSS file (minified)</a></li>
|
||||
</ul></div>`
|
||||
}
|
||||
189
docs/index.html
189
docs/index.html
@@ -1,6 +1,8 @@
|
||||
<!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 rel="stylesheet" href="mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
@@ -12,194 +14,7 @@
|
||||
<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">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
|
||||
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
|
||||
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
|
||||
#top-vtag-cont { width: 100%; text-align: center; }
|
||||
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
|
||||
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
|
||||
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
|
||||
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
|
||||
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
|
||||
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
|
||||
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
|
||||
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
|
||||
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
|
||||
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
|
||||
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
|
||||
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
|
||||
@media screen and (max-width: 767px) {
|
||||
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
|
||||
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
|
||||
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
|
||||
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
|
||||
#mt3 { right: 26.625vw; border-left: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
|
||||
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
|
||||
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
|
||||
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
|
||||
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
|
||||
#mt5:after { left: -13.5vw; border-left: 13.5vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
|
||||
}
|
||||
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
|
||||
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
|
||||
.box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
|
||||
justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
|
||||
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="logo-body">
|
||||
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
|
||||
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
|
||||
<p id="top-vtag-cont"><mark id="top-version-tag">v2.3</mark></p>
|
||||
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
|
||||
<small id="codename">Fermion</small>
|
||||
</div>
|
||||
<header class="sticky">
|
||||
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
|
||||
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> GitHub</a>
|
||||
</header>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container responsive-padding">
|
||||
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1 row">
|
||||
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Minimal<small>Size matters!</small></h2><br/>
|
||||
<img src="icons/wings.svg" width="96px" height="96px"/><br/><br/>
|
||||
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Responsive<small>Think mobile!</small></h2><br/>
|
||||
<img src="icons/bacteria.svg" width="96px" height="96px"/><br/><br/>
|
||||
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg-offset-0 box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br/>
|
||||
<img src="icons/meteor.svg" width="96px" height="96px"/><br/><br/>
|
||||
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h2>Setup & usage</h2>
|
||||
<p style="text-align:justify"><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
</div>
|
||||
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
|
||||
<br/>
|
||||
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.7/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<h2>Browser support</h2>
|
||||
<div class="row" style="padding: 0.5rem;">
|
||||
<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>12</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>28</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>26</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>7.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>17</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>4.4</h3></div>
|
||||
</div></div> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<p style="padding-top: 1rem; padding-bottom: 1rem; text-align: justify"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark> Due to the way <strong>mini.css</strong> is designed, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers such as Internet Explorer will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
|
||||
<br/>
|
||||
<h3>Why should I use mini.css?</h3>
|
||||
<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
|
||||
<p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
|
||||
<br/>
|
||||
<h3>What exactly does mini.css provide?</h3>
|
||||
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
|
||||
<ul>
|
||||
<li><a href="core">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
|
||||
<li><a href="grid">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
|
||||
<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
|
||||
<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
|
||||
<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
|
||||
<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
|
||||
<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
|
||||
<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
|
||||
<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
|
||||
<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
|
||||
</ul>
|
||||
<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
|
||||
<br/>
|
||||
<h3>How do I customize mini.css?</h3>
|
||||
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization">customization</a> section.</p><br/>
|
||||
</div>
|
||||
<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
|
||||
<div class="card fluid" style=" width: 100%;">
|
||||
<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
|
||||
<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on GitHub.<br/> It means a lot to us and it only takes a couple of seconds!</p>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i> Star mini.css</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 60px;">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h2>Getting started</h2>
|
||||
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
|
||||
<ul>
|
||||
<li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
|
||||
<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
|
||||
<li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
|
||||
<ol>
|
||||
<li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
|
||||
<li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
|
||||
<li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
|
||||
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React & Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
|
||||
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>
|
||||
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
|
||||
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">GitHub repository</a> to find out more.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">GitHub</a>.<br/>
|
||||
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="mini-default.min.css">
|
||||
@@ -33,7 +33,7 @@
|
||||
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
|
||||
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> GitHub</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
@@ -384,6 +384,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">GitHub</a>.</footer>
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -1,11 +1,205 @@
|
||||
<!DOCTYPE html><html><head>
|
||||
<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="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">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
|
||||
</head></html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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 - Minimal, responsive, style-agnostic CSS framework">
|
||||
<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">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
|
||||
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
|
||||
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
|
||||
#top-vtag-cont { width: 100%; text-align: center; }
|
||||
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
|
||||
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
|
||||
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
|
||||
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
|
||||
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
|
||||
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
|
||||
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
|
||||
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
|
||||
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
|
||||
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
|
||||
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
|
||||
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
|
||||
@media screen and (max-width: 767px) {
|
||||
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
|
||||
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
|
||||
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
|
||||
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
|
||||
#mt3 { right: 26.625vw; border-left: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
|
||||
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
|
||||
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
|
||||
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
|
||||
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
|
||||
#mt5:after { left: -13.5vw; border-left: 13.5vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
|
||||
}
|
||||
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
|
||||
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
|
||||
.box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
|
||||
justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
|
||||
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="logo-body">
|
||||
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
|
||||
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
|
||||
<p id="top-vtag-cont"><mark id="top-version-tag">v2.3</mark></p>
|
||||
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
|
||||
<small id="codename">Fermion</small>
|
||||
</div>
|
||||
<header class="sticky">
|
||||
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
|
||||
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</header>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container responsive-padding">
|
||||
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1 row">
|
||||
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Minimal<small>Size matters!</small></h2><br/>
|
||||
<img src="icons/wings.svg" width="96px" height="96px"/><br/><br/>
|
||||
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Responsive<small>Think mobile!</small></h2><br/>
|
||||
<img src="icons/bacteria.svg" width="96px" height="96px"/><br/><br/>
|
||||
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg-offset-0 box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br/>
|
||||
<img src="icons/meteor.svg" width="96px" height="96px"/><br/><br/>
|
||||
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h2>Setup & usage</h2>
|
||||
<p style="text-align:justify"><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
</div>
|
||||
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
|
||||
<br/>
|
||||
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<h2>Browser support</h2>
|
||||
<div class="row" style="padding: 0.5rem;">
|
||||
<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>12</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>28</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>26</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>7.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>17</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>4.4</h3></div>
|
||||
</div></div> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<p style="padding-top: 1rem; padding-bottom: 1rem; text-align: justify"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark> Due to the way <strong>mini.css</strong> is designed, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers such as Internet Explorer will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
|
||||
<br/>
|
||||
<h3>Why should I use mini.css?</h3>
|
||||
<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
|
||||
<p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
|
||||
<br/>
|
||||
<h3>What exactly does mini.css provide?</h3>
|
||||
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
|
||||
<ul>
|
||||
<li><a href="core">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
|
||||
<li><a href="grid">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
|
||||
<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
|
||||
<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
|
||||
<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
|
||||
<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
|
||||
<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
|
||||
<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
|
||||
<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
|
||||
<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
|
||||
</ul>
|
||||
<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
|
||||
<br/>
|
||||
<h3>How do I customize mini.css?</h3>
|
||||
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization">customization</a> section.</p><br/>
|
||||
</div>
|
||||
<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
|
||||
<div class="card fluid" style=" width: 100%;">
|
||||
<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
|
||||
<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i> Star mini.css</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 60px;">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h2>Getting started</h2>
|
||||
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
|
||||
<ul>
|
||||
<li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
|
||||
<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
|
||||
<li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
|
||||
<ol>
|
||||
<li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
|
||||
<li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
|
||||
<li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
|
||||
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React & Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
|
||||
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>
|
||||
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
|
||||
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
|
||||
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
2639
docs/v2/quick_reference.html
Normal file
2639
docs/v2/quick_reference.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,14 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>mini.css - React and Preact Libraries</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="keywords" content="mini, mini.css, CSS, framework, react, preact ">
|
||||
<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/react-mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/react-mini.css/">
|
||||
</head>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>mini.css - React and Preact Libraries</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="keywords" content="mini, mini.css, CSS, framework, react, preact ">
|
||||
<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/react-mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/react-mini.css/">
|
||||
</head>
|
||||
@@ -1,7 +1,5 @@
|
||||
# mini.css v3 (Gluon) Development Log
|
||||
|
||||
# v3.0.0-alpha.1
|
||||
|
||||
## 20171011
|
||||
|
||||
- Moved all WIP to `gluon` branch, seems like the right choice.
|
||||
@@ -18,294 +16,3 @@
|
||||
- Removed fix for `svg:not(:root)`, as it was IE-based.
|
||||
- Completely removed the `dfn` fix, as it's a rarely (if ever) used element and it targets an older version of Android, meaning it's not a really meaningful fix to anyone.
|
||||
- Stopped right before the headings, these will be updated and built next time.
|
||||
|
||||
## 20171015
|
||||
|
||||
- Cleaned up `docs` folder to be able to cherry pick into `master` branch for the new version documentation.
|
||||
- Built up the heading elements (`h1` - `h6`), using CSS variables (`--heading-ratio` for universal heading ratio scaling).
|
||||
- Added `--secondary-fore-color` for things like `small` in `h1`, which is set to `#424242`. Avoided using the term `--fore-color-lighter` as it could cause ambiguity in reverse-color-palette flavors.
|
||||
- `small` elements in headings are now by defauly displayed in blocks. I haven't seen many use cases for the old style and the codebase could use the cleanup, so there's that.
|
||||
|
||||
## 20171018
|
||||
|
||||
- Added universal margin variable `--universal-margin` for an easy way to align content and elements.
|
||||
- Converted all hardcoded CSS variable names to SCSS variables that are then converted into the final variables. This will allow for an extra layer of customization and help alleviate conflict problems (also allows for code minification in tiny flavor files that require variables names with simpler names).
|
||||
- Added styling for `p`, `ol` and `ul`, used universal margin and applied its double to the `padding-left` of the lists, so that it is reasonably consistent. Hope this wasn't a mistake.
|
||||
- Removed the `overflow: visible;` fix that was applied to `hr` for IE (legacy).
|
||||
- The old *fancy style* of `hr` is now the default and only styling choice. Seems easier that way. Manual tweaking can resolve this for certain flavors.
|
||||
- Added `--border-color` to use for universal border colors.
|
||||
- Applied a new gradient style to `hr`, one that uses `transparent` and the `--border-color`. Hopefully, it works as expected.
|
||||
- Completely remodelled the `blockquote` element, using CSS variables, a cleaner styling and some extra tricks. It should now behave better when there is no `[cite]` attribute present, improving presentation.
|
||||
- After a couple hours of research on web safe monospaced fonts and fonts that are actually up-to-date, a cup of coffe and a terrible headache, I ended up with the shortest possible `font-family` native font stack for monospaced fonts for `code, pre, kbd`. The only useful article was [this](https://www.client9.com/css-system-font-stack---monospace-v1/), due to the fact that it was posted in the last year. Honestly, the last version used just `monospace`, worst-case scenario there is no improvement whatsoever, but at least I tried. Preliminary results show that this looks pretty decent on Windows.
|
||||
- `box-shadow` has been dropped entirely for now, it will be added at a later time during a later alpha. For now, I want a quick and dirty solution for the most part.
|
||||
- Quick and dirty `code` and `kbd` element implementation, tweaks might be required later down the line.
|
||||
- `pre` element styling now has a sidebar by default and uses a CSS variable for this.
|
||||
- `samp` element styling removed (at least for now).
|
||||
- Tested and debugged code up to this point.
|
||||
|
||||
## 20171019
|
||||
|
||||
- Added styling for `small, sub, sup`. Their `font-size` is now tied to one variable for consistency.
|
||||
- Styled links, quite simplified but should be easier to work with for now.
|
||||
- Added styling for `figcaption`, tied color and size to `small`'s size for consistency.
|
||||
- The revamped `core` module seems to be about `200bytes` heavier than the old one, but certain things will probably be optimized over time.
|
||||
|
||||
## 20171020
|
||||
|
||||
- Merged PR #105, upgrading aesthetics.
|
||||
|
||||
## 20171021
|
||||
|
||||
- Started working on the **Gluon** website, just to get a taste for what it will look like and get some feedback.
|
||||
- *TODO* Retake picture after the splash has been tweaked, right before release.
|
||||
- Tweaked the splash screen, looks a bit better now and is easier to read.
|
||||
- Reverted the `hr` fix, as it caused problems.
|
||||
- Moved some of the documentation from the old website to the `/docs/v3` website.
|
||||
|
||||
## 20171024
|
||||
|
||||
- Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size.
|
||||
- Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`.
|
||||
- Removed legacy support for prefixed flexbox (`-webkit-`), trimmed off another `91bytes`.
|
||||
- Improved indentation for `grid` module, now that prefixed code is gone.
|
||||
|
||||
## 20171025
|
||||
|
||||
- Improved the `grid` module by creating a simple `@mixin` to generate each grid step. Complexity is significantly lower now.
|
||||
- Properly configured the `grid` module for defaults, without anything stored in CSS variables it now weighs a nice `750bytes`. This will probably grow ever so slightly as soon as I get to add CSS variables.
|
||||
- Started using variables in `grid`, namely `--universal-padding`. Size increased only by `26bytes`.
|
||||
- Made `$_include-parent-layout` a hidden variable in `grid`.
|
||||
- Added scaffolding code in `grid` module, just in case someone decides to use it without any other modules.
|
||||
- Oddly enough, a flavor file with the default values and clean code is `1.82KB` gzipped, compared to `1.83KB` gzipped in **Fermion**, which means the variables and changes didn't really mess up size so far. Some changes need to be made and some things added, so it's quite probable that this will not be the final number, but still I am very happy about the results so far.
|
||||
|
||||
## 20171027
|
||||
|
||||
- Changed a lot of the layout and choices made in the `index.html` page, mainly to create a better and more coherent landing page.
|
||||
- Designed and added `responsive.svg`.
|
||||
- Created the responsiveness and speed section.
|
||||
- Created tailored section.
|
||||
- Landing page is mostly complete, footer and some minor changes are missing, I can start working on the rest of the docs now.
|
||||
|
||||
## 20171106
|
||||
|
||||
- Scraped the old website to get content for new documentation.
|
||||
- Started development of the new website app in `v3_dev`. This is going to be where the docs app is going to be created in.
|
||||
- Initial scaffolding of the documentation UI.
|
||||
- Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future.
|
||||
- Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
|
||||
- Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.
|
||||
- `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering.
|
||||
|
||||
## 20171107
|
||||
|
||||
- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before.
|
||||
- Copied over the fix for `number` `input`s, still valid.
|
||||
- Removed the `textarea` fix, as it only applies to IE.
|
||||
- Copied over fixes for `search` elements, as they seem to apply to modern browsers.
|
||||
- Used CSS variables for most of the form `input` custmization, these should be easy to change.
|
||||
- Replaced old `::placeholder` definitions with `:placeholder-shown` for most browsers, kept the `-ms-` prefixed one for Edge. Using `:placeholder-shown` is following the latest standards, it has a high implementation rate, does not conflict with the browser support **Gluon** is targeting and, if it does not work, the code will default to what browsers usually do, which is pretty much what I am doing, too. It also simplifies the code a bit. `::-ms-placeholder` simulates the default behavior, so all browsers should get a similar styling.
|
||||
- Copied over all the fixes for `button` and similar elements, as they were up-to-date.
|
||||
- Created proper variables for `button`-like elements, built element syling on CSS variables.
|
||||
- Tested CSS variables for button, should allow for easy customization and additional styles, meaning it will be a breeze to add all the extra stuff as soon as possible.
|
||||
- Bundled up `[disabled]` styling for all elements in `input_control` as this should now be the default behavior of the code.
|
||||
- Dealt with #114. It shouldn't be a problem anymore.
|
||||
- Added mixins for `button` elements in `input_control`. They should now be perfectly usable.
|
||||
- Removed `header` `display` fix as it was targeting IE 9-.
|
||||
- Implemented `header` and links/buttons in it, `logo` is still missing.
|
||||
- Implemented `.sticky` for all `navigation` elements that needed it.
|
||||
|
||||
## 20171108
|
||||
|
||||
- Started debugging the extremely problematic `header` `.button`s. Figured out that `line-height: 2.4375` can fix the issue, no clue why that is, but I am going to use it for a little while.
|
||||
- Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**.
|
||||
- Figured out the `line-height` thing for the afforementioned elements.
|
||||
- Styled `.logo` in `header`. The styling is now far simpler and easier to use.
|
||||
- Removed `display:block` fix from `nav` as it was targeting IE 9-.
|
||||
- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.
|
||||
- Rebuilt `.drawer`, breaking changes in the old code, but managable as far as I can tell.
|
||||
- `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*).
|
||||
- `footer` `display:block` fix removed - IE 9-.
|
||||
- `footer` rebuilt, pretty similar to the last iteration, except for colors.
|
||||
|
||||
## 20171109
|
||||
|
||||
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
|
||||
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
|
||||
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
|
||||
|
||||
## 20171112
|
||||
|
||||
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
|
||||
- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
|
||||
|
||||
## 20171113
|
||||
|
||||
- Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
|
||||
- Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
|
||||
- Added external Sass variables to all modules (hopefully I didn't miss any), so that they can be used on their own now (not recommended, but doable).
|
||||
- Updated color palettes that should have better contrasts (slight deviation from the old ones, but this might change before release).
|
||||
- Added all necessary variants for `.button`-like elements.
|
||||
- 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.
|
||||
|
||||
## 20171115
|
||||
|
||||
- Documented headings.
|
||||
- Documented code and quotations.
|
||||
- Documented lists.
|
||||
- Documented images.
|
||||
- Added `margin` to `figcaption` elements to reset the browser defaults.
|
||||
|
||||
## 20171116
|
||||
|
||||
- Updated `layout` to make sure everything is bug-free. The `grid` in particular is not very friendly lately.
|
||||
- Fixed a couple of bugs in `input_control` as well.
|
||||
- Improved the build script to actually render the `modifiers` section, it should be complete now, I think.
|
||||
- Documented `grid`. The whole old module has been merged into one long card with all the information readily available. Hopefully it's less complicated now.
|
||||
- Changed the color of `main` in the documentation to help the cards pop out a little bit more.
|
||||
|
||||
## 20171117
|
||||
|
||||
- Documented `card` and `card section` to complete the `layout` module's docs.
|
||||
- Altered the `dark` section colors, didn't really like them.
|
||||
- Cleaned up certain parts of the docs just a little bit.
|
||||
|
||||
## 20171118
|
||||
- Documented `button` elements and input grouping.
|
||||
- Documented `header`, `footer` and `nav`.
|
||||
|
||||
## 20171119
|
||||
|
||||
- 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.
|
||||
|
||||
# v3.0.0-alpha.2
|
||||
|
||||
## 20171120
|
||||
|
||||
- Updated `.drawer` documentation to include customization.
|
||||
- Recompiled default flavor just in case.
|
||||
- Fixed the devlog showing wrong dates. **Hugging cat** was at it again, it seems!
|
||||
- Unleashed the first **Gluon** alpha unto the world!
|
||||
|
||||
## 20171204
|
||||
|
||||
- Started working on `contextual` module.
|
||||
- Removed the `margin` property from `mark` elements, it seemed particularly irrelevant, provided they are usually inlined inside text. This can be added manually now, but I don't think nobody will have a use for it.
|
||||
- Removed `border` styling from `mark` elements, it also seemed reasonably irrelevant. Easy to add, generic borders will help here, when I add them back in `utility`.
|
||||
- Slightly altered `inline-block` version of `mark` to match the styling of the rest of the elements.
|
||||
- Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version.
|
||||
- Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants.
|
||||
- Fed **hugging cat**.
|
||||
|
||||
## 20171208
|
||||
|
||||
- Added `tooltip` and `toast`. Their mixins were rarely ever used as far as I can tell, so they will not make into **Gluon**, at least for now. If the need arises, they can be easily added back in at a later date.
|
||||
- Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on.
|
||||
- Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in?
|
||||
- I am removing `-webkit-transform`, it seems unnecessary now.
|
||||
|
||||
## 20171211
|
||||
|
||||
- Added `.modal` component. Breaking changes to comply with the new guidelines (i.e. apply the class on the `checkbox` element, not the element after it, much like `.drawer`). Cleaned up a little bit, dealt with a few problems here and there. Custom styling for the `.modal-close`, not bound to anything else.
|
||||
- Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them.
|
||||
- **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it.
|
||||
- Moved component-specific variable definitions in `contextual` under the related conditionals.
|
||||
- Documented `mark` elements.
|
||||
- Fixed a broken link in `index.html`.
|
||||
- Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
|
||||
- Documented `.toast` messages.
|
||||
|
||||
## 20171217
|
||||
|
||||
- Documented `.tooltip`.
|
||||
|
||||
## 20171228
|
||||
|
||||
- Documented `.modal`.
|
||||
- Documented `.collapse`.
|
||||
|
||||
## 20171229
|
||||
|
||||
- Coded `progress` module. Everything is pretty much the same as before.
|
||||
- Renamed `.spinner-donut` to `.spinner`.
|
||||
- Added a default variant to `progress` and `.spinner`, so that we can have `.primary`, `.secondary` and `.tertiary`.
|
||||
- Added alternative color mixins for `progress` and `.spinner`.
|
||||
- Removed size variants and the inline variant mixin from `progress` and `.spinner`.
|
||||
- Updated flavor file with the `progress` module and mixed-in variants.
|
||||
|
||||
## 20171230
|
||||
|
||||
- Documented `progress` element.
|
||||
- Documented `spinner` component.
|
||||
|
||||
## 20180102
|
||||
|
||||
- Started working on `table` module. Tables are now scrollable by default.
|
||||
- Coded desktop view for `table`, no `@media` queries in there yet, but there will be more sooner rather than later.
|
||||
- Added mobile view for tables, fully functional, no problems, still missing `.horizontal` and `.striped` (also `.hoverable` ?) and variablization.
|
||||
|
||||
## 20180103
|
||||
|
||||
- Added `.horizontal` `table` elements, optimized for minimal size. Some variables are missing and unset but overall both normal and `.horizontal` tables should work properly now on desktop as well as on mobile.
|
||||
|
||||
## 20180108
|
||||
|
||||
- Updated tables, variables cleanup.
|
||||
- Added `.striped` and `.hoverable` `table` styles.
|
||||
- Documented `table` module.
|
||||
|
||||
## 20180115
|
||||
|
||||
- Updated menus to not include a dead `blog` link no more. Sorry, **hugging cat**!
|
||||
- Updated tag for `v3.0.0-alpha.2`.
|
||||
- Released the new alpha.
|
||||
|
||||
# v3.0.0-alpha.3
|
||||
|
||||
## 20180116
|
||||
|
||||
- Started working on `utility` module.
|
||||
- Moved all old mixins from `utility_mixins` to the base `utility` module.
|
||||
- Removed `close`, `breadcrumbs` and legacy utility helper classes.
|
||||
- Everything including `utility` module, but no icons is `6.75KB`, which is quite good, considering everything.
|
||||
|
||||
## 20180122
|
||||
|
||||
- Started implementing the `icon` module. Made some changes in the icon set (removed `x` and `menu`, added `phone` and `rss`).
|
||||
- Due to decisions on using `filter: invert(100)` for icon coloring, the minimum supported version of Firefox will now be `35` instead of `31`.
|
||||
- Added all icons.
|
||||
- Added `.inverse` and `.secondary` filters for icons.
|
||||
- Total size with icons is `8.17KB` gzipped.
|
||||
|
||||
## 20180123
|
||||
|
||||
- Updated `icon` module to have the variables definitions in comments (in case of standalone use).
|
||||
- Documented `icon` module in its entirety and retested everything. It's all good.
|
||||
|
||||
## 20180129
|
||||
|
||||
- Documented visibility helpers.
|
||||
- Documented element decorators.
|
||||
- Documented responsive spacing and sizing modifiers.
|
||||
- Updated version info to `v3.0.0-alpha.3`, soon ready to be released as the final alpha.
|
||||
|
||||
## 20180201
|
||||
|
||||
- Prepared everything for `v3.0.0-alpha.3`.
|
||||
- Released the new alpha.
|
||||
|
||||
@@ -1,63 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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">
|
||||
<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">v3.0.0-alpha.3</p>
|
||||
<a class="button splash" href="docs">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> 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> 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> Flavors</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>
|
||||
<!DOCTYPE html><html><head>
|
||||
<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="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">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
|
||||
</head></html>
|
||||
|
||||
Reference in New Issue
Block a user