Foundation testing (flexbox grid variant downloaded from site)

public URL : kiwi.gg/fdt6flex

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 -
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 OK .small-12 is needed for small resolutions, otherwise all sibling columns are displayed on the same .row with equal width
A total sum of widths larger than 12 per .row is OK with this flexbox variant
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
Windows Edge OK -
Mac Safari OK -
Apple iPhone 5 (iOS 9.x) OK Without .small-12 on 4th column with a picture, this 4th column stays on the same row
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK In portrait mode only: without .small-12 on 4th column with a picture, this 4th column goes on a 2nd line and is full width (different from iOS 9.x)

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 .small-12 is needed for small resolutions, otherwise all columns are displayed on the same row with equal width
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
Windows Edge OK -
Mac Safari OK -
Apple iPhone 5 (iOS 9.x) OK .small-12 is needed for small resolutions, otherwise all columns are displayed on the same row with equal width
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK Idem

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 Needs an extra div child. Styling (background-color, etc) goes to this child and not .column
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
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 OK .small-12 is needed for small resolutions, otherwise all sibling columns are displayed on the same .row with equal width
A total sum of widths larger than 12 per .row is OK with this flexbox variant
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
Windows Edge OK (not tested without .small-12)
Mac Safari OK (not tested without .small-12)
Apple iPhone 5 (iOS 9.x) OK Idem
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK Idem

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 .small-12 is needed for small resolutions, otherwise all nested columns are displayed on the same row with equal width
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
Windows Edge OK -
Mac Safari OK Same than Chr, Fx and IE10-11
Apple iPhone 5 (iOS 9.x) OK Idem
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK Idem