Foundation - Flex Grid SASS Reference

Description

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time.

Mixins

The final CSS output is built using the mixin. The mixin can be used to build your own class structure out of these components. Following are the mixins used to build the final CSS output.

flex-grid-row

A Container is created for flex grid row, using this mixin.

@include flex-grid-row($behavior, $width, $columns, $base) { }

Sr.No. Name & Description Type Default Value
1

$behavior

The default grid style is modified.

 Keyword or List null
2

$width

Maximum width of row.

 Number $grid-row-width
3

$columns

Sets number of columns for this row.

 Keyword or List null
4

$base

It is useful for calling mixin twice on the same element as it creates duplicate output.

 Boolean true

flex-grid-column

Flex grid columns are created using the mixin. Using unstack class on the parent flex row, the column can be stretched to the full width of the container.

@include flex-grid-column($columns, $gutter);

Sr.No. Name & Description Type Default Value
1

$columns

flex-grid-column() function is referred for the available values.

 Mixed Null
2

$gutter

Create space between the columns

 Number $grid-column-gutter

flex-grid-order

The source of flex grid column is changed. The lowest column number appears at first in the layout.

@include flex-grid-order($order);

Sr.No. Name & Description Type Default Value
1

$order

Apply order number.

 Number 0

Functions

The following is the function of a flex grid −

flex-grid-column

flex property is calculated for the flex gird column. The same value is accepted as basic grid-column() function along with the following parameters −

  • null − Expands the column to full space.

  • shrink − Contracts the column.

flex-grid-column($columns)

Sr.No. Name & Description Type Default Value
1

$columns

Set the particular column width.

 Mixed null
foundation_flex_grid.htm
Advertisements