Tutorial – advanced styled_objects on Rails

Following the building and styling a Rails app with styled_objects tutorial, we will learn how to use some advanced features of styled_objects and also some best practices to keep your CSS code maintainable while using styled_objects.

Use CSS variables

On styled_objects you can define global variables to be used throughout your CSS.

Declare variables on one place: app/views/globals.css

Example of a piece of global.css that defines three variables:

@brand_color: #4D926F;
@base_color: #111;
@border-thickness: 1px;

Now, on any template or partial CSS file you can use these variables like this:

color: @brand_color;
border: @border-thickness solid @base_color;

styled_objects uses LESS on the background, so you can use LESS syntax, which is very similar to CSS. Be careful to only define global variables on a global file like application.css, so you can be sure the variable is present on all the included CSSs.

Code generic classes

OO-CSS says we should separate container styling from content styling. How can we do it using styled_objects?

Let's say you have a container for a box block that can be used throughout many partials. How to reuse this container?

What you need is a layout partial.

Create a app/views/containers/_box.html.erb with the container markup:

<%= yield %>

And create the respective CSS under app/views/containers/_box.css:

border: 2px solid #333;

That's it! No need for additional markup, (although you may need to if you have to decorate the box partial with images, for instance).

Now you only have to call your partials with a box layout like this:

<%= include :partial => 'article_summary', :layout => 'containers/box' %>
<%= include :partial => 'top_headlines', :layout => 'containers/box' %>

Debug your stylesheets

Introducing variables can lead to syntax errors that, because the final stylesheet is generated on the server, cannot be debug on a browser.

How to debug the result?

In development mode, when a change you made broke your stylesheet generation, you can:

Open the generated page source on your browser and look for something like <style src="<link href="/styledobjects/...

Copy this URL into the browser (by prefixing it with "http://localhost:3000" or the port your are developing on) and:

1. Check the log/development.log for syntax errors

2. Check the screen for errors. You will probably get a LESS error, indicating which sentence went wrong

Most errors are unknown declared variables, and LESS will tell you something like:

Less::VariableNameError

@myvarname

This will tell that you are using a variable named myvarname thatis not declared.

More resources

• More on LESS syntax
• Stubbornella's presentation about OO-CSS (video)
• OO-CSS Tutorial @ Nettuts

#4D926F;

About Pedro Teixeira

Pedro Teixeira is a former Enterprise Java Beans technical project manager for Clarity Europe (BES Tech Ventures). On 2004 he founded a services company ( http://berro.pt ), focused on the tourism industry throughout 2005-2008, briefly worked for http://www.expedita.com, shifted to product development on 2007, rebuilt http://netmadeira.com on 2009 for ZON Madeira. On early 2010 he started freelance work for Avallain, an e-Learning company strongly focused on delivering multi-media learning content and learning community expericences.