Grids & Breakpoints

Welance bootrap can have multiple grids, breakpoints, wrappers and gutters widths set. They usually are set based on the design of the project, and by default, the following (responsive) parts are set up.

NOTE: You can change any of the following values by setting a _variables.scss similar to this, but overriding the default values. (see file)

Welance Bootstrap uses the Guardian's SASS MQ Library to manage breakpoints.

Grids

Can I have a 13 columns grid? Yes, you can have ANY grid!

In Welance Bootstrap multiple grids can be created simply by changing a single array setup. This will allow you to be able to create any type of design.

$grids: (1, 5, 7, 8, 12);

Just by changing these numbers, you'll be able to generate as many grids as you need...and then mix them up in your HTML.

The above code, for example, will generate:

• 1 grid of 1 column
• 1 grid of 5 columns
• 1 grid of 7 column
• 1 grid of 8 columns
• 1 grid of 12 columns

...and usage in HTML will then be similar to twitter bootstrap's columns classes:

<div class="col col--1-12 col--6-12@md col--1-1@sm">col-4-8 cia</div>

The above line, for example, will tell this div element to behave as a:

• 1/12 column for non-covered breakpoints
• 6/12 column for the md breakpoint
• 4/8 column for the sm breakpoint

Breakpoints

When will the browser switch?

Breakpoints names and width are defined in px (for simplicity) and later transformed in em (for performance)

  Name      Size (px, converted to em)
  
  'xs'    : 0px,
  'sm'    : 576px,
  'md'    : 768px,
  'lg'    : 992px,
  'xl'    : 1200px,
  'xxl'   : 1680px

Containers

How large are the fixed-width-containers for thos breakpoints?

When contained, the main wrappers will have a fixed width, depending on breakpoints:

  Name      Size (px, converted to em)
  
  'sm'    : 540px,
  'md'    : 720px,
  'lg'    : 960px,
  'xl'    : 1140px,
  'xxl'   : 1560px

Gutters

How much space there is between the columns?

Gutters can also change depending on breakpoints, so you can define how much space there will be, between columns, at each breakpoint.

Breakpoint    Total Gutter Width (L+R)

  'xs':       32px,
  'sm':       32px,
  'md':       32px,
  'lg':       32px,
  'xl':       32px,
  'xxl':      32px

Spacing (Padding and Margins)

Move or "pad" elements in a controlled manner.

Making more space for (or between) elements is controlled by the idea of an 8 point grid. At the moment we offer the ability to add margins or paddings to element 8px-by-8px (in any direction) and, ATM, only up to 296px.

If your designs are not following this standard specifications, you should might see some differences with spacing and margins once you'll see the designs transformed into HTML.