Grillade.css testing

public URL : kiwi.gg/g

single column

Action: put a class="grid" on grid container.

Test: OK if :

Lorem
Tests results : single column
Browser Test Comment
Windows Chrome OK ...
Windows Firefox OK ...
Windows IE10 OK ...
Windows IE11 OK ...
Windows Edge OK ...
Mac Safari OK ...
Apple iPhone 5 (iOS 9.x) OK ...
LG Nexus 5 (Android 5.x) OK ...
Motorola Moto G (Android 6.x) OK ...

three equal columns

Action: put a class="grid-3-small-2" on grid container.

Test: OK if :

one
two
three
and a picture!
chucky
Tests results : three equal columns
Browser Test Comment
Windows Chrome OK ...
Windows Firefox OK ...
Windows IE10 OK ...
Windows IE11 OK ...
Windows Edge OK ...
Mac Safari OK ...
Apple iPhone 5 (iOS 9.x) OK ...
LG Nexus 5 (Android 5.x) OK ...
Motorola Moto G (Android 6.x) OK ...

three unequal columns

Action: put a class="grid-3-small-2" on grid container. and put .one-quarter or .one-half classes on each children.

Test: OK if :

.one-quarter
.one-half (no class should work fine too)
.one-quarter
Tests results : three unequal columns
Browser Test Comment
Windows Chrome OK ...
Windows Firefox OK ...
Windows IE10 OK ...
Windows IE11 OK ...
Windows Edge OK ...
Mac Safari OK ...
Apple iPhone 5 (iOS 9.x) OK ...
LG Nexus 5 (Android 5.x) OK ...
Motorola Moto G (Android 6.x) OK ...

three unequal columns with gutter

Action: put a class="grid-3-small-2 has-gutter" on grid container.
put .one-quarter or .one-half classes on each children.
gutter size can be .has-gutter, .has-gutter-l or .has-gutter-xl (or can be modified in SCSS variables).

Test: OK if :

.one-quarter
.one-half (no class should work fine too)
.one-quarter
.one-quarter
.three-quarters
.one-half
.one-half
Tests results : three unequal columns with gutter
Browser Test Comment
Windows Chrome OK ...
Windows Firefox OK ...
Windows IE10 OK ...
Windows IE11 OK ...
Windows Edge OK ...
Mac Safari OK ...
Apple iPhone 5 (iOS 9.x) OK ...
LG Nexus 5 (Android 5.x) OK ...
Motorola Moto G (Android 6.x) OK ...

three columns with offset

Action: put a class="grid-3" on grid container.
put a .push on child who needs to be pushed right.

Test: OK if :

one
two
three
.push
five
Tests results : three columns with push
Browser Test Comment
Windows Chrome OK ...
Windows Firefox OK ...
Windows IE10 OK ...
Windows IE11 OK ...
Windows Edge OK ...
Mac Safari OK ...
Apple iPhone 5 (iOS 9.x) OK ...
LG Nexus 5 (Android 5.x) OK ...
Motorola Moto G (Android 6.x) OK ...

nested grid

Action: put a class="grid-3" on grid container.
put a class="grid-2" on a child

Test: OK if :

one
two
three
nested
nested
five
Tests results : three columns with push
Browser Test Comment
Windows Chrome OK ...
Windows Firefox OK ...
Windows IE10 OK ...
Windows IE11 OK ...
Windows Edge OK ...
Mac Safari OK ...
Apple iPhone 5 (iOS 9.x) OK ...
LG Nexus 5 (Android 5.x) OK ...
Motorola Moto G (Android 6.x) OK ...