CSS framework

Hello list,

When you start getting the hang and absorbing the agile mindset, you can’t stop thinking in ways to make your work faster and more practical.

I like graphics design, but I’m mainly a coder. I do like CSS and (X)HTML coding, but bootstrapping it is a pain in the a**. I mean, once you have your CSS files structure and also your HTML code structure done, you just build upon them, and life’s good.

I thought that a generator or even a set of pre-defined (general) CSS files and a general (X)HTML file with a general structure could be kept somewhere (maybe versioned) and copied to the public dir of the app just after you created it. These files would already have some layout patters and other code that could be modified and adapted to more elaborated layouts.

I found this one to be particulary interesting and it seems to be exactly what I’m looking for: http://www.contentwithstyle.co.uk/Articles/17/

So, how do you organize your CSS files?


I usually have one CSS file all the style code in it. Generally I try to keep all the top-of-the-page stuff at the top of the CSS file, and all the content stuff in the middle and all the footer stuff at the bottom. Sometimes the middle section can get quite large (currently one of my CSS files is 327 lines long). This is just the way that I can understand the code, I find it easier to search through the one file (thank you Command+F!) than to search through many files. Each to their own.

Syntactically Awesome StyleSheets - SASS


I use dynamic stylesheets rendered through a controller so they can
contain ruby code, can access current_user, etc. When css is
programmatic, it seems to eliminate a lot of the 'workarounds' using
standard css like managing multiple css files and includes. For
example I can define constants for standard colors, backgrounds, etc.
that only change in one place (the rcss controller). And I can have
styles changed based on per account variables/preferences.


I totally agree - SASS is neat and liberating. Before I started using
SASS, I had similar views about needing a framework. But now, I find
that my SASS files work really well.

And I really like HAML, although I do find that I now keep forgetting
to put ends in my Ruby code - lol.

One of the things I find really helps is to use the idea of putting
the controller name into the body id.
%body{:id=>"#{controller.controller_name}"} (in haml speak)

Then each controller can easily have its own section in the SASS. In
quite a large app, I have a stylesheet for layout, common, and one for
each functional group of controllers. Of course once you go into
production they can be automatically served as a single file.

I also try to have consistent div names for my content. eg.
top_controls, list_area, main_area, prompt etc. Then these have a
common set of styles with slight variations under individual
controllers as required. Of course coming up with a consistent page
layout if that is possible makes things much easier overall. When I
add new sections to my app, I now often dont need to touch my
stylesheets at all.


Recently, in a SASS of mine:

// The golden ratio is (1 + sqrt(5)) / 2
// sqrt(5) ~= 2.23606798

!phi = 3.23606798 / 2
!phiinv = 1 / !phi
!phiinvcom = 1 - !phiinv

!fnt_size = 12px
!full_width = 960px

!bg_color = #aaf

// Eric Meyer’s reset.css, translated into SASS
@import ‘reset’

html, body
:font-size = !fnt_size
:line-height = !phi + em

:font-family ‘Helvetica Nueue’, Arial, sans-serif
:background-color = !bg_color

:margin 0 auto
:width = !full_width
:position relative
:display block
:padding !fnt_size

:width = !phiinvcom * !full_width
:float left
:background = !bg_color - #333

This sets up a classic two-column layout (where the sidebar is floated left and not equal-height) with fixed width at 960px. Just change the !full_width declaration and the whole layout scales. Change !fnt_size and the baseline grid scales. The sidebar’s background color is set to be a darker shade of blue than the body’s background (hex-color math!). Change #bg_color to #faa and everything’s red.

Love it.