bs-grid-mixins.md

Bootstrap grid classes in the markup: (bleh)

<div class="panel">
  <div class="panel-body">
    <div class="col-sm-8">
      <div class="col-xs-4 col-sm-6">Username:</div>
      <div class="col-xs-8 col-sm-6"><input type='text'></div>
      <div class="col-xs-4 col-sm-6">Password:</div>
      <div class="col-xs-8 col-sm-6"><input type='password'></div>
    </div>
    <div class="col-sm-3 col-sm-offset-1">
      Don't have an account?
      <a href="#">Sign up now</a>
    </div>
  </div>
</div>

vs. via mixins: (aww yiss)

<div class="login-form">
  <div class="fields">
    <div class="lbl">Username:</div>
    <div class="control"><input type='text'></div>
    <div class="lbl">Password:</div>
    <div class="control"><input type='password'></div>
  </div>
  <div class="info">
    Don't have an account?
    <a href="#">Sign up now</a>
  </div>
</div>

.login-form
  .fields
    +make-sm-column(8)
  .lbl
    +make-xs-column(4)
    +make-sm-column(6)
  .info
    +make-sm-column(3)
    +make-sm-column-offset(3)