V4.0.3

Added

• Made the gutter width and height variable.

Fixed

• Used the percentage-function for calculating the percentage.
• Better folder structure for the Stylus code.

V4.0.0

Breaking

• The project has been moved from flexbox-grid-stylus to @vivid-web/flexboxgrid-stylus.
• Renamed the files from flexbox-grid to flexboxgrid.
• Support for Bower has been dropped.
• Used Stylus functions instead of mixins.
• Using flex instead of width to determine the width of a col, row and grid.

Fixed

• Made the grid align vertically. Set the flex-direction to column.

Added

The following CSS classes for grid:

• grid--[xs|sm|md|lg|xl]-no-gutters

The following CSS classes for row:

• row--top
• row--center
• row--bottom
• row--reverse
• row--[xs|sm|md|lg|xl]-no-gutters

The following CSS classes for col:

• col--align-top
• col--align-center
• col--align-bottom
• col--first
• col--last
• col--reset
• col--flex
• col--[xs|sm|md|lg|xl]-no-gutters
• col--[xs|sm|md|lg|xl]-0
• col--[xs|sm|md|lg|xl]-offset-0

V4.0.2

Fixed

• Renamed functions to mixins.

Added

• Adds max-width to the columns.

V4.0.1

Fixed

• When a column has a width of 0, use flex: 0 0 0 instead of flex: 0 0 0%.
• When a column has an offset of 0, use margin-left: 0 instead of margin-left: 0%.

Version 3.2.2

Bugfixes

• Fixed font directory and gulpfile

Version 3.2.1

Renamed

• Renamed the block-classes from Upper-kebab-case to Lower-kebab-case

Bugfixes

• Rearranged the file structure

Version 3.1.1

Renamed

• Started the block-items with a capital

Bugfixes

• Fixed the hardcoded number of items with the variable

V3.1.0

Version 3.0.0

Adds

.col--[ xs | sm | md | lg | xl ]-offset-0

By applying this class, the column will have a offset of a certain column width.

V3.0.0

Version 3.0.0

Adds

.col--[ xs | sm | md | lg | xl ]-reset

Helper to reset the column order

.col--[ xs | sm | md | lg | xl ]-align-top

Helper to align column at the top

.col--[ xs | sm | md | lg | xl ]-align-center

Helper to align column at the center

.col--[ xs | sm | md | lg | xl ]-align-bottom

Helper to align column at the bottom

.text--left

Helper to align the text to the left on every display

.text--center

Helper to align the text to the center on every display

.text--right

Helper to align the text to the right on every display

Renames

Grid Col

.grid__col

Renamed to .col

.grid__col--[ xs | sm | md | lg | xl ]

Renamed to .col--[ xs | sm | md | lg | xl ]

.grid__col--[ xs | sm | md | lg | xl ]-[ 1 - 12]

Renamed to .col--[ xs | sm | md | lg | xl ]-[ 1 - 12]

.grid__col--[ xs | sm | md | lg | xl ]-offset-[ 1 - 12]

Renamed to .col--[ xs | sm | md | lg | xl ]-offset-[ 1 - 12]

.grid__col--no-gutters

Renamed to .col--no-gutters

.grid__col--[ xs | sm | md | lg | xl ]-first

Renamed to .col--[ xs | sm | md | lg | xl ]-first

.grid__col--[ xs | sm | md | lg | xl ]-last

Renamed to .col--[ xs | sm | md | lg | xl ]-last

.grid__col--[ xs | sm | md | lg | xl ]-flex

Renamed to .col--[ xs | sm | md | lg | xl ]-flex

Grid Row

.grid__row

Renamed to .row

.grid__row--no-gutters

Renamed to .row--no-gutters

.grid__row--[ xs | sm | md | lg | xl ]-top

Renamed to .row--[ xs | sm | md | lg | xl ]-top

.grid__row--[ xs | sm | md | lg | xl ]-center

Renamed to .row--[ xs | sm | md | lg | xl ]-center

.grid__row--[ xs | sm | md | lg | xl ]-bottom

Renamed to .row--[ xs | sm | md | lg | xl ]-bottom

.grid__row--[ xs | sm | md | lg | xl ]-reverse

Renamed to .row--[ xs | sm | md | lg | xl ]-reverse

Grid Text

.grid__text

Renamed to .text

.grid__text--[ xs | sm | md | lg | xl ]-left

Renamed to .text--[ xs | sm | md | lg | xl ]-left

.grid__text--[ xs | sm | md | lg | xl ]-center

Renamed to .text--[ xs | sm | md | lg | xl ]-center

.grid__text--[ xs | sm | md | lg | xl ]-right

Renamed to .text--[ xs | sm | md | lg | xl ]-right

V2.2.0

Version 2.2.0

Adds

.grid__text--[ xs | sm | md | lg | xl ]-left

Align the content at the left

.grid__text--[ xs | sm | md | lg | xl ]-center

Align the content at the center

.grid__text--[ xs | sm | md | lg | xl ]-right

Align the content at the right