Elastique Stretch Core

Contents

The Elastique Stretch Core contains a collection of SCSS function, mixins and utilities:

source
└───js
│   └─── Coming soon
└───scss
    └───_reset.scss
    └───functions
    │   └───_colors.scss
    │   └───_pxtorem.scss
    │   └───_zindex.scss
    └───mixins
    │   └───_button.scss
    │   └───_center.scss (TODO: position as parameter(?): absolute, fixed, relative)
    │   └───_ellipsis.scss
    │   └───_mediaqueries.scss
    │   └───_noselect.scss
    │   └───_placeholder.scss
    │   └───_ratio.scss
    └───utilities
    │   └───_grid.scss
    │   └───_background.scss
    │   └───_center.scss
    │   └───_clearfix.scss
    │   └───_display.scss
    │   └───_event.scss
    │   └───_flexbox.scss
    │   └───_float.scss
    │   └───_position.scss
    │   └───_selection.scss
    │   └───_text.scss
    └───_core.scss

Getting started

The Elastique Stretch Core package needs to be used together with an Elastique Stretch Boilerplate.

Installation

To include Elastique Stretch Core in your project, go to the root directory of your project and run:

npm install elastique-stretch-core

or if you make use of the Elastique Stretch Boilerplate, the npm package is included in the package.json. In that case, all you need to do is run:

npm install

For further information on how to setup your project, see the general Elastique Stretch documentation

Usage

To include Elastique Stretch Core in your project, core.scss needs to be imported. Add the following line at the top of your app.scss file, after(!) the config.scss is imported:

@import "config" // Config file from Stretch Boilerplate
@import "core"

That's it!

Now go on and make the web a better place :)