error_notification renders error notifications on top of forms.

<%= form_for @user do |f|  %>
  <%= f.error_notification %>
  ...
<% end %>

If any error is present on the object the following message will be displayed.

form_group can be used on form builders (inside form_for). It will handle displaying error messages next to fields and adding the proper classes to the wrapping <div class="form-group">.

<%= f.form_group :name do |f| %>
  <%= f.label :name, class: 'control-label' %>
  <div class="controls">
    <%= f.text_field :name %>
    <%= f.error_messages %>
  </div>
<% end %>

Refer to the Bootstrap form documentation for proper usage of the <div class="form-group"> in forms.

activatable_li_tag generates an <li> tag with the active class added if the url is the current one. Useful for navbar and dropdowns.

<%= activatable_li_tag users_path do |url| %>
  <%= link_to "Users", url %>
<% end %>

activatable_li_tag_with_link generates an <li> tag with the active class added if the url is the current one, with a link inside it pointing to that url. The following code produces the same as the example before.

<%= activatable_li_tag_with_link users_path %>

dropdown_menu renders a dropdown menu that can be used inside navbars and tabs.

<%= dropdown_menu "Dropdown" do %>
  <%= activatable_li_tag_with_link "This page", rails_path %>
  <%= activatable_li_tag_with_link "...", "..." %>
<% end %>

The previous code rendered inside a <ul class="nav nav-pills"> will produce the following.

• Active link
• Dropdown
  • This page
  • Fancy forms
  • Classy tables
  • Pricing table

dropdown_button renders a dropdown menu that can be used inside button groups.

<%= dropdown_button "Dropdown" do %>
  <%= activatable_li_tag_with_link "This page", rails_path %>
  <%= activatable_li_tag_with_link "...", "..." %>
<% end %>

The previous code rendered inside a <div class="btn-group"> will produce the following.

icon_tag renders any available icon from FontAwesome. Use without the icon- prefix.

<%= icon_tag("heart") %>

Application

The application layout, located at app/views/layouts/application.html.{erb,haml}, is the default layout. It contains a header section and sidebar. Being based on Bootstrap 12-column grid, the structure of that layout is easily customizable.

You can see an example of a page rendered inside that layout here.

Home

The home layout, located at app/views/layouts/home.html.{erb,haml} is similar the application layout but doesn't contain any sidebar. It is useful for rendering the home page, about, contact pages and the like. The generate the view for the home page, use the rails generate dresssed:home code generator, described bellow.

You can see a example of the home page here.

Pricing

The pricing layout is a view (and not a layout in the Rails-sense) rendered inside the home layout to display pricing plans to visitors. You can generate that view using the rails generate dresssed:pricing code generator, described bellow.

You can see a example of the pricing page here.

_base

Each layout is rendered inside a partial layout, _base.html.erb or _base.html.haml, thus removing any repetition. Containing a header, footer and common components. It's easy to create your own custom layout by using this partial.

Scaffold integration

This theme comes with its own rails generate scaffold templates. Each time you generate code scaffolding, you'll start with a nice looking set of views.

See on the top navbar under the Rails / Scaffold views menu for samples.

Dresssed generators

rails generate dresssed:install

Will install the theme files in your app. Just run this command and you're done.

rails generate dresssed:home CONTROLLER ACTION

Generates a homepage style view at app/views/CONTROLLER/ACTION. Exactly like the one here.

rails generate dresssed:pricing CONTROLLER ACTION

Generates a pricing style view at app/views/CONTROLLER/ACTION. Exactly like the one here.

rails generate dresssed:error_pages

Generates standard Error pages for 403, 404, 422 and 500 statuses at public/.

WillPaginate

Using WillPaginate and its helper <%= will_paginate %> will automatically render the Bootstrap pagination component.

Kaminari

Similarly, if you prefer Kaminari for pagination, <%= paginate @users %> will automatically render the Bootstrap pagination component.

SimpleForm

This theme comes with its own SimpleForm wrapper. Use like so, and your controls will be wrapped in control-group divs with error messages, required markers and all that jazz.

For a horizontal form:

<%= simple_form_for @user_horizontal, url: create_horizontal_examples_url, as: 'user_horizontal', html: { class: 'form-horizontal' },
  wrapper: :horizontal_form,
  wrapper_mappings: {
    check_boxes: :horizontal_radio_and_checkboxes,
    radio_buttons: :horizontal_radio_and_checkboxes,
    file: :horizontal_file_input,
    boolean: :horizontal_boolean
  } do |f| %>

or for an inline form:

<%= simple_form_for @user_inline, url: create_inline_examples_url, as: 'user_inline',
  wrapper: :inline_form,
  html: { class: 'form-inline' } do |f| %>

or just a simple form:

<%= simple_form_for @user_basic, url: create_basic_examples_url, as: 'user_basic' do |f| %>

More examples here.

If you have SimpleForm installed, scaffold view _form will use it instead of plain form_for.

Devise

If you have Devise installed for handling your authentication, all of its views will be styled.

• Sign in
• Sign up
• Edit settings
• Forgot your password?
• Change your password
• Resend confirmation instructions
• Resend unlock instructions