Styles

Streamlined comes with a built-in stylesheet. What if we want to roll our own styles, though?

Modifying the default stylesheet

One option is to modify the default stylesheet that Streamlined copies to public/stylesheets/streamlined.css in your Rails project. Any changes made there will be reflected in our running application. We must be careful not to rename any of the existing CSS classes if we do this, though. Doing so could give us strange results since the CSS classes Streamlined expects are hard-coded into the framework.

Assigning CSS classes to the list view

What if we are okay with Streamlined's default styles, but want the table rows and cells in the list view to have a different appearance? The style_classes declaration allows us to append additional CSS classes to the rows and cells in the list view. For example:

Streamlined.ui_for(Person) do
  style_classes :list => { :row => 'my_row_class', :cell => 'my_cell_class' }
end

The code above will assign 'my_row_class' to each row in the table and 'my_cell_class' to each cell in the table. But what if we want some rows in the table to appear differently than other rows in the table? In addition to a string, style_classes will also accept a Proc. The Proc will be passed an instance of the model displayed in the row, and Streamlined expects the Proc to return the CSS class to render the row with. For example:

Streamlined.ui_for(Person) do
  style_classes :list => { :row => Proc.new { |model| model.active ? 'active_row' : 'inactive_row' }}
end

The code above will assign the 'active_row' class to the row if the model's #active method returns true. Otherwise, the row will be assigned the 'inactive_row' class. Using a Proc in this way can allow for some pretty sophisticated styling without touching any of Streamlined's source code or overriding the list view within your Rails application.

Note: In the future, style_classes will be updated to support styles for other views like show, edit, etc.

Assigning CSS classes to form fields

coming soon ...