Stackenblochen is a stylus grid system for rectanglers.
It is inspired by the foundation grid system and works very similar.
You can either copy the stackenblochen.styl
in your project, or install it via bower:
bower install stackenblochen --save
Configure and include the stackenblochen.styl
in your stylus file:
// Default values
$grid-columns = 12
$grid-gutter = 2rem
$grid-width = 75rem
$grid-medium = 25em
$grid-large = 50em
@import 'stackenblochen'
In your html, do something like this:
<div class="grid">
<div class="small-12 large-6 columns"></div>
<div class="small-6 large-3 show-on-medium columns"></div>
<div class="small-6 large-3 hide-on-medium columns"></div>
<div class="small-12 columns"></div>
</div>
<div class="grid hide-on-large">
<div class="small-6 medium-4 small-centered columns">
<div class="grid">
<div class="small-6 columns"></div>
<div class="small-6 columns"></div>
</div>
</div>
It can even be nested!