kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

add responsive.less file

Browse source
This commit is contained in:
Mark Otto 2011-10-16 03:15:36 -07:00
parent 3a4760637f
commit d1d3807958
1 changed files with 147 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
lib/responsive.less Normal file
View file

@ -0,0 +1,147 @@
/* Responsive.less
* For phone and tablet devices
* ------------------------------------------------------------- */
@media (max-width: 480px) {
// Remove width from containers
.container {
width: auto;
padding: 0 10px;
}
// Make all columns even
[class*="span"] {
float: none;
display: block;
width: auto;
}
}
@media (min-width: 480px) and (max-width: 768px) {
// Remove width from containers
.container {
width: auto;
padding: 0 10px;
}
// Make all columns even
[class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
}
// TABLET TO MEDIUM DESKTOP
// ------------------------
@media (min-width: 768px) and (max-width: 940px) {
// Reset grid variables
@gridColumns: 16;
@gridColumnWidth: 28px;
@gridGutterWidth: 20px;
@siteWidth: 748px;
@extraSpace: (@gridGutterWidth * 2);
// Bring grid mixins to recalculate widths
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}
// 16cols at 30px wide with 16px gutters
.container {
width: @siteWidth;
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
}
// LARGE DESKTOP
// -------------
@media (min-width: 1170px) {
// Reset grid variables
@gridColumns: 12;
@gridColumnWidth: 70px;
@gridGutterWidth: 30px;
@siteWidth: 1170px;
// Bring grid mixins to recalculate widths
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
}
.container {
width: @siteWidth;
}
[class*="span"] {
margin-left: @gridGutterWidth;
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
}