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 = ` mini.css - Minimal, responsive, style-agnostic CSS framework

mini.css

minimal, responsive, style-agnostic
CSS framework

${version.version}

Get started
 Docs  Github  Flavors

Fast and Responsive


Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then mini.css is the right tool for you! Its tiny size (under 10KB gzipped), along with its responsive grid 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), mini.css 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.

Tailored to Your Needs


Creating a CSS framework that caters to everyone's needs is no easy task, but mini.css 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 flavors 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!

Get started now!


Head over to the documentation to learn how to get started using mini.css, 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!

Get started

mini.css on Github
`; 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 = ` Powered by Feather`; var documentStart = ` mini.css - Docs `; var documentEnd = ``; var appShellStart = `
 Github  Flavors
`; var appShellEnd = `
`; var appSidebarStart = ` `; var mainStart = `
`; var mainEnd = `
`; var documentationFragments = docFragments.map(f => buildFragment(f)).join('
'); var documentationLinks = docFragments.map(f => buildLink(f)).join(''); var documentationSearch = ` `; function buildFragment(fragment){ var fragmentHtml = `

${fragment.title}

${fragment.id === 'icons'?FEATHER_BANNER:''}
${fragment.description}
${fragment.example?`

Example

${fragment.example}
`:''} ${fragment.samples.length?`

Sample code

${fragment.samples.join('')}
`:''} ${fragment.modifiers.length? `

Modifiers

${fragment.modifiers.map(m => `

${m.title}

${m.description}${m.example?`
Example
${m.example}`:''}${m.samples.length?`
Sample code
${m.samples.join('')}`:''}`).join('
')}
`:''} ${fragment.dos.length||fragment.donts.length? `

Best practices

${[fragment.dos.map(d => `
${d.sample}

Do: ${d.description}

`).join('
'),fragment.donts.map(d => `
${d.sample}

Don't: ${d.description}

`).join('
')].join('')}
` :''} ${fragment.notes.length?`

Notes

`:''} ${fragment.customization.length?`

Customization

`:''}
`; return fragmentHtml; } function buildLink(fragment){ return `${fragment.title}`; } 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 = ` mini.css - Flavors `; var customizationEnd = ``; var customizationAppShellStart = `
 Github  Docs
`; var customizationAppShellEnd = `
`; var customizationAppSidebarStart = ` `; var customizationMainStart = `
`; var customizationMainEnd = `
`; var customizationFragments = custFragments.map(f => buildCustomizationFragment(f)).join('
'); var customizationLinks = [buildLink(custFragments[0]), buildLink(custFragments[1]), '
', ...custFragments[2].sections.map(f => buildLink(f))].join(''); function buildCustomizationFragment(fragment){ var fragmentHtml = `

${fragment.title}

${fragment.content}
`; 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`)); });