README

Wolox Layout

Features

separations.scss file contains all the margin class generators for your own stylesheet.
layout.scss contains a series of classes that can be used to define a page's layout using flexbox.

Installation

intall the package with npm or yarn

npm

npm i wolox-layout

yarn

yarn add wolox-layout

Import the wolox-bootstrap.scss to have margins, and layout all toghether. Or you can import them separately if needed.

@import '~wolox-bootstrap/wolox-bootstrap';
 // or
@import '~wolox-bootstrap/layout';
@import '~wolox-bootstrap/separations';

Usage

General import of Wolox-boostrap

This will generate a series of classes based on the default minimum (0), maximum (200px) and scale (10px) that looks like this:

.m-0 { margin: 0; }
.m-1 { margin: 10px; }
...
.m-20 { margin: 200px; }

.m-top-0 { margin: 0; }
.m-top-1 { margin: 10px; }
...
.m-top-20 { margin: 200px; }

@media (max-width: 960px) {
.m-top-0-sm { margin: 0; }
.m-top-1-sm { margin: 10px; }
...
.m-top-20-sm { margin: 200px; }
}

// And so on for every type of margin from 0 to 200px.

Variable overriding

These are the variables you can override to create new styles:

$media-breakpoint: 960px !default;: This variable is used to define the breakpoint of the autogenerated flex properties.
$max-item-size: 3 !default;: This is the max value de flex prop can take inside the item- class
$max-order-size: 3 !default;: This is the max value de order prop can take inside the order- class
$min-value: 0 !default;: This is the min value for margins
$max-value: 200 !default;: This is the max value for margins
$scale: 10 !default;: This is the increment value for the min and max values for margins
$suffix-sm: 'sm' !default;: This is the suffix the class will have for responsive
$breakpoint: 960 !default;: This will be the width breakpoint for responsive classes

Layout API interface

To generate a flexbox layout you can do:

<div class="column middle">...</div>

<!-- this is the equivalent to: -->

.my-custom-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

In summary, for vertical alignment we use top, middle, bottom and for horizontal alignment: start, center, end.

Column	Class name
`align-items: center`	`column center`
`align-items: flex-end`	`column end`
`align-items: flex-start`	`column start`
`justify-content: center`	`column middle`
`justify-content: flex-end`	`column bottom`
`justify-content: flex-start`	`column top`
`justify-content: space-between`	`column space-between`
`justify-content: space-around`	`column space-around`

Row	Class name
`align-items: center`	`row middle`
`align-items: flex-end`	`row bottom`
`align-items: flex-start`	`row top`
`justify-content: center`	`row center`
`justify-content: flex-end`	`row end`
`justify-content: flex-start`	`row start`
`justify-content: space-between`	`row space-between`
`justify-content: space-around`	`row space-around`

For responsive classes (using 960px as the default breakpoint) append -sm suffix to the class.

<div class="row space-between space-around-sm">
  ...
</div>

Order and flex value

This generator also creates clases to manipulate order and flex properties.

@for $i from 1 through 3 {
  .order-#{$i} {
    order: $i;
  }
}

This snippet will create this classes

.order-1 { order: 1 }
.order-2 { order: 2 }
.order-3 { order: 3 }

And for flex:

.item-1 {
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.item-2 {
  min-width: 0;
  min-height: 0;
  flex: 2;
}

.item-3 {
  min-width: 0;
  min-height: 0;
  flex: 3;
}

About

This project is maintained by Francisco Iglesias and it was written by Wolox.

Wolox

@wolox/layout

Usage no npm install needed!