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 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.
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.
On Wed, Aug 6, 2008 at 4:27 PM, Marcelo de Moraes S. <[email protected]
wrote:
So, how do you organize your CSS files?
Syntactically Awesome StyleSheets - SASS
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.
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.
Recently, in a SASS of mine:
// The golden ratio is (1 + sqrt(5)) / 2
// sqrt(5) ~= 2.23606798
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.
–
Tim
This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.