Frameworks Aren’t Necessarily the Answer, or “Enter the Toolkit.”
Currently, the one post on this blog that get’s the most views (I get traffic coming every day), is my somewhat outdated comparison of Foundation and Bootstrap. Let’s face it, frameworks are pretty awesome!
After all, why in Heaven, Earth, and Hell should you go about re-creating things like buttons, grid layout code, and so on? You really shouldn’t most of the time. If you’re designing an app for internal use in a corporation, Bootstrap’s and Foundation’s default styles are perfect.
If the app will be publicly usable, you may want to customize things to make the app “yours” in an aesthetic sense, but otherwise, you’re golden.
These frameworks also work just fine for smaller websites. In fact, I built a few on top of the Foundation theme for WordPress, and I loved it.
“But there’s going to be a problem, isn’t there?”
Yup. A couple of them, in fact.
Problem 1: Javascript Incompatibility
If you code your own JS, or you don’t plan to use anything but your chosen framework’s built-in JS components, then you’ll probably be fine. But the moment you start integrating jQuery plugins, like SuperSized for WordPress, expect trouble. Now, I managed to solve that particular problem with a “noconflict” wrapper, but still…
Problem 2: Extraneous Elements and Styles
Let’s say you’re just building a one-page website. you might be tempted to use a framework for quick and easy layout options, but that leaves you with a lot of extra stuff that you don’t need. Now, you could go through it and delete everything you don’t want, but that’s time consuming.
Problem 3: Extra Work
Alright, so you do need most or all of the various elements for your current project, but they look wrong. Your framework might have some built-in options to make them look right, but that requires a butt-load of extra classes. However, you might also have to go and over-write the CSS for every element you intend to use.
Whether you mess with the original framework files, or just over-write all the rules in a sort of “child theme”, you end up spending lots of time trouble-shooting, and potentially using way too many lines of code. Bandwidth isn’t always unlimited, after all.
“Alright, but you have some kind of solution to propose, right?”
I do. This is where having your own personalized basic toolkit comes in handy. This is what I have in mine:
For Static Websites:
CSS
- SimpLESS: This is a LESS CSS complier that you can download from here. If you are running Linux as your web development OS, download the Windows version and run it with WINE. The Linux version doesn’t work right now…
- Semantic.gs, by Tyler Tate. This is a minimal, easy to use grid layout system that can be quickly customized to suit your needs. Since all of the math is done by SimpLESS, you aren’t stuck with any set number of columns. Just change a number or two, and you’re good to go.
- Various pre-made variables and mixins to provide the rapid addition of rounded corners, CSS gradients, color operations, and so on.
JavaScript
- HTML5 Shiv: Lets face it, you always need this.
- jQuery: Obviously.
- Zen Coding: You have no idea just how much easier my life has become since discovering this particular project. If you don’t already know what it is, click that link.
Snippet Library
- WordPress Functions: I use WP more than any other CMS, and I have found that is it now easier for me to build my themes from scratch rather than modifying anyone else’s existing theme. Even blank themes like Starkers come with too much stuff for my taste. I’m a big believer in only putting in what the project needs.
- CSS Font Stacks: Most of the time, for body text, I use one of these font stacks. So, into my toolbox they went.
- Javascript Functions: Equal height columns, for example.
I have not included a comprehensive list for two reasons: One, you should really be making your own toolkit, or at least customizing someone else’s to your needs. two, I plan to release my toolkit as a Mercurial repository on BitBucket.
It might even come in handy…