CSS Frameworks – Blueprint, 960.gs, others

Sunday, January 4th, 2009

blueprints

The Goal

We are redoing the eRacks website (our partner and suppliers of rackmount servers)  in Django, and revamping it with best-practices code and frameworks throughout – so here is the benefit of our reviews and choices for our CSS framework.

CSS frameworks are a relatively new thing in the last couple of  years, largely borne out of a need to standardize what is largely a mess or patchwork (or lack) of standards, and minor implementation differences.  Note that these are largely caused by IE (Internet Explorer) and the “embrace and extend” mentality of Microsoft, which intentionally introduces minor incompatibilities which are in their interest to do, as long as they have the major market share.

All the frameworks seem to share in common Reset CSS as a starting point – the idea being to reset all the different browsers’ handling of default styles to a minimal baseline, and then build something consistent on top of that.

Seems pretty clean, although debugging in Firebug is slightly more difficult, as all the basic styles list all the tags, so you have to scroll through all the noise to find your actual changes  / styles.

Most or all the candidates add a “grid” of standardized column widths and typography heights to the minimalist reset CSS, and strive (mostly successfully) to greatly simplify the HTML/CSS development cycle by providing some easily followed guidelines for standard practices such as columns, headers, margins separation, font sizes, and so forth – taking the “CSS Box Model” well beyond the do-it-yourself mess of quirks that it is now.

They also all attempt to hide or eliminate (or have already dealt with) the many cross-browser quirks and issues, making your design instantly supported on most or all of the available browsers out there.

When followed, they minimize or eliminate the “Butterfly problem” – where small changes can have vast consequences – the storied example being, a butterfly flying on one side of the earth can cause vast disruption and unrest at the antipodean point 12,000 miles away :).  In other words, it eliminates the frustration and irritation of changing one little thing in CSS, and having it break your page layout completely – or even worse, it appears to fixit on the browser you’re using, but displays completely wrong on IE or some other browser-du-jour.

The Background

From Wikipedia, here is an excellent and comprehensive List of CSS frameworks.

The Players

The ones we looked at, are:

  • Blueprint CSS – This is the most established and well-known, with enough of a following that there are many third-party howto’s and plugins available, as well as integration with other frameworks, sprites, and so forth.
  • Boilerplate – This one is more minimalist, with more semantically meaningful class names than “span-4”, etc – although surprisingly, even though it claims to be more minimalist, it offers no compressed or one-file version to minimize downlaods, thus making the download footprint larger. Althgough it looked promising, it’;s also over a year old, and doesn’t show any recent activity.  “Needs documentation” is one of the 4 or 5 issues in Google Code.
  • 960 Grid System – This is one of the newer frameworks, and has gotten good reviews and critical acclaim, and uses a slightly different grid scheme with wider column spacing (10px on both the left and the right) and easier divisibility by more & different numbers (the number 960 has a lot of factors).  It also has nicer typography and a well-thought-out font list for graceful degradation on Linux OSes and with other browsers.
  • Bluetrip – This combines the Blueprint base framework with the more typography-oriented Tripoli framework – an takes the typography elemn
  • Elements – A project-wide framework and directory structure, for more than CSS. Includes a CSS lightbox.
  • Typogridphy – A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry
  • Fluid 960 Grid System – This is a really impressive one – and would be great for a fluid site, with colum and spacer/site margin widths based on percentages, that works – and without using tables. We’ll be taking a closer look at this one on the next fluid site we do.

The First try

So, since we liked the Linux and typography support of 960gs, along with its elegant simplicity, we started with 960gs.

A while after we got it set up, got the pages displaying, and we noticed:

  • It had three files, and although there were compressed versions in the standard distribution tree, still this would require three connections from the server at load time.
  • Despite having the CSS images for the grid in the distribution, there was no obvious way to highlight the grid with a class.
  • eRacks had a 160-pixel left column, and a 132-pixel right column – which did not fit neatly into either the 12-column nor the 16-column grid.
  • There were some nifty plugins, addons, and jQuery integration for Blueprint – and a huge community following.  So….

The Decision

We decided to give Blueprint a try – we also noticed that nonstandard grid sizes and columns were supported by multiple tools and generators – so we surfed over to the Blueprint Grid CSS Generator and generated our 28-column grid, which nicely accomodated the left and right columns, at almost their original widths, with a 970px total width.

We also kept the 960.gs Linux-friendly font list, for smooth and nice typography on all platforms – it was a one-line override in our list of site-specific CSS, which is so small (about 20 lines) we keep it in the header of the page itself.

The Result

So we have a great-looking, prototype site up and running, and we are working on the rest of the port to Django:

eracks.librehost.com

Please note that THIS IS A WORK IN PROGRESS, and may not be available, or may not look right, at the particular time you view it!

The plugins

Useful plugins that we are also considering, are here:

  • Tabs – integrates jQuery with the Blueprint classes, to do some nicely polished-looking Tabs
  • Liquid Blueprint – Makes the Blueprint Grid liquid (fluid)
  • SilkSprite – Integrates the Silk Icons set as sprites

The Feedback

Oh, and one more thing –

We welcome and encourage your feedback and opinions on either the new eracks site, or on the above review of CSS Frameworks and our decision.

j

Django Admin and TinyMCE HowTo

Monday, December 22nd, 2008

We’ve just rolled out TinyMCE to use with our Django Admin interface.

As we encountered several gotchas along the way, we felt it would be instructive to the community to illustrate the steps here, in true cookbook (aka “HowTo”) fashion.

Here we go…

The Cookbook

Step 1: Add your js to your Model’s Admin definition:

class MyBoffoModelAdmin (admin.ModelAdmin):
    fieldsets  = (
        ... yada yada yada...
        (None, {'classes': ['edit'], 'fields': ('content',)}),
    )
    class Media:
        js = ['/tiny_mce/tiny_mce.js', '/js/textareas.js']

Note:

  • The classes : [‘edit’] which tells the code below to set the class for the mcEditor
  • That after the standard include of tiny_mce.js, the second javascript reference in the js list, is your custom init code that you will be writing next.
  • The nested “Class Media” tells the Django Admin interface to include the references to these .js files in the header of the Admin page.

Step 2: Write your initializer Javascript code:

This is the contents of /js/textarea.js:

function mce_setup()
{ tinymce.DOM.addClass (tinymce.DOM.select('.edit .vLargeTextField'), 'mcEdit');

  tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "mcEdit",  // doesn't support selectors, only classes, despite the name
    height: "480",
    width: "90%",
    element_format : "html",
    plugins : "preview,fullscreen",
    theme_advanced_buttons3_add : "preview,fullscreen",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    //theme_advanced_resizing : true,
  });
};

Notes:

  • This Javascript is executed in the header – and it does NOT initialize the editor yet, it merely defines a function to do so, which is called when the user clicks on a link, which we’ll see next.
  • The “addClass” call at the top is necessary to work properly with Django – despite the ‘editor_selector’ setting in the tinyMCE.init paraeters, this does NOT accept a css selector, only a class – so we have to manually set up a new, unique class, using the tinymce.DOM.select call at the top.
  • The selector of  “.edit .vLargeTextField” pinpoints the actual textarea under the fieldset with the “edit” css class.

Step 3: Add your HTML to the model:

We turn it on using the Django Model Fields’ help_text option, thusly:

content = models.TextField (blank=True, help_text='''HTML Content -
    <a href="javascript:mce_setup();">Click Here</a> to edit - see
    <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Configuration">TinyMCE Configuration</a>
    for more options.''')

That’s it!

When you restart and load the page, you should see

“HTML Content – Click Here to edit – see TinyMCE Configuration for more options.”

at the bottom of the textarea in question that you set the ‘edit’ css class on –  and note that the other javascript isn’t loaded until you actually click on it, speeding load time of the page.

Clicking should quickly load the TinyMCE editor and buttons, resize the text area appropriately, render any HTML with WYSIWIG, and follow page resizes.

The Gotchas

  1. Django doesn’t let you get at the actual textarea class, so you have to do the above selector
  2. TinyMCE’s editor_selector parameter doesn’t use, or work with, selectors (!)
  3. You could use the Django form id, but then this whle precedure wouldn’t be generic, you’d need one init js per field.
  4. You would also need to set up the tinyMCE.init parameters to use ids rather than classes, too.
  5. Setting  “theme_advanced_resizing : true” actually takes away functionality if you have setup up height and width as percentages – which accomplish the same thing with no extra js.
  6. If you’re getting gibberish like “<br mce_bogus />” added to your empty text areas, there are a few things you can do – write us for details – you may need to set up an
    editor_deselector : "mcNoEdit"
  7. and use the appropriate code to add the class at the top of the setup function:
    tinymce.DOM.addClass (tinymce.DOM.select('.vLargeTextField'), 'mcNoEdit');

Useful References

Django Admin Media – Using extra js & css with the Django Admin interface

TinyMCE API – Core API, DOM API including how to find elemnts by selector, and add a class

TinyMCE Examples – Examples with source code including click-to-load, dual/partial textareas, plugin activation, fullscreen, etc

Django Model Documentation – including the help_text option which allows HTML!

Honorable Mention

An Honorable Mention goes to the WYMeditor – an up-and-coming WYSIWYM editor – What You See Is What You Mean – and it’s been getting rave reviews.

It uses a class-based approach, which is intriguing and feel right – it just doesn’t have the polish and full feature set that TinyMCE does right now – but we’ll be exploring this further in a future post, as we’ve already implemented it for a client in Django Admin already :-), and it works well –

j