Heading styles
This is an h1
This is an h2
This is an h3
This is an h4
This is an h5
This is an h6
Paragraph styles
text/regular/medium We make things that work better and last longer. Our products solve real problems with smart design and honest materials.
text/small/normal We make things that work better and last longer. Our products solve real problems with smart design and honest materials.
Breakpoint rules
We work mobile first! The Shopify Horizon theme is largely built mobile first. This means that by default, you start building your components/sections on mobile. Then, using @media(min-width....), you adjust your styling as needed for larger screens.
Note! We only use @media(max-width: 749px) for exceptions: things that need to be different only on mobile.
Tablet breakpoint: @media(min-width: 750px)
Desktop breakpoint: @media(min-width: 1024px)
Container rules
In Horizon, the containers are already organized within the sections. You can choose "Page" or "Full" for this. With "Page", the correct width is used and a container is applied, while with "Full", the full width is used. See, for example, the theme settings of this custom section ;)
Border radius and spacing
We have 2 variables to determine a border-radius or spacing. These are:
--sm-border-radius
--spacing
Both are equal to 16px. To use this correctly, we will apply rems in css. (See documentation). Basically, if you need a spacing of 24px, we will calculate based on 16px. So in this case, 24px is equal to 1.5rem. The same applies to the border-radius.
Color variables
The color variables below can be used in the CSS. (It is preferable to check the color schemes first).
Algemene kleuren
- Background: --color-background
- Text: --color-foreground
- Headings: --color-foreground-heading
- Links: --color-primary
- Hover links: --color-primary-hover
- Borders: --color-border
- Shadow: --color-shadow
Primary button
- Background: --color-primary-button-background
- Text: --color-primary-button-text
- Border: --color-primary-button-border
- Hover background: --color-primary-button-hover-background
- Hover text: --color-primary-button-hover-text
- Hover border: --color-primary-button-hover-border
Secondary button
- Background: --color-secondary-button-background
- Text: --color-secondary-button-text
- Border: --color-secondary-button-border
- Hover background: --color-secondary-button-hover-background
- Hover text: --color-secondary-button-hover-text
- Hover border: --color-secondary-button-hover-border
Input velden
- Background: --color-input-background
- Text: --color-input-text
- Border: --color-input-border
- Hover background: --color-input-hover-background
Variant picker (default state)
- Background: --color-variant-background
- Text: --color-variant-text
- Border: --color-variant-border
- Hover background: --color-variant-hover-background
- Hover text: --color-variant-hover-text
- Hover border: --color-variant-hover-border
Variant picker (geselecteerde state)
- Background: --color-selected-variant-background
- Text: --color-selected-variant-text
- Border: --color-selected-variant-border
- Hover background: --color-selected-variant-hover-background
- Hover text: --color-selected-variant-hover-text
- Hover border: --color-selected-variant-hover-border
Color schemes
Below are the most commonly used color schemes
File structure & Naming conventions
Below are the main rules regarding the file structure and naming conventions.
The pull request / branch name has been copied from Linear; we will stick with this for now.
There are naming conventions we follow for new snippets, sections, and blocks! See the naming-conventions.md file in your code editor.
Unsure when to use a section, snippet, or block? Check the naming-conventies.md file in your code editor :)
