Responsive Design CSS
So I have been looking a lot at Responsive Design. If you are not familiar, my brutish summary is:
- Fluid layouts are (a) manageable, (b) cool.
- You can use the CSS @media queries feature to rearrange elements on your page layout, based on different window widths, and this means making things easier to read on iPhones and Androids, etc.
There’s a bunch more, such as responsive images, where you try to serve images that are appropriate to the bandwidth of the visitor, and their screen size. But, that kind of sums up a lot of it. The term responsive design was coined by Ethan Marcotte, borrowing it from a term responsive architecture, which refers to a movement to make buildings adapt to their users. I guess that’s where we get somewhat dis-contiguous concepts, such as adapting to mobile devices, and providing fluid layouts, bundled in the same concept. But—both are cool.
Anyway, this leads me toward looking at CSS responsive frameworks, such as the Less Framework, that give you some cool magical things about adapting to different screen widths using @media queries.
See 15 Responsive CSS Frameworks Worth Considering, for a list of other good, juicy-looking things like this.
But what, I thought, about using a WordPress theme framework that already incorporated some of this stuff? So, I discovered:
My instinctive choice, for whatever variety of reasons, is to play with the Roots Theme. When I started to unpack this, I discovered that it has a lot of things in it, that I need and want. And actually—it reminded me, that nowadays, there is such a long list of best practices to remember, that I am just—quite frankly—glad that they remembered so many of them here, that they reminded me about them! —Much better to have these things baked into your initial install, than have to cobble them all on top of it, where possible.
And, I feel they have done a good job of balancing the needs to add sensible defaults, with allowing people freedom and flexibility. That’s always an interesting balance. And, they have included a number of other sub-elements that I have been interested in using for a while. Some, like Modernizr, I have been using for a while, but I am soo happy to have other good people include this for me!
Here’s a list of things Roots covers / includes:
- Careful coverage of backwards compatibility for HTML5
- The ability to use all of HTML5’s more semantic elements—such as article, section, and header
- Be prepared for, and move towards, the future
- A whole bunch of little niceties that I don’t have to worry about, because they have (I think my strategy combines a search for what’s going on, with a knowledge of letting people who want to be experts in a thing, be that)
- Using Modernizr to easily detect a browser’s capabilities, allowing you to create backwards-compatible alternatives where necessary
- Paul Irish’s elegant technique for handling Internet Explorer anomalies gracefully without adding lots of extra style sheets
Bootstrap from Twitter
- Normalizing CSS, which is a leaner alternative to the traditional CSS Reset
- A grid system that allows a lot of flexibility, and you can easily use to manage fluid layouts, or static layouts
- Lots of support for responsive design, including special classes to show or hide things on different sizes of things, where you can just say “Tablet Only”, and have it work, and easily implement @media queries
- A lot of really elegant defaults for HTML things. For example, I love the way they reset bulleted lists to an attractive bulleted list format, but you can apply a class of “unstyled” to remove the list’s bullets (other systems just strip out the bullets, which I think is weird). Very lovely table formatting options, form formatting options, beautiful buttons and even button icons, that you can use all by just applying some classes
Beyond this kind of basic really good, elegant stuff, Bootstrap includes a bunch of fancy UI elements, such as content tabs, and drop-down menu thingies, that are very nicely done. All-in-all, I think there is a philosophy here, of “we chose one good, nice way of doing things—maybe you can just use it!”—I think this is a lovely baseline.
Bootstrap also uses LESS—a compiled CSS that allows you to include variables, calculations, and re-usable chunks. This is another “best practice” that is growing and growing right now, and it is lovely. Note that you can use the pre-compiled bootstrap.css and bootstrap-responsive.css out of the box, if you want to. When you run Roots, it does not do anything with the .less files that are included—if you want, you can modify these, and recompile them into bootstrap.css.
- Path nicifications—they shortcut a bunch of common theme paths, like /css for /wp-content/themes/<my theme>/css. I think that’s handy
- Pre-creating a script.js file for you to use
- Lots of language support built in
- A stylesheet for the TinyMCE built-in editor, so that you can make the text when someone is managing the site, look like it will when it’s published; this is the first time I’ve even seen someone address this!
- Creating a very nice /inc/roots-*.php framework of functions files, to neatly manage configuration, including a roots-custom.php place for you to put your own code
I feel intuitively, that these guys have done a very nice job of balancing making this thing too structured and rigid, with a zillion files for every possible eventuality, or making it so bare-bones that the moment you start, you have to do all this organization of your own, just go get things set up in a good, basic way. The structure of these /inc/roots-*.php files, as an example, is such that you can clearly see where you might want to add your own custom code, and keep a default t thing intact—or, you might want to modify something in the structure of what’s already there. This applies to a lot of parts of this framework.
The documentation is also pretty good, and there is clearly a lot of support and activity for it. As of this writing, there are 26 open issues, and 354 closed ones, since the project was first added to GitHub, about a year ago.
There is documentation on how to use it with Nginx and Lighttpd (=non-Apache, more optimized) web servers.
Very Nice Out of the Box
Lastly, a very important thing in a practical life, is that this theme looks very nice out of the box, as the example screen shot shows. Furthermore, it is already “responsive,” so that if you narrow the window, the top menu becomes an iPhone-like button menu, and the sidebar stacks below.
Installation and Use Notes
A few things I noticed:
- Installing the theme copies the inc/h5bp-htaccess into the document root, adding several optimizations provided by HTML5 Boilerplate. But for whatever reason, this totally crashed my local Apache (maybe its just old). So, I had to comment a number of those things out. You could probably just delete the generated .htaccess file, and then go do WordPress Settings > Permalinks to rebuild it as the default.
- At first, understanding Bootstrap was a little intimidating, until I realized that I could let 95% of it just be as it was, and just learn what little @variables I needed to modify, and then recompile bootstrap.less. (And in fact, I could leave 100% of it alone, if I wanted). For the most part, you can just allow its basic goodness to influence your site, and override it as needed, and utilize the classes to make it do special magic things.)
- Roots calls 4 CSS files:
- css/style.css — This appears to just be the HTML5 Boilerplate baseline. I believe one would not want to modify this, normally
- css/bootstrap.css — The compiled Bootstrap file. Again, if you wanted to modify anything here you could, but you’d want to modify the .less files, and recompile that
- css/app.css — This is a nicely-organized skeleton which is mostly empty, and provides a nice place to add your custom CSS, with some reasonable sections
So a very big part of all this, in considering a framework you might use, and thinking about the implications for the future, and long-term use and so on. So a great part of using the Roots Theme, is that they have built it on a bunch of other best-practices work—HTML5 Boilerplate, Bootstrap, etc.—that, themselves are taking advantage of other good best-practices code.
Now, we want to balance efficiency of developing our own themes, with being able to take advantage of code updates in the Roots Theme. The theme is set up so that you could really do it either way. It includes a bunch of hooks, which you could use in a child theme. But, the author does not just praise the use of child themes, acknowledging that the tradeoff is, that while using one makes it easier to update the core Roots code, it makes development slower and less intuitive, as well.
Personally, I could imagine that if I was doing a simple project, then perhaps I might use a child theme. But overall, I am with them—I’d rather use Roots as a starting place, and modify the code as it worked for me.
Now, having said this, there should be a good development process in place. Perhaps one should decide which files were “sacrosanct”, and make them read-only, and decide on a standard about how and when files were to be modified.
Another thing that would be smart to do, is keep a snapshot of an unchanged version of the code, from when you started the project (e.g., by using a Git tag). This way, when Roots was updated, you could see what changes between that and what you have now, were a result of updates in the core code, and what changes were a result of your modifications. I guess you could use Git to merge the Roots core updates into your project … it would be a bit sophisticated, but it would make a lot of sense to do learn how to do that.