Momentum CSS Updated: Rewritten and Re-released
Back in 2008, I released a CSS helper file that had semantic names, helper classes, and common patterns that I identified in sites that I’ve developed. The initial release of Momentum was assembled for my own use, but I also hoped that others might find it useful or at least see the value in using standard naming conventions when working with a team of people.
With the release of similar files such as HTML5 Boilerplate and Bootstrap, it inspired me to revisit Momentum to see what I could improve and how I could adapt it to the projects I work on currently.
New Objectives
One thing I was trying illustrate with the 2008 release was that when you work with a team of people, especially in an agency-type setting, it is important to adhere to a certain set of naming conventions.
The result of not adhering to naming conventions can lead to “spaghetti maintenance.” What I mean by this is if you manage multiple sites and on one site the header is called #branding, on another it is called #header, and on another it is called #masthead, you introduce additional maintenance overhead if things are harder to find and also the potential for code bloat if the unused selectors are being left in the stylesheet.
With the adoption of HTML5, this is less of a concern since there are now semantic element names that are part of the emerging standard. I still feel that this is a valid point, even though I left my naming conventions out of this release since I feel it should be up to the development team .
Agnostic and Open to Interpretation
The thing that was most important to me was being able to keep the file as abstract as possible so it has a lot of potential uses. Momentum is meant to be a lightweight CSS helper file, not a full-fledged grid framework. It makes no assumptions about server environment, site dimensions or JavaScript framework preference. The only thing Momentum includes that aside from the obvious CSS file are Sass files (scss) to extend the capabilities with mixins and allow colors to be assigned to variables.
Personally, I use the Sass files and feel like Momentum is the most useful that way, but you don’t have to use it. It works the same way if you compile the CSS file from SCSS or if you edit the CSS file directly. Sonspring just published a nice overview of Sass that can help you get started if you’ve never used it before.
Usage
Using Momentum is simple. All that needs to happen is just link to the static CSS file in the head of your HTML document. During development I suggest leaving the file uncompressed and then minifying and at the time of deployment or on the server.
If you are using the Sass files, make sure you are running sass --watch from the directory your project directory or set :load_paths in your Sass configuration so the imports work properly. In other words, if your files are in C:\Users\[user name]\Documents\project-name, make sure you cd into that directory as opposed to starting sass from your user directory.
Conclusion
This project is hosted on Github. If you find this useful, send me a note on twitter or leave a comment below. I always like to know when my work is appreciated.