boxe-u-widths v0.1.0

boxe-u-widths

Width helper classes, like grid systems. u-1-5, u-1-5-tablet

Install using npm:

$ npm install --save boxe-u-widths

Settings

Variants

Control widths/fractions that get generated by widths utility.

Defaults:

// $boxe-width variants.
$boxe-widths: 1 2 3 4 5 6 12 !default;

Delimiter

Customise the symbol that gets inserted between numbers.

Defaults:

// Width delimiter
$boxe-width-delimiter: '-' !default;

Breakpoint suffix

Customise the symbol that gets inserted before breakpoint name.

Defaults:

// Breakpoint suffix.
$boxe-width-breakpoint-suffix: '-' !default;

Enable breakpoints

Disable or Enable generation of breakpoint based classes.

Defaults:

// Enable breakpoint based classes.
$boxe-breakpoint-widths-enabled: true !default;

Customisation

Example:

$boxe-widths: 1 2;
$boxe-width-delimiter: '-of-';
$boxe-breakpoint-widths-enabled: false;
@import 'path-to/boxe-u-widths';

Result:

.u-1-of-1 {
  max-width: 100% !important;
  flex-basis: 100% !important;
}

.u-1-of-2 {
  max-width: 50% !important;
  flex-basis: 50% !important;
}

.u-2-of-2 {
  max-width: 100% !important;
  flex-basis: 100% !important;
}

Dependencies

sass-mq - Used for generating breakpoint based classes.