Theme structure
Ideas for sematic theme structure
const theme = {
// spacing
spaces: {
between: {
items: '1rem',
subgroups: '2rem',
groups: '4rem',
sections: '6rem',
youNameIt: 'literally anything',
},
sides: '1rem', // margin or padding left & right to keep page content from crashing into screen sides
},
// content width
maxWidths: {
text: '18rem', // the maximum width a text block should have. can be used for other things too, though, such as form elements.
page: '38rem', // the maximum width a the main page content should have. ideally this would be `2` * `text` + `some space in between`, but the in-between space might vary depending on context
},
mediaQueries: {
mobile: '@media screen and (min-width: 20rem)', // mobile width = text width. mind the spacing on the sides.
tablet: '@media screen and (min-width: 40rem)', // tablet width = page width
desktop: '@media screen and (min-width: 60rem)', // larger screens have a different layout.
},
}
Why?
It's usually obvious which value to use.
Spacing
Need to space two buttons in a container? spaces.between.items
. Need to know what space comes after a paragraph when the next element is a heading? spaces.between.sections
.
Media
Layout on mobile and tablet can be the same (one long column). Layout on desktop can be more complex, because there is more space.
______
page width
--
text width
- Mobile: text is the width of the device
|__| |--| |--| |--|
- Tablet: layout is a comfortable distance from screen borders
|______| | -- | | -- | | -- |
- Desktop: doesn't require as much scrolling and layout is a comfortable distance from screen borders
| ______ | | -- -- | | -- |