Bootscaf: Easily Sexify Your Rails Scaffolds to use Bootstrap

Matthew Moore
3 min readDec 18, 2014

--

I absolutely love the rails g scaffold command for new projects. But I can’t stand that there’s no easy way to output good-lookin’ bootstrap layouts by default. I also haven’t found a twitter bootstap gem that can go back to old scaffolds and just re-jigger them at any time. So we created Bootscaf, a gem that lets you run a command that seds all your scaffold view files to use bootstrap friendly classes. Best of all, it’s open-source. ☺

Preview

Here’s a little taste of what your scaffolds will end up looking like after running the gem’s bootscaf command.

Index pages get a make-over with sorting built-in.

index.html.erb before bootscaf
index.html.erb after bootscaf

Horizontal form layout for and applicable glyphicon for cancellation.

new.html.erb & _form.html.erb before bootscaf
new.html.erb & _form.html.erb after bootscaf

Clean, grid-based layout for the show page, and convenient action buttons.

show.html.erb before bootscaf
show.html.erb after bootscaf

Contextual action buttons in edit view as well.

edit.html.erb & _form.html.erb before bootscaf
edit.html.erb & _form.html.erb before bootscaf

Improved delete messaging and button placement.

delete link before bootscaf
delete link after bootscaf

Messaging on empty index pages.

empty index.html.erb before bootscaf
empty index.html.erb after bootscaf

How To Get Started

To make it easy, we’re going to keep all “how-to” on github, in the README.md.

Extras

There are a few conveniences added that we use in the vast majority of our projects. They are:

1) Helper css class names on the <body> element for page-specific CSS:

<body class=”controller-<%= controller.controller_name.dasherize %> action-<%= controller.action_name.dasherize %>”>

2) Google analytics if an environment variable is set:

ENV[“GOOGLE_ANALYTICS_ID”]

3) A click-to-select css selector for read-only inputs:

<input class=”select-all-on-click” type=”text” value=”long value” readonly>

4) Page <title>s set in views:

<% content_for :page_title do %>
Edit Model —
<% end %>

And that’s about it, for now!

Pull Requests More than Welcome

We open-sourced this so that others can improve it! We take Pull Requests seriously ☺

Enjoy!

Matt, from ThriveSmart

--

--

Matthew Moore

Enterprise web development and process management suites. Building high quality, usable products delivered on time and on budget.