Foundation testing

public URL : kiwi.gg/f

Documentation at https://foundation.zurb.com/sites/docs/grid.html.

Features:

Howto:

single column

Action: a .row container element with a child .column (variations: an .expanded.row as parent container or - works only here - .column combined with .row as a single element).

Test: OK if :

.column child of .row - Lorem
.column combined with .row - Lorem
.column in an .expanded row - 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 Note: whole page is larger than viewport in portrait mode but it isn't due to a row. Grid is OK.
LG Nexus 5 (Android 5.x)
Motorola Moto G (Android 6.x) OK -

three equal columns

Action: In a .row container, 3 or 4 children with .medium-6 and .large-4 classes.

Observation: Default Foundation grid doesn't allow a sum of columns greater than 12.

Test: OK if :

.medium-6.large-4.column - one
.medium-6.large-4.column - two
.medium-6.large-4.column - three
.medium-6.large-4.column - one
.medium-6.large-4.column - two
.medium-6.large-4.column - three
and a picture!
chucky
.medium-6.large-4.column - one
and a picture!
chucky
.medium-6.large-4.column - two
.small-12.medium-6.large-4.column in an .expanded row - one
.small-12.medium-6.large-4.column - two
.small-12.medium-6.large-4.column - three
.small-12.medium-6.large-4.column in an .expanded row - one
.small-12.medium-6.large-4.column - two
.small-12.medium-6.large-4.column - three
and a picture!
chucky
.small-12.medium-6.large-4.column in an .expanded row - one
and a picture!
chucky
.small-12.medium-6.large-4.column - two
Tests results : three equal columns
Browser Test Comment
Windows Chrome Limited Fails if .row larger than 12 (last .column floated to right and styling in a way depending of the height of previous column - not necessarily obvious with simple cases)
Windows Firefox Limited Idem
Windows IE10 Limited Idem
Windows IE11 Limited Idem
Windows Edge Limited Idem
Mac Safari Limited Idem
Apple iPhone 5 (iOS 9.x) OK -
LG Nexus 5 (Android 5.x)
Motorola Moto G (Android 6.x) OK -

three unequal columns

Action: In a .row container, 3 children with .medium-6 class. 2 of them also have .large-3 and 1 of them .large-6 class (variation: .expanded.row container and children with .small-12 class which should stay optional).

Test: OK if :

.medium-6.large-3.column - Lorem
.medium-6.large-6.column - Lorem
.medium-6.large-3.column - Lorem
.small-12.medium-6.large-3.column in an .expanded row - Lorem
.small-12.medium-6.large-6.column - Lorem
.small-12.medium-6.large-3.column - Lorem
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)
Motorola Moto G (Android 6.x) OK -

three unequal columns with gutter

Action: .Same HTML code as above with a class .medium-uncollapse added on .row and styling background color of the content of .columns instead of .columns themselves.

Test: OK if :

.medium-6.large-3.column - Lorem

.medium-6.large-6.column - Lorem

.medium-6.large-3.column - Lorem

.medium-6.large-3.column - Lorem

.medium-6.large-9.column - Lorem

.medium-6.column - Lorem

.medium-6.column - Lorem

.small-12.medium-6.large-3.column in an .expanded row - Lorem

.small-12.medium-6.large-6.column - Lorem

.small-12.medium-6.large-3.column - Lorem

.medium-6.large-3.column - Lorem

.medium-6.large-9.column - Lorem

.medium-6.column - Lorem

.medium-6.column - Lorem

Tests results : three unequal columns with gutter
Browser Test Comment
Windows Chrome OK via .medium-uncollapse
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)
Motorola Moto G (Android 6.x) OK -

three columns with offset

Observation: Default Foundation grid doesn't allow a sum of columns greater than 12.

Action: Class .medium-offset-4 is added to the 4th column to offset it by the width of 4 columns.
Other test case (to avoid too large - thus broken - rows): only 2 children with 1 of them having this same class.

Test: OK if :

.medium-4.column - one
.medium-4.column - two
.medium-4.column - three
.medium-4.medium-offset-4.column - .medium-offset-4
.medium-4.column - five
.small-12.medium-4.column in an .expanded row - one
.small-12.medium-4.column - two
.small-12.medium-4.column - three
.small-12.medium-4.medium-offset-4.column - .medium-offset-4
.small-12.medium-4.column - five

Three rows, offset on column 1 of row 2 and then column 2 of row 3

row 1
row 1
row 1
.medium-4.medium-offset-4.column - .medium-offset-4
.medium-4.column - two
.medium-4.column - one
.medium-4.medium-offset-4.column - .medium-offset-4
row 1
row 1
row 1
.small-12.medium-4.medium-offset-4.column - .medium-offset-4
.small-12.medium-4.column - two
.small-12.medium-4.column - one
.small-12.medium-4.medium-offset-4.column - .medium-offset-4
Tests results : three columns with push
Browser Test Comment
Windows Chrome Limited Fails if .row larger than 12 (OK in "full view" with viewport >1900px even with a .row larger than 12 but fails in "editor view")
Windows Firefox Limited Idem
Windows IE10 Limited Depends of the height of 1st column
Windows IE11 Limited Fails if .row larger than 12 in some resolutions though still OK in others; Depends of both height of 1st column and resolution
Windows Edge Limited Fails for .expanded.row if larger than 12 in different resolutions though still OK in others and OK for default .row
Mac Safari Limited Fails if .row larger than 12 in some resolutions though still OK in others
Apple iPhone 5 (iOS 9.x) OK -
LG Nexus 5 (Android 5.x)
Motorola Moto G (Android 6.x) OK -

nested grid

Observation: Default Foundation grid doesn't allow a sum of columns greater than 12.

Action: One of the column contains a (nested) .row with 2 children class="medium-6 column" (also .small-12 in the expanded row, for testing purposes).
First case: 5 columns larger than 12 columns. Second case: 3 columns wih a total width of 12 "units".

Test: OK if :

First case: 5 columns (width: 20 "units") and 4th column has a nested grid

.small-12.medium-4.column - Lorem
.small-12.medium-4.column - Lorem
.small-12.medium-4.column - Lorem
.medium-6 - nested
.medium-6 - nested
.small-12.medium-4.column - Lorem
.small-12.medium-4.column in an .expanded row - Lorem
.small-12.medium-4.column - Lorem
.small-12.medium-4.column - Lorem
.small-12.medium-6 - nested
.small-12.medium-6 - nested
.small-12.medium-4.column - Lorem

Three columns and 2nd one contains a 2-columns nested grid

.small-12.medium-4.column - Lorem
.medium-6 - nested
.medium-6 - nested
.small-12.medium-4.column - Lorem
.small-12.medium-4.column in an .expanded row - Lorem
.small-12.medium-6 - nested
.small-12.medium-6 - nested
.small-12.medium-4.column - Lorem
Tests results : nested grid
Browser Test Comment
Windows Chrome OK Nesting works but before that, layout fails if parent .row larger than 12
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
Windows Edge OK Idem
Mac Safari OK Idem
Apple iPhone 5 (iOS 9.x) OK Idem
LG Nexus 5 (Android 5.x)
Motorola Moto G (Android 6.x) OK Idem