The default theme's CSS grid

Basics

The CSS grid is made of a container element in which columns are placed side-by-side. By default, the container can contain up to 12 columns, but this number can be modified in SASS styles.

An element's column width can be defined by using class names that specify the number of columns across which the element can span depending on the window width.

Below you can see a simple grid implementation:

<div class="Container">
	<div class="Grid">
		<div class="Col-Mobile-12-12 Col-Tablet-4-12"></div>
		<div class="Col-Mobile-12-12 Col-Tablet-4-12"></div>
		<div class="Col-Mobile-12-12 Col-Tablet-4-12"></div>
	</div>
</div>

The above markup produces 3 columns that span across the whole container width on mobile devices (12 columns) and, starting from tablet size, span across one third of the container width (4/12).

The default theme has 3 different CSS grids that serve different purposes. They include:

• The standard CSS grid
• GridList: a grid for formatting product lists in which elements can be stacked in multiple rows.
• Flex-gridi: a grid in which elements span by default only across the space they need.

Grid breakpoints

The standard CSS grid's breakpoints define the size of the grid columns depending on the screen size. By default, the grid contains the following breakpoint class names:

/* 0px–600px */
.Col-Mobile-*-12

/* 601px–800px */
.Col-Mobile-Wide-*-12

/* 801px–1024px */
.Col-Tablet-*-12

/* 1025px–1200px */
.Col-Desktop-*-12

For each class name, you can specify the number of columns for a particular window size (by replacing the * character) and the maximum number of columns at the end.

For example, .Col-Tablet-6-12 means that the element should span across half (6/12) of the container width in tablet size. If no desktop size has been specified for an element, tablet size will be used instead.

Push/pull classes

You can change element order – depending on the window size – by using the CSS grid's push/pull classes. As their names suggest, these classes either push elements to the right or pull them to the left, thereby reordering the way they are displayed on the screen.

The push/pull classes also make it possible to modify element size depending on the window width.

Below you can see an example for the push/pull classes:

<div class="Container">
	<div class="Grid">
		<div class="Col-Mobile-12 Col-Tablet-Push-6-12"></div>
		<div class="Col-Mobile-12 Col-Tablet-Pull-6-12"></div>
	</div>
</div>

In the mobile sizing, elements span 100% of the container width and are displayed stacked on top of each other. In the tablet size, the push/pull classes are enabled, and the columns spread across 50% of the container width.

The element .Col-Tablet-Pull-6-12 is pulled to the left and the element .Col-Tablet-Push-6-12 is pushed to the right. Note that the push/pull organization scales up, so it will be enabled on all window sizes starting from tablet size even if you've defined a separate size for the element in the desktop width.

Grid list

Formatting product lists in an online store might be difficult with the standard CSS grid because, if the elements on the product list vary in height, their order on the list will become mixed up. That's why MyCashflow's default theme includes the GridList component. You can use the grid list to stack grid columns in multiple rows.

.GridList
/*
* List elements' widths:
* - Default 20%
* - Mobile: 50%
* - Tablet: 33.33%
* - Desktop: 25%
*
* Mobile, Tablet and Desktop screen size widths
* are common for all list types
*/

.GridList-Wide
/*
* List elements' widths:
* - Default 16.66%
*/

.GridList-Narrow
/*
* List elements' widths:
* - Default 25%
*/

To create a broad or a narrow grid list, give both the base and derived classes to the list's container, e.g. <div class="GridList GridList-Wide"></div>.

On product lists, the grid list could be used in the following way:

{Products(
    before: '
        <h2>Products</h2>
        <ul class="GridList GridList-Wide">
    ',
    helper: {{
        <li class="ListItem">
            {ProductName}
            {ProductListImage}
            {ProductShortDesc}
        </li>
    }},
    after: '</ul>'
)}

In this way, you can implement a grid list with elements that are 16.66% wide by default and scale for different screen widths according to the GridList class sizes.

Flex grid

The Flex grid doesn't work in the same way as the standard and list grids. In the Flex grid, columns span by default across only as much space as they need and have no width defined beforehand. You can also get elements to take up all the space available in the row by using additional classes.

The container element of the Flex grid is given the class Flex. Grid columns are given the class FlexItem. See the example below:

<div class="Container">
	<div class="Flex">
		<div class="FlexItem"></div>
		<div class="FlexItem"></div>
	</div>
</div>

In the example, the two columns are placed side-by-side and span across as much space as their contents require. You can also get columns to span across all the available space by using the FlexItem-Grow class:

<div class="Container">
	<div class="Flex">
		<div class="FlexItem FlexItem-Grow"></div>
		<div class="FlexItem FlexItem-Grow"></div>
	</div>
</div>

Now both elements span 50% of the available width because the container's total width is divided between two elements. If there were 3 elements, each of them would take up 33.33% of the available width and so on.

Additionally, the Flex grid contains the spacer element .FlexSpacer which spans across all the space left between two .FlexItem elements.

<div class="Container">
	<div class="Flex">
		<div class="FlexItem"></div>
		<div class="FlexSpacer"></div>
		<div class="FlexItem"></div>
	</div>
</div>

In such case, the example's two .FlexItem elements take up only as much space as their contents require. The .FlexSpacer element between them takes up the rest of the space, so that the contents land on the container's opposite sides.

The grid also contains the Flex-Collapse class that forces an element to take up 100% of the container width in the mobile size. The class is given to the flex element container:

<div class="Container">
	<div class="Flex Flex-Collapse">
		<div class="FlexItem"></div>
		<div class="FlexItem"></div>
	</div>
</div>

In this example, the two .FlexItem elements will be stacked on top of each other in mobile size (with each taking up 100% of the container width) and on bigger screens they will behave in the same way as regular .FlexItem elements.

Auxiliary classes

The default theme contains responsive auxiliary classes with which you can hide selected elements altogether in certain screen widths:

• .Hide-Desktop hides the element for desktop size
• .Hide-Tablet hides the element for tablet size
• .Hide-Mobile hides the element for mobile size

Using the grid in your own SASS styles

You can use the default theme's standard CSS grid as a part of your own SASS styles. In this way, you can make grid columns out of elements whose class names you cannot influence.

.TargetElement {
    @extend .Grid;
    
    .Child-1, .Child-2 {
        @extend .Col-6-12;
    }

    .Child-1 {
        @extend .Col-Tablet-4-12;
    }
    
    .Child-2 {
        @extend .Col-Tablet-8-12;
    }
}

In the example, the default theme's grid classes are used to state that the .TargetElement element's 2 child elements should span the width of 6 columns by default. In the tablet size, the first element will span the width of 4 columns and the second of 8 columns.

Note that the parent element is given the class .Container so that the floating child elements remain inside of it.

You can also use the Flex grid in SASS styles:

.TargetElement {
    @extend .Flex;
    
    .Child-1, .Child-2 {
        @extend .FlexItem;
    }
}

The child elements above are converted into flex columns by using the default theme's FlexItem class. You can also use the theme's flex() mixins to serve the same purpose:

.TargetElement {
    @extend .Flex;
    
    .Child-1, .Child-2 {
        @include flex(1);
    }
}

Give the flex() mixin any of the values accepted by the CSS flex style as its value.

Modifying the grid

You can modify the CSS grid to fit your theme by using the default theme's SASS styles. In the /styles/scss/common/_variables.scss file, you can find variables with which you can easily make changes to the grid.

For example, you can change the grid's maximum width with the $container-max-width variable.

You can also change the grid's default breakpoints. This might come in handy; e.g. when using the mobile display type on wider screens. Breakpoints are defined with the following variables:

• $breakpoint-desktop
• $breakpoint-tablet
• $breakpoint-mobile-wide
• $breakpoint-mobile