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
```
|  ______  |
|  --  --  |
|  --      |
```