Bootstrap based grids in Stylus

stylus_bootstrap_based_grids.css

*
   -webkit-box-sizing border-box
   -moz-box-sizing border-box
   box-sizing border-box
   &::after, &::before
      -webkit-box-sizing border-box
      -moz-box-sizing border-box
      box-sizing border-box
	
html
   -webkit-tap-highlight-color rgba(0,0,0,0)
   font-size 10px
	
body
   background #FFF
   color #333
   font-family "Helvetica Neue", Helvetica, Arial, sans-serif
   font-size 14px
   line-height 1.42857143
	
input, button, select, textarea
   font-family inherit
   font-size inherit
   line-height inherit

a
   color #337AB7
   text-decoration none
   &:hover, &:focus
      color #23527C
      text-decoration underline
   &:focus
      outline thin dotted
      outline 5px auto -webkit-focus-ring-color
      outline-offset -2px
		
.responsive-media
   display block
   height auto
   max-width 100%
   width 100%
	
/* Grids */
grid-sizes = 8.33333333%, 16.66666667%, 25%, 33.33333333%, 41.66666667%, 50%, 58.33333333%, 66.66666667%, 75%, 83.33333333%, 91.66666667%, 100%

.full-container, .container
   margin-left auto
   margin-right auto
   padding-left 15px
   padding-right 15px
	
.full-width-container
   margin-left auto
   margin-right auto
   padding 0
	
.row
   margin-left -15px
   margin-rigth -15px
	
for i in (1..12)
   .col-tiny-{i}, .col-small-{i}, .col-medium-{i}, .col-large-{i}
      min-height 1px
      position relative
   .col-tiny-{i}
      float left
      width grid-sizes[i - 1]
   .col-tiny-offset-{i}
      margin-left grid-sizes[i - 1]

.hidden-tiny
   display none !important
		
.clearfix::before, .clearfix::after,
.container::before, .container::after,
.full-container::before, .full-container::after,
.row::before, .row::after
   content " "
   display table
	
.clearfix::after,
.container::after,
.full-container::after,
.row::after
   clear both
	
.pull-right
   float right !important
.pull-left
   float left !important

/* Responsive loop */
grid-width = 768px, 992px, 1200px
grid-container-width = 750px, 970px, 1170px

for i in (0..2)
   @media (min-width: grid-width[i])
      .container
         width grid-container-width[i]
		
         for i in (1..12)
            .col-small-{i}
               float left
               width grid-sizes[i - 1]
            .col-small-offset-{i}
               margin-left grid-sizes[i - 1]
			
         .hidden-small
            display none !important