# CSS framework **URL:** \ **Category:** rubyonrails-talk\ **Tags:** off-topic\ **Created:** [August 6, 2008, 8:27pm UTC](https://discuss.rubyonrails.org/t/css-framework/32909 "2008-08-06T20:27:59Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Marcelo\_de\_Moraes\_Se](https://avatars.discourse-cdn.com/v4/letter/m/b5e925/32.png) [@Marcelo\_de\_Moraes\_Se](https://discuss.rubyonrails.org/u/Marcelo_de_Moraes_Se)\ **Post date:** [August 6, 2008, 8:27pm UTC](https://discuss.rubyonrails.org/t/css-framework/32909/1 "2008-08-06T20:27:59Z")
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/](http://www.contentwithstyle.co.uk/Articles/17/) So, how do you organize your CSS files? Thanks. ---
**Author:** ![radar](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/radar/32/604_2.png) [@radar](https://discuss.rubyonrails.org/u/radar)\ **Post date:** [August 6, 2008, 11:36pm UTC](https://discuss.rubyonrails.org/t/css-framework/32909/2 "2008-08-06T23:36:39Z")
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. ---
**Author:** ![Tim\_Gossett](https://avatars.discourse-cdn.com/v4/letter/t/45deac/32.png) [@Tim\_Gossett](https://discuss.rubyonrails.org/u/Tim_Gossett)\ **Post date:** [August 7, 2008, 12:43pm UTC](https://discuss.rubyonrails.org/t/css-framework/32909/3 "2008-08-07T12:43:44Z")
Syntactically Awesome StyleSheets - SASS [http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html](http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html) ---
**Author:** ![Jonathan\_Linowes](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/jonathan_linowes/32/2572_2.png) [@Jonathan\_Linowes](https://discuss.rubyonrails.org/u/Jonathan_Linowes)\ **Post date:** [August 7, 2008, 3:26pm UTC](https://discuss.rubyonrails.org/t/css-framework/32909/4 "2008-08-07T15:26:08Z")
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. [http://www.misuse.org/science/2006/09/26/dynamic-css-in-ruby-on-rails?story=20060926084103529](http://www.misuse.org/science/2006/09/26/dynamic-css-in-ruby-on-rails?story=20060926084103529) ---
**Author:** ![Tonypm](https://avatars.discourse-cdn.com/v4/letter/t/a587f6/32.png) [@Tonypm](https://discuss.rubyonrails.org/u/Tonypm)\ **Post date:** [August 8, 2008, 9:25am UTC](https://discuss.rubyonrails.org/t/css-framework/32909/5 "2008-08-08T09:25:10Z")
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. Tonypm ---
**Author:** ![Tim\_Gossett](https://avatars.discourse-cdn.com/v4/letter/t/45deac/32.png) [@Tim\_Gossett](https://discuss.rubyonrails.org/u/Tim_Gossett)\ **Post date:** [August 8, 2008, 12:24pm UTC](https://discuss.rubyonrails.org/t/css-framework/32909/6 "2008-08-08T12:24:05Z")
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 #container :margin 0 auto :width = !full\_width :position relative :display block :padding !fnt\_size #sidebar :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.