Layout

Shock’s layout is built on Bootstrap 5. If you know Bootstrap’s grid and utility classes, you already know how to rearrange Shock; if you don’t, the Bootstrap docs are the best place to start.

Powered by CSS variables

Shock works with CSS variables — a value is stored in one place and referenced everywhere it’s needed. Change it once and it updates across the whole template. For most sites, editing a few variables in assets/css/theme.css is all the customization you’ll ever need — no advanced knowledge required.

assets/css/theme.css

:root {
--primary-color: #07beb8;
--secondary-color: #6917d0;
--tertiary-color: #ff1791;
--accent-color: #fedc00;
--white-color: #fff;
--gray-color: #8f93a5;
--black-color: #1a1a20;
}

And typography is wired the same way:

assets/css/theme.css

:root {
--primary-font: lato, sans-serif;
--secondary-font: proxima-nova, sans-serif;
}

Where each stylesheet fits

main.css is the entry point, core.css holds the structural styles, and theme.css is where your colors and fonts live. Stick to theme.css and you can’t break the layout.

Keep going

Set your colors

The full color system and how the class-based schemes work.

Colors →

Tune your type

Fonts and the 12 built-in text styles.

Typography →

Continue to LogoSwap in your logo — including scroll and mobile variants.