Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SUIT scss structure

SUIT: Smart User Interface Toolkit

Principles:

  • Allow for easy and flexible theming of a robust core.
  • Core contains primarily structural SCSS.
  • Core contains JS libs and common JS plugins.
  • Themes contain primarily non-structural SCSS.
  • Themes contain custom JS plugins.
  • Compiled, concatenated, and minified CSS and JS is stored in each theme.

Building:

  • The SUIT root contains watch.sh and concat.sh scripts.
  • Running these scripts will ask for the name of the theme to which it should be applied.
  • The script will check for the existence of a corresponding script in theme directory and give precedence to a theme's custom watch or concat script.
  • Otherwise, watch.sh will run the default watch and compile the CSS. The concat.sh will concatenate and minify all the JS files in the theme's JS directory as well as all the core JS files that are not within core/js/libs.

Example HTML:

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="/suit/themes/classic/css/style.min.css">
    <script src="/suit/core/libs/modernizr.min.js"></script>
</head>
<body>
    [content]
    <script src="/suit/core/libs/jquery-1.7.2.min.js"></script>
    <script src="/suit/core/libs/prettify.js"></script>
    <script src="/suit/themes/classic/js/application.min.js"></script>
</body>
</html>

Concerns:

  • Complexity of the arrangement.
  • Can't immediately see all the styles for a component when looking through the theme's files.
  • Hard to cleanly separate structure from theme like this.
  • The scope for themes to extend the core may be too great.
  • Repetition of selectors.
  • Because of the cascade, some core components would be better imported at the top of a theme's corresponding file. Does it get confusing to have to juggle where you should import various core files.
  • What's to stop people cloning this, using a theme, and still wanting to be able to update the underlying theme when it changes...therefore, they build a third layer of CSS that sits on top of the theme. Could get a bit silly.
  • How do you version something like this? It would almost merit pulling the default theme out into a separate repository.
suit
├── concat.sh
├── watch.sh
├── README.md
├── core
│   ├── js
│   │   ├── async-snippet.js
│   │   ├── suit-dropdowns.js
│   │   ├── suit-tabs.js
│   │   ├── libs
│   │   │   ├── jquery-1.7.2.min.js
│   │   │   ├── modernizr.min.js
│   │   │   └── prettify.js
│   ├── scss
│   │   ├── _functions.scss
│   │   ├── _helpers.scss
│   │   ├── _mixins.scss                       // property and structural mixins
│   │   ├── _normalize.scss
│   │   ├── _variables.scss
│   │   ├── components                         // structural components
│   │   │   ├── _alerts.scss
│   │   │   ├── _buttons.scss
│   │   │   ├── _dropdowns.scss
│   │   │   ├── _forms.scss
│   │   │   ├── _grid.scss
│   │   │   ├── _icons.scss
│   │   │   ├── _labels.scss
│   │   │   ├── _media-iblock.scss
│   │   │   ├── _media-iembed.scss
│   │   │   ├── _media-ifig.scss
│   │   │   ├── _media-iset.scss
│   │   │   ├── _site.scss
│   │   │   └── _tabs.scss
├── themes
│   ├── example
│   │   │   ├── css
│   │   │   │   ├── style.css                  // sass watch output
│   │   │   │   └── style.min.css              // concat.sh output
│   │   │   ├── font
│   │   │   ├── img
│   │   │   ├── js
│   │   │   │   ├── application.js             // concat.sh output (excludes core/js/libs)
│   │   │   │   ├── application.min.js         // concat.sh output
│   │   │   │   ├── plugin1.js
│   │   │   │   └── plugin2.js
│   │   │   ├── scss
│   │   │   │   ├── _core.scss                 // import any core files needed by the theme
│   │   │   │   ├── _typography.scss
│   │   │   │   ├── _variables.scss            // override core variables
│   │   │   │   ├── style.scss                 // import all theme .scss files here
│   │   │   │   ├── components                 // component themes
│   │   │   │   │   ├── _alerts.scss
│   │   │   │   │   ├── _buttons.scss
│   │   │   │   │   ├── _forms.scss
│   │   │   │   │   ├── _labels.scss
│   │   │   │   │   ├── _panels.scss
│   │   │   │   │   ├── _site.scss
│   │   │   │   │   ├── _tables.scss
│   │   │   │   │   ├── _tabs.scss
│   │   │   │   ├── plugins
│   │   │   │   │   └── _prettify.scss
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.