ditmer-embla

Getting Started

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

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:

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.

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:

//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:

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:

// 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;

// settings/_settings.defaults.scss

$border-radius: 2px !default;

// 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;

// 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

// settings/_settings.forms.scss

$input-border-radius: 4px !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.