Getting Started

pgte edited this page Sep 13, 2010 · 14 revisions

1. Layout

After installing the styled_objects plugin (see Installing), add this line inside your application layout template


<%= so_stylesheet_link_tag %>

2. Set a global stylesheet

Note: This part is independent from styled_objects, but I recomend following these steps.

If you are starting the app from scratch, I recommend:

1. installing three stylesheet files (that you can later compile into one) into your public stylesheet path

  • one reset stylesheet – you can find these stylesheets on several css frameworks. I like the one shipped with blueprint;
  • lettering stylesheet – this stylesheet sets basic lettering definitions for your application. Define styles for common HTML tags (h1, h2, p, a, form, etc.) and define some common classes (like “sidenote”, "") that you will be using throughout your templates and partials;
  • layout stylesheet – this stylesheet is used for styling your application layout file. I recommend 1) using only ids on your markup (no classes) and 2) only use these ids on this stylesheet. Don’t style anything else here;

For more good OO-CSS guidelines watch this presentation.

2. creating the respective stylesheet link tags in your application layout templates using the stylesheet_link_tag rails helper.

3. Start writing your stylesheets

Every time you create one template or partial and need styling it, create a corresponding template alongside.
Example of a view directory tree:

------ views
       +---- foo
              +--- index.html.erb
              +--- index.css
              +--- _my_partial.html.erb
              +--- _my_partial.css
       +---- bar
              +--- show.html.erb
              +--- show.css
              +--- _my_other_partial.html.erb
              +--- _my_other_partial.css

styled_objects will, for each page compile the needed css files into one file.

» Next: CSS file syntax