Start with Loop

Loop offers a minimum styling along with common components and utilities to bootstrap any project as a base.

• HTML formatting
• Column component
• Template component
• Button component
• Form components
• Container
• Visibility
• List
• Miscellaneous
• Color utilities
• Typography utilities
• Spacing utilities
• Float utilities
• Wrapper utilities

Import Loop framework into your sass file and launch it to start with.

@import 'oo-loop/loop'; // Import
@include ooCreate(); // Launch

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.

Adjust to your need

Loop encourages you to set your own rules and shape the css the way you like. Following the structure of the config map, modify its properties to match your needs.

It can be done in various ways

• By passing your preferences to the mixins ooInit or ooCreate when launching loop
• By setting/adding values one at the time with the functions ooSetooAddooPipe
• By coping and pasting the full config file

# ooInit($config:null)

Mixin - Initialize $ooLoop config map.

• $config (map) Optional
  Set of rules that will be merged into the default Loop config

ooInit initializes the loop config map without generating any style. This step can be skipped on autobuild by only using ooCreate which will do both initialization and style generation. This is however mandatory on manual build.

// Loop default config

$ooLoop: (
  breakpoints: (
    xs: 30em,     // 480px
    sm: 37.500em, // 600px
    md: 60em,     // 960px
    lg: 80em,     // 1280px
    xl: 120em,    // 1980px
  ),
  screens: (sm, md, lg),
  ...
);

// Your config.scss file

@import 'oo-loop/loop';

@include ooInit((
  breakpoints: (
    xl: 100em, // update value for xl breakpoint to 1600px
    xxl: 140em, // add extra breakpoint
  ),
  screens: (sm, md, lg, xl, xxl), // add xl & xxl to available responsive value
));

@include Base(/** config **/);
@include Content(/** config **/);
@include Visibility(/** config **/);

On manual build, each individual @include can accept their own config map as parameters.

# ooCreate($config:null)

Mixin - Launch framework by initializing $ooLoop and generate styling.

• $config (map) Optional
  Set of rules that will be merged into the default Loop config

// Your config.scss file

@import 'oo-loop/loop';

@include ooCreate((
  breakpoints: (
    xl: 100em, // update value for xl breakpoint to 1600px
    xxl: 140em, // add extra breakpoint
  ),
  screens: (sm, md, lg, xl, xxl), // add xl & xxl to available responsive value
));

Remember: No individual @include must be used withooCreate or else the styles will be generated multiple times.

# ooSet($path, $value, $hard:true)

Function - Set new values to Loop config. To be used with $ooLoop.

• $path (string)
  Concatenated path to a Loop config property
• $value (mixed)
  New Loop property value
• $hard (boolean) Optional
  Destructive mode?

// Loop default config

$ooLoop: (
  breakpoints: (
    xs: 30em,     // 480px
    sm: 37.500em, // 600px
    md: 60em,     // 960px
    lg: 80em,     // 1280px
    xl: 120em,    // 1980px
  ),
  screens: (sm, md, lg),
  ...
);

@import 'oo-loop/loop';

$ooLoop: ooSet('breakpoints', (
  sm: 37.500em,
  md: 60em,
  xl: 100em,
)); // set breakpoint values (xs, lg no longer available)

$ooLoop: ooSet('screens', (sm, md, xl)); // set responsive screens

@include ooCreate(); // generate styles

# ooAdd($path, $value)

Function - Add values to Loop config. To be used with $ooLoop.

• $path (string)
  Concatenated path to a Loop config property
• $value (mixed)
  Value to append

// Loop default config

$ooLoop: (
  breakpoints: (
    xs: 30em,     // 480px
    sm: 37.500em, // 600px
    md: 60em,     // 960px
    lg: 80em,     // 1280px
    xl: 120em,    // 1980px
  ),
  screens: (sm, md, lg),
  ...
);

@import 'oo-loop/loop';

$ooLoop: ooAdd('breakpoints', (
  xxl: 140em, // add xxl breakpoint to map
));
$ooLoop: ooAdd('screens', xxl); // add responsive screen to list

@include ooCreate(); // generate styles

# ooPipe($rules...)

Function - Chain rules of setter and adder to update Loop config. To be used with $ooLoop.

• $rules (list)
  List of setter _set($path, $value) and adder_add($path, $value)

@import 'oo-loop/loop';

$ooLoop: ooPipe(
  _set('breakpoints.xl', 100em),
  _add('breakpoints', (xxl: 140em)),
  _add('screens', (xl, xxl))
);

@include ooCreate(); // generate styles

# Copy/paste

If you like to see everything at once, you can copy/paste the entire default config map, override its values and add new ones. Make sure not to remove referred properties!

@import 'oo-loop/loop';

$ooLoop: (
  /** the ENTIRE configuration **/
);
@include ooCreate();

Installation << >> The Loop config map