The CSS moshpit - a non bloated gridbased css drupal theme

20 January 2009 mortendk
Getting my theme stuff together once and for all

Now 2 days after the Drupalcamp in Cologne (which was "fielspass" <- see i kinda learned some german), I sat down and took a hard look at my old custom basetheme and thought about:
* Should get on the bandwagon of grid based css frameworks?
* getting accessibility done right -ya know title & content in top of the page menus in the buttom
* make sure that i can use this for any design a client comes with (both grid and nongrid designs)
* .. and clean up the last bit of crap that was floating around.
* and how can I give stuff back to the people!

Accessability

This is actually very simple - content first! navigation & crap later.
Blind people etc should have a possibility to use the site -yeah I know im really embarrassed that i havent done this right before!

oooh and as and added bonus: your very very very very geeky Friends can stop bitching and fire up in lynx! a nifty firefox lynx viewer

This wasnt really as hard as I thought - just a lot of float:left + negative margin-left + some nifty thinking, and since I NEVER do liquid based sites (who wants a line of 42458309840 characters) its not a problem.

Grid systems

One thing I look for when im searching for a framework, is how much "crap" do I have to work around to get the stuff done my way, and ind this case, how easy is it actually to get into though mighty Drupal - and no Drupal is not crap ;)
I dont wanna end up with rewritting every html element tag, if i need to set a with of an element.
So its important that I dont have to do a ton of functions overwriting and add all kinds of classes. Its perfectly possible in drupal (everything is!) if its not necessary then why do it? My development time is gonna be multiplied by a ton if this is the case.

So basically this rules out (at least for my way of doing theming) blueprint and 960 grid systemes as my grid system.
Both of em are kinda "bloated" with loads of class definitions im never ever gonna use, yes i know that i can compress em, but i think we have enough classes to overwrite these day in drupal.
For prototyping though these 2 frameworks would kick ass though.

And another thing ... I havent yet sean a grid based system that puts the content first (see Accessability) :( - if there is on somewhere -please let me know!

and one last thing: I wanna be able to break free from the grid system, whenever I have a design that demands it, its hard enough to get a designer to deliver all the aspects of a site - its gonna be impossible to get 'em to redesign the site based on a grid (and i thought the Coders were difficult...)

But in the end theres loads of cool stuff build into the grid designs,so if i just change the place where im defining the sized, i would be okay, and lets face it theres lots of cool stuff to steal "be inspired by" from these grid systems :P

So last night I sat down with a cup of coffey and tried to get all this stuff moshed together.

Its not yet a drupal Theme - but will be sometimes later this week (first im gonna test it on a couple of "innocent" clients)

So CSS front end Heros load you weapons: and start the shooting

AttachmentSize
moshpit.zip27.71 KB

So, in this case,

So, in this case, non-bloated means having to specify grid sizes again and again, every time you make a new block?

;)

Mikkel Høgh 20 January, 2009 - 14:19

yup or just use the

yup or just use the inheritence - at some point it gonna be bloated, and then ill start all over ... again. actualy the last 10-15 sites i have done there have very little sizing besides of the basic grid - but will se where this ends

mortendk 20 January, 2009 - 14:58

...

Essentially this is the same thinking that people use when they decide to go with their own homebrew cms vs using Drupal, so by this logic people shouldn't be using Drupal either.

Is roll your own CSS smaller? Yes. (How much are we talking about here by the way, a few k!? There are probably 100 things more worthy of optimizing in an average site than worrying about shaving off the last 5k of css from it)

Is roll your own CSS heavily tested and peer reviewed, easier to use, save you *tons* of time, and bring standards into place that you or even an entire dev team can use and rely on? Nope. (but a CSS framework does)

Caleb G 20 January, 2009 - 19:16

@caleb G I think your

@caleb G I think your missing the point i think that css frameworks are great!
But to be honest the only thing they do is this:
* Reset the browser to a common default
* Define some commen typography rules
* Adds a well defined 960px based grid (12,16,24)

If one of these frameworks did satisfy my needs dont you think i would have gone with that?

Look into the code it should be clear why theres a reason for doing this:

1. Getting the content first in the html.
The SEO fanatics are happy, and even more we are following the accessibility guidelines, by degraiding so smooth that even a lynx browser will smile

2. removing the dependencies of adding html classes to all elements that needs a defined with - which in drupal is not always the easiest thing: Lets say you want to set the with of the primarylinks like this:
the 1. menu element is 1 grid wide
the 2. menu element is 2 grid wide
the 3. menu element is 1 grid wide
the 4. menu element is 3 grid wide

That would take a huge amount of time to add the classe to the li's in the menu. (and not to say not an easy task for a non phpgeek)
So instead by ending up being forced to use a css frameworks definitions of how the html should be written (in this example adding a class that defines the width) we uses the "normal" way of how drupal "thinks": Fix it in the style sheet - so were instead now adding the values to the classes instead.

Offcourse in the page.tpl file its really easy to add the width based classes (besides of the reordering of the html, which i at this point sees as being so much Quicker and easier to add through the css)

The plan here is to get the best of both worlds!
And in the process maybe remove some of the around 200 classes (those we dont need) - you cant find a themer who isnt sick & tired of the ton of classes that drupal comes with, that we have to overwrite everytime, so why would we add even more?

If that means to end up creating yet another framework, or making a bastard child based om 5 different css frameworks to fulfill the needs of some Drupal themers well so be it - at this point we have a ton of Zen based basic themes, should that stop ?

Im still having nightmares from the days where phpNuke was the tool for creating communities, and mambo was the CMS to use... im kinda happy that some Belgium's decided to do other things than to make good beers & chocolate ;)

mortendk 20 January, 2009 - 22:36

bbcb

1254

abdeslam 22 January, 2009 - 01:00

Alpha/omega classes

One observation: You should add the "alpha" class to the left-most column and "omega" to the right-most one. This is how 960.gs handles extending columns to the full width of the page. (Otherwise, they all have 10px margins on the left and right.)

Todd Nienkerk 20 January, 2009 - 22:23

Seems that you are going in

Seems that you are going in the right direction.
It could be nice starting point for drupal themers.

Drupal Theme Garden 21 January, 2009 - 11:35

go on

hey Morten, great revision of grid systems so far!
maybe i can learn something from it for my site, which is now 960.gs-based - and definitelly has to be refactored.

konnexus 26 January, 2009 - 11:36

Source order

I've read many articles about source order and how it's better to put content first. But the few real studies on this topic tell another story. Simply put, it seems screen readers users expect at least the first level of navigation (=primary menu) *before* the content.
You can read a study here: http://www.usability.com.au/resources/source-order.cfm and Google others.

elv 28 January, 2009 - 14:40

Nice theme. I particularly

Nice theme. I particularly like the idea of taking the bloat out and having to manually specify grid sizes. It might not work for everyone, but I think it's great. I will definitely try to see if I can use this out for my next drupal project.
Cheers!

Josh - Tucson Web Design 10 March, 2009 - 00:23
The content of this field is kept private and will not be shown publicly.
i went from journey to damn yankees Think i need a beer pretty soon 1 year 46 weeks ago
4,356

good Stüff

Mothership - a clean up the crap "theme"

Miro - a open atrium theme:
more info & comments

freya rocks

the progress for my premature daughter can be folllowed here:
Freya Rocks
sorry its in danish

Give some Love to the development of the mothership

Flattr this

User login

Recent comments

give some luv

drupal member ...

geek royale