What is Thematic Grid?
My attempt to re-create the Thematic
Theme Framework using the 960 Grid System.
My attempt to re-create the Thematic
Theme Framework using the 960 Grid System.
Primarily because I wanted to practice web design and development. I love Thematic as it is, and I see no reason to use it with the Grid System unless you can make a cool design with the grid. If you can, great. If it just won't work, I'm not offended.
Install Thematic Grid in the same way you would install any child theme.
You have to modify the theme to your liking using the Thematic Grid
files themselves. To that end, I tried to keep style.css and
functions.php as clean as possible. I also included a zipped version
of the original 960 Grid System folder, in case you want it.
The Thematic Grid style.css removes the usual call to the layouts
included in thematic/library/layouts. They're replaced with a call to
the 960 Grid (css/960.css) and a layout that mimics Thematic's default
two-column layout (css/2c-r-fixed-grid.css). Note that Thematic Grid
does not use the 960 Grid System's CSS reset or typography stylesheets.
I used jQuery to add the appropriate grid_X classes; I also added two
functions that place clear classes below the header and above the
footer. The code lives in includes/grid_functions.php and is called
via an include in functions.php. Hopefully you'll find the code easy
enough to modify or delete comfortably.
My goal was to re-create Thematic as closely as possible, but of course Thematic Grid is an inexact replica. The differences between the two --- that I know of --- are:
The #primary aside loses its border. Because divs in the 960 Grid
System require exact widths (300px, in #primary's case), the 2px
border broke the grid. Alternatively, you could shrink the asides to
298px and add the border back.
Thematic includes a layout that swaps the main asides and the content,
such that #content appears on the right (2c-r-fixed.css). Under
this layout, #content is 620px wide, as opposed to the default
layout, in which #content is 540px wide. I did not preserve this
difference --- #content is 540px wide in either case.
I could not figure out how to recreate the 3c-fixed layout, so it's
not included.
Yes. Some layouts adjust the width of divs so that, for example, a div
with the grid_8 class will have 540px width, not 620px. I adjusted
these because I did not know of a way to dynamically asign grid classes
based on the layout imported into the CSS (which changes various width
requirements). I had to pick one grid class and stick with it throughout
all the layouts.
Of course, if you're uncomfortable with that system, you could use
jQuery to add the grid size you prefer, then alter the Thematic Grid
layout stylesheets accordingly. Again, you shouldn't feel wedded to the
included layouts and their associated hacks. In fact, none of the
layouts in the css folder include many declarations; you could ignore
them entirely and create your own in style.css.
I worked on Thematic Grid mostly for my own training. That said, I hope someone finds it useful, or has suggestions for how to improve the code so that it can become useful.
Please contact me at dave@dherrera.org. I'm also @dlh01 on Twitter.
Thanks in advance.
Released under the GNU General Public License, version 2. Thematic is copyright Ian Stewart and released under the GNU GPL v.2.
includes/grid_functions.php