Last active
August 24, 2016 15:13
-
-
Save kyletaylored/36071b7441618fe9a301dc85ad65f0d5 to your computer and use it in GitHub Desktop.
Bootstrap 2 grid options (from Bootstrap 3)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ----------------------------------------- | |
// Bootstrap 2 related variables / functions | |
// ----------------------------------------- | |
@mobile: ~"(max-width: 767px)"; | |
@tablet: ~"(min-width: 768px) and (max-width: 979px)"; | |
@normal: ~"(min-width: 980px) and (max-width: 1199px)"; | |
@wide: ~"(min-width: 1200px)"; | |
@gridColumns: 12; | |
@gridColumnWidth: 60px; | |
@gridGutterWidth: 20px; | |
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); | |
.makeColumn(@columns: 1, @offset: 0) { | |
float: left; | |
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); | |
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); | |
} | |
// ------------------------ | |
// Make new columns for BS2 | |
// ------------------------ | |
@breakpoint: @mobile, @tablet, @normal, @wide; | |
@break: xs, sm, md, lg; | |
@length: length(@break); | |
// Extract breakpoints for each grid option. | |
.extract-breakpoint(@breakpoint; @break; @index) when (@index > 0) { | |
.extract-breakpoint(@breakpoint; @break; (@index - 1)); | |
// Get query for breakpoint. | |
@bt: extract(@breakpoint, @index); | |
// Define media query here because LESS is weird. | |
@mediaQuery: ~"@{bt}"; | |
@media @mediaQuery { | |
.span-extend(@break; @index); | |
} | |
} | |
.extract-breakpoint(@breakpoint, @break, @length); | |
// Extend columns and break levels. | |
.span-extend(@break; @index; @c:1) when (@c =< @gridColumns) { | |
.span-extend(@break, @index, (@c + 1)); | |
@bk: extract(@break, @index); | |
.span@{c}-@{bk} { | |
.makeColumn(@c); | |
} | |
} | |
.extract-breakpoint(@breakpoint; @break; @length); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media (max-width: 767px) { | |
.span12-xs { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-xs { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-xs { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-xs { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-xs { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-xs { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-xs { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-xs { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-xs { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-xs { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-xs { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-xs { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 979px) { | |
.span12-sm { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-sm { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-sm { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-sm { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-sm { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-sm { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-sm { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-sm { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-sm { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-sm { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-sm { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-sm { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (min-width: 980px) and (max-width: 1199px) { | |
.span12-md { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-md { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-md { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-md { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-md { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-md { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-md { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-md { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-md { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-md { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-md { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-md { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (min-width: 1200px) { | |
.span12-lg { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-lg { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-lg { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-lg { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-lg { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-lg { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-lg { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-lg { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-lg { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-lg { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-lg { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-lg { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (max-width: 767px) { | |
.span12-xs { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-xs { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-xs { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-xs { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-xs { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-xs { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-xs { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-xs { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-xs { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-xs { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-xs { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-xs { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 979px) { | |
.span12-sm { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-sm { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-sm { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-sm { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-sm { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-sm { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-sm { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-sm { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-sm { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-sm { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-sm { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-sm { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (min-width: 980px) and (max-width: 1199px) { | |
.span12-md { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-md { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-md { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-md { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-md { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-md { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-md { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-md { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-md { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-md { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-md { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-md { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} | |
@media (min-width: 1200px) { | |
.span12-lg { | |
float: left; | |
margin-left: 20px; | |
width: 940px; | |
} | |
.span11-lg { | |
float: left; | |
margin-left: 20px; | |
width: 860px; | |
} | |
.span10-lg { | |
float: left; | |
margin-left: 20px; | |
width: 780px; | |
} | |
.span9-lg { | |
float: left; | |
margin-left: 20px; | |
width: 700px; | |
} | |
.span8-lg { | |
float: left; | |
margin-left: 20px; | |
width: 620px; | |
} | |
.span7-lg { | |
float: left; | |
margin-left: 20px; | |
width: 540px; | |
} | |
.span6-lg { | |
float: left; | |
margin-left: 20px; | |
width: 460px; | |
} | |
.span5-lg { | |
float: left; | |
margin-left: 20px; | |
width: 380px; | |
} | |
.span4-lg { | |
float: left; | |
margin-left: 20px; | |
width: 300px; | |
} | |
.span3-lg { | |
float: left; | |
margin-left: 20px; | |
width: 220px; | |
} | |
.span2-lg { | |
float: left; | |
margin-left: 20px; | |
width: 140px; | |
} | |
.span1-lg { | |
float: left; | |
margin-left: 20px; | |
width: 60px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment