Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
ui-components
ui-components
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 29
    • Issues 29
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 4
    • Merge Requests 4
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • linguala
  • ui-componentsui-components
  • Issues
  • #79

Closed
Open
Opened Oct 07, 2020 by Alessandro Pittori@apittori🚀Maintainer

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
    |  ______  |
    |  --  --  |
    |  --      |
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: linguala/ui-components#79