/layout

Primary LanguageCSSMIT LicenseMIT

Wolox Layout

circle-ci npm

FEArmy

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