0.1.6 • Published 6 years ago
fruitcss v0.1.6
🍉 fruitcss
Easy to digest, responsive utility classes.
Why?
This sucks:
<h1 class="d-inline-block mb-0 mb-sm-1 mb-lg-3 text-center text-lg-left text-xl-right">Hard to read; bloated</h1>
This doesn't suck so much:
<h1 class="d(inline-block) mb(0.1..3) text(center...left.right)">Ahhhh!! Much better 😎</h1>
Quick start
Install fruitcss as a dev dependency.
npm i -D fruitcss
Supply fruitcss functions to your SCSS files with the node-sass CLI functions flag.
node-sass --functions node_modules/fruitcss/js/functions <input> [output]
Import fruitcss at the top of your main SCSS file.
@import "node_modules/fruitcss/scss/fruitcss";
Note: Utilities won't compile unless and until added to your markup 👍
Configuration
By default, fruitcss will troll through your entire project's HTML for utility classes. You may want to configure this to search the contents of only certain directories and/or filetypes.
You can do this by adding a config file in your project's root directory.
// fruitcss.config.js
module.exports = {
markup: ['templates/**/*.twig'] // Accepts an array of glob files
}