Introduction

Install

This repository is distributed with NPM. After installing NPM, you can install Cherry CSS via:

npm install --save cherry

Version

^1.0 has been rewritten to use Dart SASS
^0.1 uses node-sass

Usage

After installation, you can then import the SCSS into your project sourcing from your node_modules directory:

@import "../node_modules/cherry/cherry.scss";

// Or to modify the SASS variables, import like so

@import "../node_modules/cherry/scss/variables.scss";
// Your variable definitions here
// e.g. $primary: blue;
@import "../node_modules/cherry/cherry.scss";

Browser Support

Cherry uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Cherry is compatible with recent versions of:

Chrome
Edge
Explorer 10+ (partially supported)
Firefox
Opera
Safari

Changes v1.0.3

The toggle styling has changed
styling variables for checkboxes and radios have changed

Changed form variables

$forms: (
  "variable-color" // defaulted to `darken("input-background"), 12%`, this is now transparent
)

Removed form variables

$forms: (
  // Checkbox/radio
  "checkbox-border-width" // renamed to "variable-border-width"
  "checkbox-border-radius" // renamed to "variable-border-radius"
  "checkbox-font-family" // renamed to "variable-font-family"
  "checkbox-font-size" // renamed to "variable-font-size"
  "checkbox-font-weight" // renamed to "variable-font-weight"
  "checkbox-letter-spacing" // renamed to "variable-letter-spacing"
  "checkbox-text-transform" // renamed to "variable-text-transform"
  "checkbox-padding-left" // renamed to "variable-padding-left"
  "checkbox-padding-right" // renamed to "variable-padding-right"
)

Added form variables

$forms: (
  // Toggle/Checkbox/Radio
  "variable-color--active":        map-get($form, "variable-color--active")
  "variable-background":           map-get($form, "variable-background"),
  "variable-background--active":   map-get($form, "variable-background--active"),
  "variable-border-color":         map-get($form, "variable-border-color"),
  "variable-border-color--active": map-get($form, "variable-border-color--active"),
  // Checkbox 
  "checkbox-stroke-width":         8,
  // Toggle
  "toggle-inner-space":            4px,
  "toggle-color":                  map-get($form, "variable-border-color")
  "toggle-color--active":          map-get($form, "variable-color--active")
  "toggle-background":             map-get($form, "variable-background")
  "toggle-background--active":     map-get($form, "variable-background--active")
  "toggle-border-color":           map-get($form, "variable-border-color")
  "toggle-border-color--active":   map-get($form, "variable-border-color--active")
  "toggle-border-width":           map-get($form, "variable-border-width")
)

Special Thanks

Willy Blandin The Bulma Project