Breakpoints
Sprkl system built with flexbox and is fully responsive.
Overview
Sprkl grid system can adapt across all 4 default webflow breakpoints (Desktop, tablet, mobile ladscape and mobile portrait). We are using different names for breakpoints e.g. Desktop = Large (LG), Tablet = Medium (MD), etc. Default grid tiers are as follows:
Large (LG) - Base
Medium (MD) - ≤ 991
Medium landscape (MDL) - ≤ 767
Small (SM) - ≤ 478
HEADS UP. Switch between breakpoints in designer mode in order to make changes.
Styles apply at all breakpoints, unless they’re edited at a larger or smaller breakpoint. Sprkl use 12 column grid at LG breakpoint. You can change them from here.
Styles added here will apply at 991px and down, unless they’re edited at a smaller breakpoint. Sprkl use 6 column grid at MD breakpoint. You can change them from here.
Styles added here will apply at 767px and down, unless they’re edited at a smaller breakpoint. Sprkl use 6 column grid at MDL breakpoint. You can change them from here.
Styles added here will apply at 478px and down. Sprkl use 2 column grid at SM breakpoint. You can change them from here.
Structure
Sprkl system use a series of containers, rows, and columns in order to build different layouts. Overall structure listed below.
Section
↳ Wrapper
↳↳ Row
↳↳↳ Col
Section
You can visually structure you content into logical groups with Section global class. Wrapper, row and col classes should be nested inside of it.
Wrapper
Wrapper defines global paddings of your website. Note that wrapper has its own Max-width and should be sum of Row width and global paddings width (e.g. Row width 1320px + 20px left global padding + 20px right global padding = 1360px Wrapper max-width).
Row
All columns should be nested inside of rows, you can stack any row amount on top of each other. Rows defines Max-width of your content and its overall width includes left and right paddings of nested columns.
Columns
Columns constructed of Col global class and LGN supporting combo class. Where Col class holds global settings for columns and LGN defines width of the column (where N is a number 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 which defines width of column).