I’ve been building web applications since the beginning of the World Wide Web and yet I’ve never become very knowledgeable about CSS.
I’ve listened to the arguments about page layout (styles versus tables) and hacked my way through enough CSS but always found myself more frustrated than enthralled.
JavaScript frustrated me in the early days too. Compared to C++, Java, C#, etc it left “dirty” to me but I’ve grown to enjoy and embrace JavaScript and I know that I need to do the same thing with CSS.
CSS is very powerful but you need embrace it to really Grok (http://en.wikipedia.org/wiki/Grok) it.
But, I have some issues :
- I’m in a hurry – I need to be building apps now.
- I don’t think aesthetically – I’m a bits and bytes guy.
- I’m a pragmatist – I don’t care about purist type elegance.
So I’m choosing a “CSS Framework”.
If you search the web you can find lots of discussions about why NOT to use a CSS framework. Purists say that a CSS Framework is a contradiction in terms, but I suspect that 99% of developers doing significant client side work are using a CSS framework, even if their framework of choice is a collection of code that they wrote themselves (as opposed to someone else’s formal framework).
There are some basic criteria when choosing any framework.
- Rich Functionality
- The flexibility to extend and modify features
- Understandable code
- Good Documentation
- Good usage examples
- A vibrant community
- An implementation that works the way I want to work
When it comes to choosing a CSS framework there are some additional criteria.
- Reset Strategy
- Typography Implementation
- Semantic Naming
Especially “Semantic Naming” becomes incredibly important the more complex your markup becomes.
There is a cyclic relationship between HTML Elements as Identified by “Id”, CSS Classes that are applied to those elements and the JavaScript code that is executed against those elements, often that are found by way of the classes assigned to them.
Random naming of CSS classes or a set of naming conventions that lack logical value can turn the whole stack into a mess.
So, good naming strategy is crucial to a usable CSS framework and a way to customize naming in conjunction with your application’s problem domain is even better.
There are LOTS of CSS frameworks to choose from and several dozens of blog posts on the web listing the popular ones.
Rather than enumerate all the ones that I did NOT choose, I though I’d share some reasons for choosing the one that I did choose.
My criteria seems to be best met by Blueprint CSS (http://blueprintcss.org/)
- A CSS reset that eliminates the discrepancies across browsers.
- CSS Reset based on Eric Meyer’s (http://meyerweb.com/eric/tools/css/reset/)
- A solid grid that can support the most complex of layouts.
- Typography CSS that implements a baseline grid.
- Form styles.
- Print styles.
- A Plugin model and a collection of available plugins.
- En ecosystem for use in different development. (WordPress, Drupal, etc)
- Tools, editors, and templates.
While the checklist seems complete is the combinatorial effect that we end up being interested in.
For example, using a CSS reset by itself nullifies browser defaults (which all tend to look different to the user) but using a CSS reset by itself, especially one as complete as Eric Meyer’s, means there is a lot of default behavior to be re-defined. Of course Blueprint CSS handles this for us.
For my needs there is one more very important feature of using Blueprint CSS.
Blueprint CSS comes with a Ruby script that lets you customize Blueprint style sheets using your own semantic class names.
This isn’t a matter of purism for me. UI code and markup can get very complex and maintainability, as well as debugging, can be drastically effected by semantic naming.
Standard framework names like these :
[sourcecode language=”html”]
<div class="span-9 last">
<div class="grid_6 alpha">
[/sourcecode]
… are learn-able, but just have no RELATIVE meaning inside our own application.
Here is some good information on CSS Semantics and using the Blueprint CSS customizer.
http://joshuaclayton.me/blueprints_compress_a_walkthrough.html
http://www.sitepoint.com/css-frameworks-semantic-class-names/
More to come…..
Have you tried 960.gs?? It works as good as Blueprint does and it has additional features like creating custom grids
Regards,
All good reasons to choose Blueprint, but I’ve stuck mostly to stuff of my own design (soon to gain some SASS/LESS-like pre-processing using the Python-native CleverCSS package) because fluid/liquid layouts are a comparatively recent addition to every mature framework that I know to support them and feel like an afterthought at best.
…and I consider that antithetical to what the web should be.
For example, at the moment, one of my spare-time projects is designing linearization strategies and appropriate media queries for all the templates I use which I didn’t design myself (my blog, for instance) so that they’ll be comfortably viewable down to at least 320×240. (The blackberry-style smartphones some of my friends use)
Thanks Stephan,
If I were able to “thin in CSS” I wold consider writing my own as well, even if just to optimize. I did consider the small scale devices but I came to the conclusion that, for my target audience, the percentage of those devices was very small and rapidly diminishing. Thanks for the note.
You’re welcome.
With the kind of stuff I make, it’s been my experience that the hard part is getting the site to flow down to the 480px width of a common portrait-oriented iPhone or Android Phone.
Usually, once I’ve got that, it’s just minor tweaks using CSS media queries (eg. collapsing “> Next Quote” down to “> Next” and then “>”) to get it down to 320×240.
I’ve been using BootStrap, which gives you a decent starting point for UI as well as a scaffolding.
I just started playing with Skeleton as a framework – nice features and scales nice from desktop to mobile and is still readable in both. My test page – I started playing yesterday – is at http://Gfw.yyyz.net – did you look at Skeleton?