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

1. intall the package with npm or yarn

npm

npm i wolox-layout

yarn

yarn add wolox-layout

2. 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.