Cherry-css
The goal of this css util is to provide a small css bundle that contains everything you need for the begining. You can enable optional dependencies (subtasks) each of which brings it benefits.
How to use
npm i cherry-css
In your JS file do:
require.
Util has it default config you can override by your own. Default config looks next:
out_bundle: './cherry_bundle.css' no_log: false subtasks: font_awesome: /* subtask config */ cherry: /* subtask config */ normalize: /* subtask config */
out_bundle
- path to output bundle cssno_log
- turn the logs
Subtasks
cherry
Small SASS lib that brings you such classes as:
- mobile first responsive grid
.xs-1
.md-2
.hg-6
.
- mobile first hide / show
.hide-xs
.show-md
.hide-sm
- move left/right
.move-right-6
.move-left-1
- add padding / margin
.m-r-5
p-b-30
p-a-15
top/right/bottom/left/all
- css grid
.col-start-6
.row-end-10
- mixins, common classes. More info will be added in future. Explore cherry-css/source/sass-source/core for now
SASS lib can be easily configured, You can define output classes or turn them off. This is SASS config you can redefine using the same variable's name somewhere in your own SASS file. Just specify pass to this SASS file using user_vars_path
in a passed config.
//where key is a class name part and value is @media min-width
JS config looks next:
subtasks: cherry: enabled: true out_sass: '' user_vars_path: ''
out_sass
- creates concatenated SASS file provided by cherry subtask. path/filenameuser_vars_path
- path/filename to redefined variables
Font Awesome
You can specify font types, icons, help classes you need in your project and as result you get processed version of font-awesome which has only icons you specified. Also processed fonts like woff, woff2, ttf, eot, svg will be much more lighter. JS config looks next:
subtasks: font_awesome: enabled: true font_dest: './' css_font_src: '' font_types: 'woff' icons: 'taxi' help_classes: 'lg' '2x' '3x' '4x' '5x' 'fw' 'border'
font_dest
- fonts output dirnamecss_font_src
- by default it's relative path betweenout_bundle
andfont_dest
, but you can specify more preciselyfont_types
- array of font types you will get after font-awesome will be processedicons
- array of font-awesome icons (http://fontawesome.io/icons)help_classes
- array of font-awesome help classes
normalize
It just adds normalize to the output_bundle. Look at this for more info https://github.com/necolas/normalize.css/
subtasks: normalize: enabled: true