The ever daunting question we as developers face is “How am I gonna structure things for a project?” As a framework, SUIT CSS provides an implementation of an architecture that others can use as the basis for a working application.
Think of it as a guiding path giving structure to chaos, reducing helplessness/fear and enforcing design principles where CSS tends to lack (compared to other languages like JavaScript that enforces rules and throws errors).
With SUIT authors are provided with a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools available as independent modules.
At it’s core, SUIT is a set of naming conventions designed for styling reusable components. The benefits are most apparent in a system that considers components to be the building blocks of your application. Naming conventions help to scope component CSS and make your widgets render more predictably.
SUIT CSS is a methodology focused on improving the CSS authoring experience for component-based development. A component-based system allows for the implementation and composition of loosely coupled, independent units into well-defined composite objects. Components are encapsulated but are able to interoperate via interfaces/events
~ SUIT CSS Documentation
SUIT works best with NPM, but if Bower is your chosen route then you’ll probably have to use a build system that asks you to list all the CSS files you need concatenated (point to the installed paths of each file in the lib directories), pass individual files into the conformance tool if you want them checked and finally pass the concatenated bundle into the preprocessor. It’s highly suggested though to not use Bower.
To install SUIT with NPM you can do the following from your project root in order to install SUIT locally:
npm install suitcss --save && npm install suitcss-preprocessor --saveenter this command in your terminal
Since we’re installing suitcss locally we’ll need to create a build operation using an npm-script. Add the suitcss command to an npm-script in your package.json
"scripts": {
"build": "npm run setup && npm run preprocess",
"preprocess": "suitcss index.css build/build.css", // We could also install suitcss globally. Your choice.
"setup": "npm install && mkdir -p build"
}package.json npm build script block
Create an entry file for now called index.css and import the suitcss package. Add values for custom media queries below your @import rule(s) otherwise the terminal will shout warnings (totally fine it just means you’re using the default values of the media query vars).
@import "suitcss";
/* media query vars go here */
/* pass any :root vars here */index.css importing every SUIT module
Now we can run npm run build from our project root and SUIT will output a build file to build/build.css.
For the curious on NPM magical wizardry, a tool called Rework-npm helps handle imports from your node_modules directory. Since we imported suitcss in our index.css file we get every module the project contains, but we could also import separate modules (provided they have been installed first with npm) like so…
@import "suitcss-base";
@import "suitcss-utils";index.css example demonstrating @import for separate SUIT modules
It’s suggested that you depend on individual packages as and when you need them, however, you can install all the CSS packages at once if you prefer like I’ve demonstrated previously.
Here’s a starter index.css file for you to get started. The starter CSS file includes every module for the project as individual imports so you the author can choose which modules you would like. Feel free to customize to “SUIT.”
@import "suitcss-base";
@import "suitcss-utils-align";
@import "suitcss-utils-display";
@import "suitcss-utils-layout";
@import "suitcss-utils-link";
@import "suitcss-utils-offset";
@import "suitcss-utils-position";
@import "suitcss-utils-size";
@import "suitcss-utils-text";
@import "suitcss-components-arrange";
@import "suitcss-components-button";
@import "suitcss-components-flex-embed";
@import "suitcss-components-grid";
@custom-media --sm-viewport (min-width: 320px);
@custom-media --md-viewport (min-width: 640px);
@custom-media --lg-viewport (min-width: 960px);
:root {
--base-color: inherit;
--base-font: 16px sans-serif;
--base-link-color: #069;
--base-link-color-hover: #069;
--Arrange-gutter-size: 10px;
--Button-border-width: 1px;
--Button-border-color: currentcolor;
--Button-color: inherit;
--Button-font: inherit;
--Button-padding: 0.4em 0.75em;
--Button-disabled-opacity: 0.6;
--Grid-font-size: 1rem;
--Grid-gutter-size: 10px;
}
html {
font-size: calc(var(--base-font) * 2);
color: var(--base-color);
}Each SUIT module comes with it’s own structure and class names to help guide you even further as you build out your system. Be sure to consult the documentation for each SUIT module concerning class names and markup patterns.
For Sass, LESS, Stylus users you may have caught on early that there are no provisions for any of those mentioned languages, however, as an author you can adopt the principles and naming conventions when working.
Is SUIT a good fit for you? Let us know.
References :
- SUIT CSS
- SUIT Docs
- Practical Example
- Custom CSS Preprocessing Explained
- CSS Application Architecture (SmashingConf 2013, Freiburg) start at 15:00
- Adaptation and Components (CSSConf Australia)
- grunt-suitcss
- NPM Scripts
- task automation with npm run
- Modular CSS preprocessing with rework
- Using rework-npm for bundling css from npm along with myth and clean-css
