Semantify, and CSS tools based on Blueprint

As you may already know, I’ve been a member of the Blueprint team ever since I submitted a bunch of changes for the reset.css and typography.css core files. My changes are still in there, and I’d say the framework looks very solid right now at version 0.6. The reset.css and typography.css files are mostly standard stuff, but the real meat of the framework is in grid.css. It sets up a basic 960px container and then makes it very easy to build a grid-based layout with anywhere from 1 to 24 columns. Grids are essential in design, on and off the web, and a very good example of the clean layout that grid.css provides is the Mom Blog Network, which was recently designed with Blueprint. The way everything lines up is beautiful.

Now you might have heard that there are some tools based on Blueprint. The tools page on the Blueprint Wiki, which I just created this morning, has some links to various tools, with more coming as people update it. One of the interesting things about BP is that besides offering a quick way to facilitate the common basics of CSS design, is that it has also spurred some interesting tools for CSS development. I’ve always been thinking about CSS tools since I first learned CSS; one could make a complete layout back in the table days with Dreamweaver or Frontpage, because tables were very easy to set up in a programmatic way. CSS, however, is much more difficult, and while I much prefer writing CSS by hand with or without BP to start over using an antiquated visual editor that mucks up my markup, it would still be very cool to someday have visual editors that produce proper and clean CSS. The way I see it, BP is valuable as a hand-coding framework, but might be even more valuable as an enabler for new CSS tools.

Just have a look at the grid generator. It follows the same structure as the basic BP grid.css, but allows the user to set that up with any size container and any number of columns. Or look at the layout builder. It’s a bit confusing at first, but you can drag and drop columns, change their sizes, and it usually ensures that the right-most column sits flush with the container. That’s impressive stuff. Imagine taking a layout built with this, submitting it to a processing script that uses code similar to the grid generator, and getting back a custom grid.css file with the exact CSS to handle your unique grid.

That’s a visual WYSIWYG editor for creating a proper CSS grid layout. Does anyone not like the sound of that?

There’s another point of contention with BP, however, and it’s that the class names used in grid.css are not semantic. Jeremy Keith, who I respect muchly when it comes to CSS, summed the whole argument up nicely in Wireframework. The idea is, if you really like ensuring that your markup is as semantic as possible, and not peppered with weird classes like “column span-17 last“, then BP’s grid.css isn’t suitable for deployment. That makes sense. Presentational class names, while something I’m willing to accept when I’m in a hurry, are not something I want going into markup that deserves real semantic loving (oh, that sounds weird).

So I had this idea… what if I made Jeremy Keith’s process work from wireframe to deployment? What if you can use and abuse BP’s horrid presentational class names to build up your grid, then run them through a tool that allows you to translate the class names you’ve chosen to proper, semantic names that will go into your final deployment, and you get back a very clean myGrid.css file that’s tailored to your markup, only uses the CSS you need, etc. etc. Wouldn’t that make Jeremy and all the other semantics-freaks eat their hats?

So I got to work on Semantify. This is just a demonstration of my idea, though it works pretty well, neglecting some important edge cases. What you do is this… you give it a URL of your page, it finds all the BP grid.css class names you used, then joins all the necessary CSS for these (so ‘column span-17‘ can become one class), and allows you to rename these classes so that you get back a custom-tailored CSS file that has your semantic names and completely replaces the core grid.css file.

Now, picture this:

1. You use a visual editor to design your grid, much like what one might do in Photoshop or GIMP. It’s got grid-lines, guides, etc. and you can drop in default content to get an idea of what the final result will look like.
2. The editor builds your containers and columns with the core BP grid.css classes but allows you to mark your columns with custom class names that it will remember for you.
3. You hit the magic red button and the code monkeys go to work joining all your CSS intelligently, grouping the rulesets with your custom class names, and returns a tailored myGrid.css file that you can use throughout your site.

You don’t have to know much CSS to do this. You don’t have to worry about browser compatibility, because BP already thought of that. You don’t have to worry about bloat; myGrid.css doesn’t have anything more than what you need. And it’s as semantic as you want.

Does anyone not like the sound of this? Because, between the different tools we’ve built on top of the framework BP provides, I definitely think this is possible. I know this is possible. I think it’s only a matter of time before we’ll combine all the steps and make this work. Actually, I’m about to get talking with Don, who made the layout editor, about a way for him to submit the state from his tool so that I can take that information and create a CSS file from it. There’s a lot of work necessary to make it actually happen, but I promise… soon, it will be a reality. If you’d like to help out so we can realize this sooner, get on the BP mailing list and join the discussion.

P.S.: Much of what would go into this would apply to puglins as well. Ajax Bestiary.com has a good rundown of some of the current Blueprint plugins, as well as a recent plugin that makes the full Silk Icons set available in a compact way. We’ve recently been talking about ways to allow one to generate a compact icons image that has only the icons he/she plans to use along with a CSS file that’s tailored to that, which could also have custom class names instead of the presentational ones SilkSprite uses. That would make SilkSprite a seriously ideal way to use the Silk Icons set in a CSS design, and it could work for other sets too.

Exciting stuff