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.shandconcat.shscripts. - 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.shwill run the default watch and compile the CSS. Theconcat.shwill concatenate and minify all the JS files in the theme's JS directory as well as all the core JS files that are not withincore/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.