Building Grids with Susy
With Bootstrap you can create a form with labels to the left of the input fields with HTML of the following form:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-2">Fault id</label>
<div class="col-xs-10">
<input class="form-control"
type="text">
</div>
</div>
<div class="form-group">
<label class="col-xs-2">Error code</label>
<div class="col-xs-10">
<input class="form-control"
type="text">
</div>
</div>
<div class="form-group">
<label class="col-xs-2">Fault description</label>
<div class="col-xs-10">
<input class="form-control"
type="text">
<span class="error col-xs-offset-2 col-xs-10">Something's wrong!</span>
</div>
</div>
</form>
</div>
Arguably, this is mixing content and layout, and it would be nicer to just have good old plain HTML like:
<form>
<div class="form-row">
<label>Fault id</label>
<input type="text">
</div>
<div class="form-row">
<label>Error code</label>
<input type="text">
</div>
<div class="form-row">
<label>Fault description</label>
<input type="text">
<span class="error">Something's wrong!</span>
</div>
</form>
But clearly you wouldn’t want to write all the CSS for styling this. Luckily, SASS and Compass come to the rescue. I’ll show how to generate the required CSS with the Susy grid framework. I’m assuming that SASS and Compass are installed on your machine.
Installing Susy is as simple as executing
gem install susy
Once that’s done you can use Susy in your SASS (or Compass) project. Here is the SASS code for styling the form:
@import "susy";
$susy: (
columns: 12,
global-box-sizing: border-box
);
@include border-box-sizing;
form {
@include container();
.form-row {
clear: both;
}
}
label {
@include span(1);
display: block;
}
input {
@include span(11 last);
display: block;
}
span.error {
@include push(1);
@include span(11 last);
display: block;
}
Of course you’d still add some styling to the labels and/or form fields…