Theme CSS grid

The theme CSS grid is a layout framework that you can use to change the layout of the storefront. The grid provided in the classic theme folder is heavily based on the Bootstrap 4.0 grid, modified to accommodate design requirements. If required, you can replace the grid to begin with a new grid.

The following sections detail the main bootstrap changes:

• There are 16 columns instead of 12.
• The column number adjusts depending on the breakpoints.
• It is possible to use a fixed column width.

Columns grid

The base theme uses a 16 column grid to manage the user interface (UI). Because the number of columns change depending on the breakpoints, it is important to be careful while you build your UI if you decide to use the base theme as a starting point. Bootstrap grid is mobile first, which means that you design for a small screen and then allow it to scale to a larger screen.

Minimum dimensions for breakpoints

Define the minimum dimensions at which your layout changes. The minimum dimensions for the base theme are as follows:

• xm: 1px
• xs: 641px
• sm: 800px
• md: 960px
• lg: 1120px
• xl: 1281px

Maximum width for breakpoints

Define the maximum width of `.container` for different screen sizes, which is as follows for the base theme:

• xm: 408px
• xs: 552px
• sm: 696px
• md: 840px
• lg: 984px
• xl: 1128px

Number of columns for each breakpoint

The base theme uses a different number of columns depending on the breakpoints. Because the ratios do not always work on all breakpoints, you might need to define your column width when working on element responsiveness on multiple breakpoints. The following number of columns are defined for each breakpoint are defined in the base theme:

• xm: 6 columns
• xs: 8 columns
• sm: 10 columns
• md: 12 columns
• lg: 14 columns
• xl: 16 columns

Fixed columns

You can use a fixed width column on the grid. For example, a sidebar can have the same width in all breakpoints. The following example shows how to enable the sidebar to have a fixed width of four columns and force the main container to use the remaining space:

• On the sidebar, add the class: col-fix-4
• On the main container, add the class: col-fix-inv-sm-4

Replace the grid

Although we provide the grid in the classic theme folder, you can replace it with your grid as described in the following procedure.

To replace the grid

1. Open your theme folder in your text editor and go to /assets/css/theme/layout/_manifest.scss.

2. Remove the first line, which is @import '../grid/bootstrap-grid';.

3. Go to /assets/css/theme/grid.

4. Delete all files in this folder and paste your grid-related SASS files.

5. Go to /assets/css/theme/layout/_manifest.scss and add your new grid entry point.

6. Save your project.

note

The platform is open so that you can handle the SASS theme architecture however you want. The only limitation is that the entry point for your theme CSS must be /assets/theme/theme-index.scss.