Get started
We know how hard to start something new. That's why we prepared simple tips of how to start quickly.
Quick start
By default Sprkl uses 12-column grid with Max Width of 1320px on LG (deskrop) breakpoint, 6-Column grid on MD (Tablet) and MDL (Mobile landscape) breakpoints and 2-column grind on SM (Mobile portrait) breakpoint. Everything are ready to work from the box without any changes.
Below you'll know how to set Custom grids and change colors in the system.
Grid setup
In case if you'd like to set Custom grid, please go through the simple steps below. Visit breakpoints page to get additional information about structure and classes.
Wrapper
Wrapper holds rows or block components, in other words it responsible for overall structure.
With this class you can set your website global Margins (left and right). By default Sprkl uses 20px margins on LG breakpoint (Desktop).
Make sure to add changes on MD, MDL and SM breakpoints.
In addition don't forget to set Max Width for Wrapper class (Row Max Width + Global Margins).
Row
Row each row holds columns and is a global class for all rows. With this class you can set your website Max Width.
By default Sprkl uses 1320px Max Width.
Columns
Col is a global class for all columns. With this class you'll be able to set gutters. By default Sprkl uses 40px gutters (20px on left and right sides) on LG breakpoint (Desktop).
Make sure to add changes on MD, MDL and SM breakpoints.
Colors setup
Overview
On the colors page you'll know what classes Sprkl uses to style background and text. Changes to those classes will only affect components which uses them. In order to make changes globally you need to update color swatch, as all colors are taken from one single color swatch.
Update color in swatch
- This is unordered list item
- This is unordered list item
- This is unordered list item
- This is unordered list item
Now changes will affect all classes and components which use color from this swatch. Make sure you don't forget to press Save button, otherwise changes won't be saved.