# ditmer-embla

## Getting Started
If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
npm install ditmer-embla --save-dev
```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js
grunt.loadNpmTasks('ditmer-embla');
```

## The "ditmer_embla" task

### Overview
In your project's Gruntfile, add a section named `ditmer_embla` to the grunt configuration. You're also required to add a `getGruntConfigCallback` section, which is a callback to retreive your grunt config.

```js
grunt.initConfig(getGruntConfig());

function getGruntConfig() {
    return {
        "ditmer_embla": {
            build: {
                options: {
                    emblaIconsOutputPath: path.resolve(__dirname + "/dist/icons"),

                    /* You only need to include themeScssFilePath and emblaCssOutputPath if you prefer to build an embla.css file and include it in your project, instead of simply importing the embla.scss file into your sites .scss file */
                    themeScssFilePath: path.resolve(__dirname + "/Content/styles/embla-variables-theme.scss"),
                    emblaCssOutputPath: path.resolve(__dirname + "/dist/css"),
                },
            }
        },
        getGruntConfigCallback: getGruntConfig
    }
}
```

## Using the plugin

### Importing Embla styles into your sites .scss file
If you're already using .scss files, it's recommended to simply import the embla.scss file from your node_modules like this: `@import "ditmer-embla/lib/scss/embla"`. To override variables you have to place them above the line where you import the Embla .scss file, like this:
```scss
//Place the embla variables to override here, like this:
$color-primary: red;
$color-secondary: green;
$base-icon-path: "/dist/icons/";

//Import the embla scss here, like this:
@import "ditmer-embla/lib/scss/embla"

//Place your sites styling below here
```

### Importing Embla styles as an .css file
If you prefer to build an embla.css file, and reference it on your site, include the `themeScssFilePath` and `emblaCssOutputPath` in your `ditmer_embla` grunt configuration. Create a `embla-variables-theme.scss` file (which `themeScssFilePath` configuration should point to) where you can override embla variables, like `$color-primary` and `$color-secondary`.

### Javascript
Import the embla javascript in your sites javascript, and call `initEmbla()` when the document is ready, like this:
```js
import { initEmbla } from "ditmer-embla";

$(document).ready(function() {

  initEmbla();

});
```

### Stylesheet variables
These are some of the Embla scss variables which you can override, or simply use in your sites styling:
```scss
// settings/_settings.colors.scss

$color-primary:           #eeaf1a !default;
$color-primary-dark:      #b78100 !default;
$color-primary-light:     #ffc954 !default;

$color-secondary:         #3d35aa !default;
$color-secondary-dark:    #000d7a !default;
$color-secondary-light:   #7360dd !default;

$color-tertiary:          #61d2d3 !default;
$color-tertiary-dark:     #21a0a2 !default;
$color-tertiary-light:    #97ffff !default;

$color-gray-15:         #333 !default;
$color-gray-45:         #555 !default;
$color-gray-60:         #999 !default;
$color-gray-70:         #b8b8b8 !default;
$color-gray-85:         #dcdcdc !default;
$color-gray-95:         #f2f2f2 !default;

$color-white:           #fff !default;

$color-success:         #71DC9C !default;
$color-success-dark:    darken($color-success, 10%) !default;
$color-success-light:   #C6F1D7 !default;

$color-warning:         #F3D15D !default;
$color-warning-dark:    darken($color-warning, 10%) !default;
$color-warning-light:   #FAECBE !default;

$color-danger:          #FC7E7A !default;
$color-danger-dark:     darken($color-danger, 10%) !default;
$color-danger-light:    #FDCBC9 !default;

$color-info:            #aac9de !default;
$color-info-dark:       darken($color-info, 10%) !default;
$color-info-light:      #dde9f2 !default;

$text-color:            $color-gray-45 !default;
$text-color-subtle:     rgba($text-color, 0.65) !default;
$text-color-disabled:   rgba($text-color, 0.35) !default;

$text-heading-color:          $color-gray-15 !default;
$text-heading-color-subtle:   rgba($text-heading-color, 0.65) !default;

$input-color-placeholder: $color-gray-60 !default;



// settings/_settings.defaults.scss

$font-family-sans-serif:  'Roboto', Helvetica, Arial, sans-serif !default;
$font-family-base:        $font-family-sans-serif !default;
$font-family-headings:    $font-family-sans-serif !default;

$font-size-root:          16px !default;

$font-size-base:          $font-size-root * 0.875 !default;

$font-weight-thin:        100 !default;
$font-weight-light:       300 !default;
$font-weight-regular:     400 !default;
$font-weight-medium:      500 !default;
$font-weight-bold:        700 !default;

$box-shadow-color:          rgba(0, 0, 0, .1) !default;
$default-box-shadow:        0 1px 4px 0 $box-shadow-color !default;

$default-border-color:      $color-gray-85 !default;
$default-border:            1px solid $default-border-color !default;
$input-border:              $color-gray-70 !default;
$focus-border:              $color-gray-45 !default;

$border-radius-base:        2px !default;
$border-radius-large:       2px !default;
$border-radius-small:       2px !default;

$base-icon-path:            "/assets/dist/icons/" !default;

$disabled-opacity:          .65 !default;
$disabled-text-opacity:     .5 !default;
$disabled-background-color:  $color-gray-95 !default;

$outline-border-opacity: .35 !default;
$outline-box-shadow: 0 0 0 3px !default;



// settings/_settings.login-page.scss

$login-image-url: "/dist/images/login.png" !default;
```

You can find all styling, and which variables you can override, in the `node_modules/ditmer-embla/lib/scss` folder, where most of the variables are defined in the `settings` folder.