This is a theme for Hobo 1.4 (http://www.hobocentral.net) that implements the Bootstrap library (http://twitter.github.com/bootstrap/).
Add this to your Gemfile
gem "hobo_bootstrap", :git => "git://github.com/Hobo/hobo_bootstrap.git"
{.ruby}
Run bundle to get the gems
bundle
Add to your front.scss:
*= require hobo_bootstrap
{.css}
Add to your front.js:
//= require hobo_bootstrap
{.javascript}
Alternatively, you could require bootstrap-collapse and bootstrap-alert, since those are the only two javascript components that this theme currently requires. However, we do plan on supporting more in the future.
Change the theme in app/views/taglibs/front_site.dryml:
<include gem='hobo_bootstrap'/>
{.dryml}
You will also want to remove any references to your previous theme in the above files. hobo_clean
is the name of the old default Hobo theme.
By default, hobo_bootstrap puts every option in the top menu, like this:
But you can also use a sub menu, like the one in the bootstrap documentation:
In order to enable the sub menu, add these lines to your front_site.dryml:
<extend tag="page">
<old-page merge nav-location="sub">
</extend>
{.dryml}
This theme includes the bootstrap responsive CSS, which makes it work nicely with mobile phones. For example:
If you don't want to include the responsive CSS, use
*= require bootstrap
*= require hobo_bootstrap/hobo_bootstrap_main
instead of
*= require hobo_bootstrap
in your front.scss.
If you want to style your theme differently, the easiest way is to choose a theme from bootswatch.
In front.scss, remove:
*= require hobo_bootstrap
and add this to the bottom of the file, outside of the comment:
@import "bootswatch/cerulean/variables";
@import "hobo_bootstrap";
@import "bootswatch/cerulean/bootswatch";
Replace cerulean
with the theme of your choice.
Add to Gemfile
gem 'bootswatch-rails'
And run bundle
.
Any other theme you find or buy will probably be delivered as CSS or LESS rather than SCSS. Copy the CSS into a new folder in app/assets/stylesheets, and use like this, replacing foo with the name of your theme:
@import "foo/bootstrap.css";
@import "hobo_bootstrap/hobo_bootstrap_main";
@import "foo/bootstrap_responsive.css";
@import "hobo_bootstrap/hobo_bootstrap_responsive";
@import "hobo_bootstrap/hobo_bootstrap_docs";
By default, forms only have one column. But many you need more complex forms. Take a look at these examples:
Two columns example
<new-page>
<form:>
<field-list: columns="2"/>
</form:>
</new-page>
{.dryml}
Three columns, aside and double sized fields
<new-page content-size="9">
<aside:>
Hola! Soy el aside :)
</aside:>
<form:>
<field-list: replace>
<field-list size="9" columns="3" fields="name, end_date, codigo_postal"/>
<div class="row columns">
<div class="span6">
<single-field-list fields="description"/>
</div>
<div class="span3">
<single-field-list fields="responsable"/>
</div>
</div>
<div class="row columns">
<div class="span6">
<single-field-list fields="description"/>
</div>
<div class="span3">
<single-field-list fields="responsable"/>
</div>
</div>
<div class="row columns">
<div class="span9">
<single-field-list fields="description"/>
</div>
</div>
<div class="row columns">
<div class="span3">
<single-field-list fields="description"/>
</div>
<div class="span6">
<single-field-list fields="responsable"/>
</div>
</div>
<div class="row columns">
<div class="span3">
<single-field-list fields="description"/>
</div>
<div class="span3">
<single-field-list fields="responsable"/>
</div>
<div class="span3">
<single-field-list fields="responsable"/>
</div>
</div>
</field-list:>
</form:>
</new-page>
{.dryml}
I have been using a demo application to test this theme (the screenshots come from it). It has:
- Examples of complex forms (1/2/3 columns, aside, double sized fields...)
- Rspec "human driven" tests for the responsive CSS (they automatically resize your window and wait for you to clic on "OK" if it looks fine)
- Examples of Jquery File Upload (http://blueimp.github.com/jQuery-File-Upload/).
You can download and take a look at it on https://github.com/suyccom/sgagility
Right now, you still need to keep "hobo_clean" in your Gemfile if you want to use the Ajax search enabled by default in Hobo.