endive-scss/README.md

Simplistic SCSS framework to assist in rapid front-end development

# endive #
Simplistic SCSS framework to assist in rapid front-end development

### Features ###
* Light-weight
* Add new classes easily with mixins
* Unified variables file
* Gulp-ready
* Easy to pick and choose components you want

The framework is broken up into two folders, **/mixins** and **/partials**. The classes and styles are created in /partials, which utilize the matching file in /mixins.

### Examples ###
Endive uses mixins to build a lot of the default classes included in the framework. For example, let's take a look at the primary button class **.button.button-primary** built with the following mixin:

    @include make-button('primary', $color-primary);

This yields a button with the additional class .button-primary and a background with the color stored in the $color-primary variable. The full mixin parameters are:

    @mixin make-button(
        $title,
        $background,
        $color: $button-color,
        $padding: $button-padding,
        $font-size: $button-font-size
    ) {}

As you can see, the $title and $background attributes are the only ones required by the mixin, the others pull in default values stores in the main **base/_variables.scss** file.

For responsive development, this framework is built mobile-first. All attributes start off as mobile-facing and as the screen size is scaled up, are changed accordingly. Utilize the following mixin to adjust styles depending on screen size:

    .some-class {
        width: 100%; /* Mobile width */

        @include make-scale($breakpoint-medium) {
            width: 720px; /* Tablet width */
        }
    }

The default breakpoints, stored in the **_variables.scss** file, are as follows:

    $breakpoint-small: 480px;
    $breakpoint-medium: 768px;
    $breakpoint-large: 1024px;
    $breakpoint-xlarge: 1200px;

### Usage ###
You can include endive in your project by cloning the repo directly into your project and running **gulp** from the root project directory. This will compile the main endive.scss file and dump *endive.css* and a minified *endive.min.css* file into the build directory.

Alternatively you can run **npm install endive-scss** which will add the project to **node_modules/endive-scss**, at which point you can reference either the pre-built CSS files or endive.scss to add to your current project.