The folder structure of the ux repo's CSS reflects abstractions that the containing files use (in contrast for example, to CSS for specific pages). The top files configure various aspects of the rest of the folder:

  • ui - is the only exported file, importing only the other top directory files (order matters)
  • _theme - holds SASS variables (primarily colors)
  • _setup - holds variables that configure the output of InuitCSS (the framework used as basis for our css)
  • _imports - imports all the files from folders (order of these matter, put not particular sections ie. components need to be last, but their order does not matter)
  • _fonts - holds all the @font-family declarations

The folders, in order they should be loaded in _imports:

  • helpers - are mixins, placeholders and similar SASS abstractions that need to go before anything else. Ideally all the files in here would not complite to any selectors
  • vendor - external styles, proxied by files that my override some styles
  • animations - @keyframe declarations
  • base - these are low specificity, general selectors that form the base of everything else
  • components - the bulk, of all the CSS, the components the make up our CSS