Importation

A single import for the entire framework

Loop is basing all its settings around the config map. Being also the case when including pieces of the framework, Loop main file becomes the only needed import.

@import 'oo-loop/loop'; // that's all

Make sure to use the correct path to the Loop node_modules. Javascript task runners can help you simplify the import, otherwise please use the following path node_modules/oo-loop/loop.

# Use of Config

Adjust your needs of the framework by updating the use property of the config map.

// the default use map
use: (
  base: true,
  headings: true,
  content: true,

  column: true,
  template: true,
  button: true,

  form: (
    input: true,
    select: false,
    checkbox: false,
    radio: false,
    toggle: false,
  ),

  container: true,
  visibility: true,
  list: true,
  misc: true,

  utilities: (
    color: true,
    typo: true,
    spacing: true,
    float: true,
    wrapper: true,
  ),
),

Update with ooUse()

Pass a config map to ooUse() to only update the use property.
This allows you to avoid going through ooCreate() gaining more readibility by not overloading the config there (depending on your preferences).

@import 'oo-loop/loop';

$ooLoop: ooUse((
  form: (
    checkbox: true, // include oo-checkbox
    radio: true, // include oo-radio
  ),
  utilities: (
    wrapper: false, // remove wrapper utilities
  )
));

@include ooCreate();

Include multiple styles at once

all form components and utilities classes can be included from the same parent property.

@import 'oo-loop/loop';

$ooLoop: ooUse((
  form: true, // include all
  utilities: false // remove all
));

@include ooCreate();

Update with ooCreate

Use the ooCreate() config to pass some preferences.

@import 'oo-loop/loop';

@include ooCreate((
  use: (
    form: true, // include all
    utilities: false // remove all
  )
));

@import 'oo-loop/loop';

@include ooCreate((
  use: (
    form: (
      select: true, // add oo-select component
    ),
    utilities: (
      typo: false, // remove typo utilities
      float: false, // remove float utilities
    )
  )
));

Update one property at a time

Use the functions ooSet() or ooPipe() to set individual properties.

@import 'oo-loop/loop';

$ooLoop: ooSet('use.utilities.wrapper', false);

$ooLoop: ooPipe(
  _set('use.form.select', true),
  _set('use.form.checkbox', true),
  _set('use.form.radio', true)
);

@include ooCreate();

# Use of mixin

Instead of using the autobuild of ooCreate(), you can include one by one the desired elements from Loop framework.

In any case, and before doing so, the initialization of $ooLoop is necessary and will be done via ooInit(). That will also give you the opportunity to set some global settings.

For the rest of the elements, keep their default style or customize them by passing new parameters.

When passing configuration to mixin, the referers this() and _this() are available. In the case of accessing global data oo() is usable.

// Here is an example

@import 'oo-loop/loop';

// Initialize Loop
@include ooInit((
  palette: (
    'dark-gray': #555,
  )
));

// Add base and set the main font-family
@include Base((
  props: (
    font-family: (Robotto, arial, serif),
  )
));

// Add headings and set some styles
@include Headings((
  props: (
    font-family: (Georgia, serif),
    color: oo('palette.darkGray'),
  )
));

// Add Button component
@include Button((
  props: (
    color: #fff,
    background-color: oo('palette.darkGray'),
  ),
  states: (
    hover: (
      background-color: ooDarken(this('button.props.backgroundColor'), 12%),
    ),
    focus: this('button.states.hover'),
  )
));

// Add Column component
@include Column();

// Add visibility classes helper
@include Visibility();