Example of using Rupture (breakpoints) and Jeet (grids) with Stylus

stylus-jeet-rupture-example.html

<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>

stylus-jeet-rupture-example.styl

@import 'jeet'

jeet.gutter = 1
rupture.scale =       0     480px   600px   767px   1023px    1310px
rupture.scale-names = 'xs'  's'     'm'      'l'    'xl'      'xxl'

/*
  How Rupture handles "slices"
  
  Breakpoint:   0        480px     600px     767px     1023px     1310px
                ├──────────┼─────────┼─────────┼──────────┼───────────┼─────────>
  Slice #:           0          1         2          3          4         5
                    'xs'       's'       'm'        'l'        'xl'      'xxl'
*/

.container
  //centered column with max-width of 900px
  center(900px)
  background-image: url(something.png)
  //another handy feature of Rupture, targeting retina:
  +retina()
    background-image: url(something@2x.png)

.main-content
  //columns are flexible based on their container – in this case, this would be 2/3 of 900px
  //(you can also specify gutters and margins)
  column(2/3)
  +below('m')
    //below 600px, take up the full width so the columns stack!
    column(3/3)
  
.sidebar
  column(1/3)
  +below('m')
    column(3/3)