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.