# 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 ditmer-embla-icons --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');
grunt.loadNpmTasks('ditmer-embla-icons');
```

## The "ditmer_embla" task

### Overview
In your project's Gruntfile, add a section named `ditmer_embla` to the grunt configuration.

```js
grunt.initConfig({
    "ditmer_embla": {
        dist: {
            fontsOutputPath: path.resolve(__dirname, "dist/fonts"),
        }
    },
    "ditmer_embla_icons": {
        dist: {
            iconsOutputPath: path.resolve(__dirname, "dist/icons"),
            illustrationsOutputPath: path.resolve(__dirname, "dist/illustrations"),
            iconFontOutputPath: path.resolve(__dirname, "dist/fonts")
        }
    }
});
```

## 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
//Define the embla variables to before including the embla scss:
$color-primary: red;
$color-secondary: green;
$base-icon-path: "/dist/icons/";
$embla-icons-font-path: "/dist/fonts";

//Import the embla scss
@import "ditmer-embla-icons/dist/icons/font/embla-icons";
@import "ditmer-embla/lib/scss/embla";
@import "ditmer-embla-icons/lib/scss/embla-icons";

//Place your sites styling after including the embla scss:
body {
    ...
}
```

### Javascript
Embla contains prebuild .js and .min.js files in it's dist folder. 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: #3d35aa !default;
$color-primary-dark: #000d7a !default;
$color-primary-light: #7360dd !default;

$color-secondary: #eeaf1a !default;
$color-secondary-dark: #b78100 !default;
$color-secondary-light: #ffc954 !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;

$text-color-on-primary: $color-white !default;
```

```scss
// settings/_settings.defaults.scss

$border-radius: 2px !default;
```

```scss
// settings/_settings.typography.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-weight-normal: 400 !default;
$font-weight-bold: 500 !default;
```

```scss
// settings/_settings.buttons.scss

$btn-border-radius: 6px !default;

$base-icon-path: "/assets/dist/icons/" !default;
$base-images-path: "/Content/images/" !default;
$base-fonts-path: "../fonts/" !default; // We expect css to be in "/dist/css/" and fonts to be in "/dist/fonts/" by default
```

```scss
// settings/_settings.forms.scss

$input-border-radius: 4px !default;
```

```scss
// 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.