I’ve made quite a few updates to my css3-foundation project of late. If you’re not familiar with it, it’s a Compass-based CSS3/HTML5 framework I built at my last place of work for bootstrapping web development projects.
You might ask: “Why yet another framework? Aren’t Twitter Bootstrap or Zurb Foundation good enough?” I’m going to give the asshole answer: they’re more than I need. It’s not just that, though:
- I still believe strongly in separating content from presentation. I don’t like littering my markup with a million presentation-related classes when I’m already using Sass; I prefer to keep my markup clean and readable and use Sass mixins instead. This means I don’t really believe in SMACSS. Yeah, I said it.
- Outside of rapid prototyping, I feel the frameworks have limited use. You can spot a Bootstrap site from a mile away, and chances are that your production application, past the initial get-it-working stage, needs its own, unique visual identity, which you won’t achieve on one of these frameworks without significant customization. If you’re already spending so much time customizing the look and feel, why not just start from a lighter baseline and build from there?
So what I’ve done is build that lighter baseline, which has what I need and no more:
- A master page layout with JS and style includes structured where and how I want them
- Basic styles and a framework of variables that I need to modify to set the baseline: colors, fonts, layout.
- Mixins for stuff I use all the time, like retina image backgrounds, common font size/line height combinations, inline lists.
- A responsive grid for rapid prototyping when needed; I’ve chosen to go with Susy.
Everything else, I tend to change from project to project, so I leave that alone. This approach works for me; your mileage may vary.
All that said, this project continues to be the front-end baseline of every web project I start, and I’m constantly tweaking it as I find things that work well, and to take advantage of new techniques I learn. Recent updates to the css3-foundation project include:
- Adding support for Guard, LiveReload and Pow.
- Upgrading the icon font mixins to use Rico Sta. Cruz’s icon-fonts project
- Replacing the retired 1140px CSS grid with Susy
Try it out; let me know what you think.