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('cherry-css')({
        // overwrite default config 
    }).then(() => console.log('done'))

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 css
• no_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.

$_C_media_value_map: (xs: 320px, sm: 480px, md: 767px, lg: 992px, hg: 1200px) 
//where key is a class name part and value is @media min-width

$_C_grid_columns: 12    // set 1 to turn it off
$_C_add_hide-show: true

$_C_add_move: true    

$_C_padding_values: 5 10 15 20 30 40      // set false to turn it off
$_C_margin_values: 5 10 15 20 30 40

$_C_max_grid_cols: 7    // set 1 to turn it off
$_C_max_grid_rows: 7

JS config looks next:

subtasks: {
    cherry: {
        enabled: true,
        out_sass: '',
        user_vars_path: ''
    }
}

• out_sass - creates concatenated SASS file provided by cherry subtask. path/filename
• user_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 dirname
• css_font_src - by default it's relative path between out_bundle and font_dest, but you can specify more precisely
• font_types - array of font types you will get after font-awesome will be processed
• icons - 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
        }
    }