Download Github

Importing

markupgrid is a responsive grid system that can be easily implemented on existing layouts.

As having a "grid" system on a layout is essential, we are opting to use the CSS `@import` method to import the css as a dependency.

@import url('markupgrid.min.css');

Grid Wrapper

The wrapper will be divided into columns of 12.

<div class="grid">
  Columns here.
</div>

Columns

Each will have a width using these calculations 100%/12*X - 1%, 'X' being the width of the column.

The calc() function of CSS3 is also used. Browser compatibility can be checked here.

Columns will be named (from 1 to 12 respectively): .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12

<div class="grid">
  <div class="g1">.g1</div>
  <div class="g2">.g2</div>
  <div class="g3">.g3</div>
  <div class="g4">.g4</div>
  <div class="g5">.g5</div>
  <div class="g6">.g6</div>
  <div class="g12">.g12</div>
</div>

Result Try hovering over!

.g1
.g2
.g3
.g4
.g5
.g6
.g12

Offsets

Offsets can move a specified column towards the right by an x amount of grid. Columns can move a maximum of 11 grids.

Offsets will be named (from 1 to 11 respectively): .o1, .o2., .o3, .o4,. o5, .o6, .o7, .o8, .o9, .o10, .o11

<div class="grid">
  <div class="g1">.g1</div>
  <div class="g1 o1">.g1.o1</div>
  <div class="g1 o2">.g1.o2</div>
  <div class="g1 o3">.g1.o3</div>
  <div class="g1 o4">.g1.o4</div>
  <div class="g1 o5">.g1.o5</div>
  <div class="g1 o6">.g1.o6</div>
</div>

Result Try hovering over!

.g1
.g1.o1
.g1.o2
.g1.o3
.g1.o4
.g1.o5
.g1.o6