Documentation ➜ Widths (Grid)
Every good framework has a useful grid, and Fuselage is no different. Its mobile-first, nestable grid system, referred to as widths gives you a robust skeleton to hold your project together.
Using Widths
Create and element with the .row class, and add additional elements within it with the .column class. Each of these columns are assigned namespaced widths. NOTE If no namespaced is provided, i.e `one-half`, the element will be given this width in the smallest media size. Remember, mobile-first!
Output
a
b
c
x
y
z
HTML
<div class="row">
<div class="column one-whole medium-one-half large-one-third">
<p>a</p>
</div><!-- /.column -->
<div class="column one-whole medium-one-half large-one-third">
<p>b</p>
</div><!-- /.column -->
<div class="column one-whole large-one-third">
<p>c</p>
</div><!-- /.column -->
</div><!-- /.row -->
<div class="row">
<div class="column one-whole medium-three-fourths large-one-sixth">
<p>x</p>
</div><!-- /.column -->
<div class="column one-half medium-one-eighth large-one-half">
<p>y</p>
</div><!-- /.column -->
<div class="column one-half medium-one-eighth large-one-third">
<p>z</p>
</div><!-- /.column -->
</div><!-- /.row -->Nesting Widths
Feel free to nest widths as many times as you'd need to. But for your users' collective sakes, please exercise judgment!
Output
a
a.a
a.b
b
b.a
b.b
HTML
<div class="row">
<div class="column one-whole medium-one-half large-two-thirds">
<p>a</p>
<div class="row">
<div class="column one-whole large-one-third">
<p>a.a</p>
</div><!-- /.row -->
<div class="column one-whole large-two-thirds">
<p>a.b</p>
</div><!-- /.row -->
</div><!-- /.row -->
</div><!-- /.column -->
<div class="column one-whole medium-one-half large-one-third">
<p>b</p>
<div class="row">
<div class="column one-half large-one-third">
<p>b.a</p>
</div><!-- /.row -->
<div class="column one-half large-two-thirds">
<p>b.b</p>
</div><!-- /.row -->
</div><!-- /.row -->
</div><!-- /.column -->
</div><!-- /.row -->