Bootstrap sass grid

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default
$screen-sm-min:              $screen-sm !default
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default
$screen-md-min:              $screen-md !default
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default
$screen-lg-min:              $screen-lg !default
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default
$screen-sm-max:              ($screen-md-min - 1) !default
$screen-md-max:              ($screen-lg-min - 1) !default


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
$grid-columns:              12 !default
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default


//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default

// Large screen / wide desktop
$container-large-desktop:      (1140px + $grid-gutter-width) !default
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default

=clearfix() 
	&:before,
	&:after 
		content: " " // 1
		display: table // 2
	
	&:after 
		clear: both
	


// Grid system
//
// Generate semantic grid columns with these mixins.

// Centered container element
=container-fixed($gutter: $grid-gutter-width) 
	margin-right: auto
	margin-left: auto
	padding-left:  floor(($gutter / 2))
	padding-right: ceil(($gutter / 2))
	+clearfix


// Creates a wrapper for a series of columns
=make-row($gutter: $grid-gutter-width) 
	margin-left:  ceil(($gutter / -2))
	margin-right: floor(($gutter / -2))
	+clearfix


// Generate the extra small columns
=make-xs-column($columns, $gutter: $grid-gutter-width) 
	position: relative
	float: left
	width: percentage(($columns / $grid-columns))
	min-height: 1px
	padding-left:  ($gutter / 2)
	padding-right: ($gutter / 2)

=make-xs-column-offset($columns) 
	margin-left: percentage(($columns / $grid-columns))

=make-xs-column-push($columns) 
	left: percentage(($columns / $grid-columns))

=make-xs-column-pull($columns) 
	right: percentage(($columns / $grid-columns))


// Generate the small columns
=make-sm-column($columns, $gutter: $grid-gutter-width) 
	position: relative
	min-height: 1px
	padding-left:  ($gutter / 2)
	padding-right: ($gutter / 2)

	@media (min-width: $screen-sm-min) 
		float: left
		width: percentage(($columns / $grid-columns))
	

=make-sm-column-offset($columns) 
	@media (min-width: $screen-sm-min) 
		margin-left: percentage(($columns / $grid-columns))
	

=make-sm-column-push($columns) 
	@media (min-width: $screen-sm-min) 
		left: percentage(($columns / $grid-columns))
	

=make-sm-column-pull($columns) 
	@media (min-width: $screen-sm-min) 
		right: percentage(($columns / $grid-columns))
	


// Generate the medium columns
=make-md-column($columns, $gutter: $grid-gutter-width) 
	position: relative
	min-height: 1px
	padding-left:  ($gutter / 2)
	padding-right: ($gutter / 2)

	@media (min-width: $screen-md-min) 
		float: left
		width: percentage(($columns / $grid-columns))
	

=make-md-column-offset($columns) 
	@media (min-width: $screen-md-min) 
		margin-left: percentage(($columns / $grid-columns))
	

=make-md-column-push($columns) 
	@media (min-width: $screen-md-min) 
		left: percentage(($columns / $grid-columns))
	

=make-md-column-pull($columns) 
	@media (min-width: $screen-md-min) 
		right: percentage(($columns / $grid-columns))
	


// Generate the large columns
=make-lg-column($columns, $gutter: $grid-gutter-width) 
	position: relative
	min-height: 1px
	padding-left:  ($gutter / 2)
	padding-right: ($gutter / 2)

	@media (min-width: $screen-lg-min) 
		float: left
		width: percentage(($columns / $grid-columns))
	

=make-lg-column-offset($columns) 
	@media (min-width: $screen-lg-min) 
		margin-left: percentage(($columns / $grid-columns))
	

=make-lg-column-push($columns) 
	@media (min-width: $screen-lg-min) 
		left: percentage(($columns / $grid-columns))
	

=make-lg-column-pull($columns) 
	@media (min-width: $screen-lg-min) 
		right: percentage(($columns / $grid-columns))
	


//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container 
	+container-fixed

	@media (min-width: $screen-sm-min) 
		width: $container-sm
	
	@media (min-width: $screen-md-min) 
		width: $container-md
	
	@media (min-width: $screen-lg-min) 
		width: $container-lg
	



// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid 
	+container-fixed



// Row
//
// Rows contain and clear the floats of your columns.

.row 
	+make-row


*
	box-sizing: border-box


// .box 
	+make-xs-column(12)
	+make-sm-column(6)
	+make-md-column(3)