Structure

Structure Logo

Structure

  • Rows and Columns
  • Responsive Grid
  • Grid Column Sizes
  • Shrink Columns
  • Horizontal Alignment
  • Vertical Alignment
  • Block Grid

Introduction

Structure Flex Grid is a flex-box based grid system for quickly creating the page structure for your html pages. Structure follows BEM naming conventions to clearly separate modifiers from elements. You can read more about BEM at getbem.com.

Structure Flex Grid only provides you with the grid to make layout of the pages, which means you can easily combine Structure with any other library like Angular-Material.

It packs some very useful modifiers for rows and columns to achieve the layout of the page you are looking for. For example my favorite "--shrink" modifier for columns which I use heavily in my designs. OR "--align--justify" modifier for rows which is very useful in making toolbars or rows which should align items to left and right edges.

Scroll down to read more about all the modifiers.

Installation Instructions

You can install Structure Flex Grid as an NPM package or you can insert directly in your html page:

Installing with NPM

Install using NPM with following command

npm install structure-flex-grid

After installing import it in your scss file:

@import '~structure-flex-grid';

Insert directly in your HTML file

You can get the lastest version from unpkg.com. In the <head> tag of your .html file add:

<link href="//unpkg.com/structure-flex-grid" rel="stylesheet">

Rows and Columns

Easy to remember and simple, just add `.row` for Rows and `.column` for Columns. It will automatically be placed evenly distributed. Any number of columns can be placed in a row.

Col 1
Col 2
Col 3
Show markup

Collapsed row (No gutters)

Add `row--collapse` to the row element (both classes `row` and `row--collapse`).
*Tip: `--collpase` is a 'modifier' which modifies how the row element behaves when this modifier is applied. Read more about BEM.
Note: When making full-width page it is important to add row-collapse to the outermost row.

Col 1
Col 2
Col 3
Show markup

Responsive Grid

There are 4 breakpoints for the media queries, which are as follows :
'small' for phones (320px); 'medium' for tablet sizes (600px); 'large' for desktop sizes (1024px); and; 'huge' for larger screens (1280px);
You can use classes for columns as :
column--[small|medium|large|huge]-[1-12]
examples: column--large-6 OR column--medium-12
Example below shows columns which will show as 3 columns (of size 4) on large screen but will take full width on medium and small screens Resize your browser window to see it take effect.

Column large-4 / medium-12
Column large-4 / medium-12
Column large-4 / medium-12
Show markup

Grid Column Sizes

2
10
3
9
4
8
5
7
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
Show markup

Shrink Columns

Shrink One Column

Add `column--shrink` modifier class to the column which should shrink.
When this class is applied, the column shrinks to size of its contents.

This column shrinks
... And This Column fills up remaining space
Show markup

Shrink Multiple Columns

Your can apply `column--shrink` to multiple columns and the other columns will fill up the remaining space.
This is very useful in creating items which have multiple links or icons which are right aligned. You can simply add `column--shrink` class to each column in the right, something similar to following example:

Title of the item here
Link One
Link Two
Show markup

Combine it with `row--collapse`

Building on top of above example, you can combine it with row--collapse modifer for row to get rid of the padding:

Title of the item here
Link One
Link Two
Show markup

Horizontal Alignment

Center Align

Add `row--align--center` modifier class to the row to align columns to center

Col 1
Col 2
Col 3
Show markup

Left Align

Add `row--align--left` modifier class to the row to align columns to left

Col 1
Col 2
Col 3
Show markup

Right Align

Add `row--align--right` modifier class to the row to align columns to right

Col 1
Col 2
Col 3
Show markup

Align Spaced

Add `row--align--spaced` modifier class to the row to align columns in a distributed way. The remaining space of row will be evenly distributed around the columns

Col 1
Col 2
Col 3
Show markup

Align Justified

Add `row--align--justify` modifier class to the row to align columns in a justified manner. First column will stick to left edge, Last column will stick to the right edge.
Remaining Space will be distributed evenly.

Col 1
Col 2
Col 3
Show markup

Vertical Alignment

Top Align

Add `row--align--top` modifier class to the row to align columns to top.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, fuga, sit, deleniti magnam voluptas provident ea excepturi quas assumenda harum quod tempore quo vel accusamus ducimus sint exercitationem repellat blanditiis et dolor qui. Voluptate, saepe porro modi dolore deleniti cum itaque fugit.
Col 2
Col 3
Col 4
Show markup

Middle Align

Add `row--align--middle` modifier class to the row to align columns to middle.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, fuga, sit, deleniti magnam voluptas provident ea excepturi quas
Col 2
Col 3
Col 4
Show markup

Bottom Align

Add `row--align--bottome` modifier class to the row to align columns to bottom.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, fuga, sit, deleniti magnam voluptas provident ea excepturi quas
Col 2
Col 3
Col 4
Show markup

Self Aligning Columns

There are three different self--align modifiers available which can be applied to the columns to self-align the columns:

  • `column--self-align--top`: Aligns column to the top
  • `column--self-align--middle`: Aligns column to middle
  • `column--self-align--bottom`: Aligns column to the bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, alias molestiae rerum illum laborum consequatur voluptates aspernatur delectus saepe accusantium. Vel, quasi totam quae nemo ratione!
Top Aligned
Middle Aligned
Bottom Aligned
Show markup

Block Grid

In a `Block Grid` instead of specifying the size for each column, you just let the row know how many columns you want in a row. This is great for making responsive pages, as you can specify something like - 5 columns on large screen, and three columns on meduim screen, and 1 column per row on small screens. This way you don't have to add different column sizes for each column.

Note: block-grid is not a modifier, rather it is a way to define the grid columns. This needs the .row class applied to the block as well

Resize this page to see how the following block grid changes from 5 columns per row to 1 column per row:

Col 1
Col 2
Col 3
Col 4
Col 5
Show markup