//== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 480px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; // Small screen / tablet // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm: 780px; // @screen-sm: 768px; @screen-sm-min: @screen-sm; @screen-tablet: @screen-sm-min; // Medium screen / desktop // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 @screen-md: 992px; @screen-md-min: @screen-md; @screen-desktop: @screen-md-min; // Large screen / wide desktop // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg: 1220px; @screen-lg-min: @screen-lg; @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 24; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 20px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: @screen-sm-min; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); //== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet @container-tablet: ((740px + @grid-gutter-width)); //** For `@screen-sm-min` and up. @container-sm: @container-tablet; // Medium screen / desktop @container-desktop: ((940px + @grid-gutter-width)); //** For `@screen-md-min` and up. @container-md: @container-desktop; // Large screen / wide desktop @container-large-desktop: ((1180px + @grid-gutter-width)); //** For `@screen-lg-min` and up. @container-lg: @container-large-desktop; // Utilities // ------------------------- // Clearfix // Source: http://nicolasgallagher.com/micro-clearfix-hack/ // // For modern browsers // 1. The space content is one way to avoid an Opera bug when the // contenteditable attribute is included anywhere else in the document. // Otherwise it causes space to appear at the top and bottom of elements // that are clearfixed. // 2. The use of `table` rather than `block` is only necessary if using // `:before` to contain the top-margins of child elements. .clearfix() { &:before, &:after { content: " "; // 1 display: table; // 2 } &:after { clear: both; } } // Box sizing .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; -moz-box-sizing: @boxmodel; box-sizing: @boxmodel; } // Reset the box-sizing // // Heads up! This reset may cause conflicts with some third-party widgets. // For recommendations on resolving such conflicts, see // http://getbootstrap.com/getting-started/#third-box-sizing // * { // .box-sizing(border-box); // } // *:before, // *:after { // .box-sizing(border-box); // } // Grid System // ----------- // Centered container element .container-fixed() { margin-right: auto; margin-left: auto; padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); .clearfix; // &:extend(.clearfix all); } // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); .clearfix; // &:extend(.clearfix all); } // 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) { @media (min-width: @screen-xs-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-xs-column-push(@columns) { @media (min-width: @screen-xs-min) { left: percentage((@columns / @grid-columns)); } } .make-xs-column-pull(@columns) { @media (min-width: @screen-xs-min) { 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)); } } // Framework grid generation // // Used only by Bootstrap to generate the correct number of grid classes given // any value of `@grid-columns`. .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } } .col(1); // kickstart it } .float-grid-columns(@class) { .col(@index) when (@index = 1) { // initial @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general @item: ~".col-@{class}-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { float: left; } } .col(1); // kickstart it } .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = push) { .col-@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = pull) { .col-@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = offset) { .col-@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns)); } } // Basic looping in LESS .loop-grid-columns(@index, @class, @type) when (@index >= 0) { .calc-grid-column(@index, @class, @type); // next iteration .loop-grid-columns((@index - 1), @class, @type); } // Create grid for specific class .make-grid(@class) { .float-grid-columns(@class); .loop-grid-columns(@grid-columns, @class, width); .loop-grid-columns(@grid-columns, @class, pull); .loop-grid-columns(@grid-columns, @class, push); .loop-grid-columns(@grid-columns, @class, offset); } // // 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(); } // Columns // // Common styles for small and large grid columns .make-grid-columns(); // Extra small grid // // Columns, offsets, pushes, and pulls for extra small devices like // smartphones. .make-grid(xs); // Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. @media (min-width: @screen-sm-min) { .make-grid(sm); } // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. @media (min-width: @screen-md-min) { .make-grid(md); } // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. @media (min-width: @screen-lg-min) { .make-grid(lg); } // Responsive utilities // ------------------------- // More easily include all the states for responsive-utilities.less. // .responsive-visibility() { // display: block !important; // table& { display: table; } // tr& { display: table-row !important; } // th&, // td& { display: table-cell !important; } // } // .responsive-invisibility() { // display: none !important; // } // // Utility classes // -------------------------------------------------- // Center-align a block level element // .center-block() { // display: block; // margin-left: auto; // margin-right: auto; // } // Floats // ------------------------- .clearfix { .clearfix(); } // .center-block { // .center-block(); // } .pull-right { float: right !important; } .pull-left { float: left !important; } // Toggling content // ------------------------- // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 // .hide { // display: none !important; // } // .show { // display: block !important; // } // .invisible { // visibility: hidden; // } // Hide from screenreaders and browsers // // Credit: HTML5 Boilerplate // .hidden { // display: none !important; // visibility: hidden !important; // } // // Responsive: Utility classes // -------------------------------------------------- // IE10 in Windows (Phone) 8 // // Support for responsive views via media queries is kind of borked in IE10, for // Surface/desktop in split view and for Windows Phone 8. This particular fix // must be accompanied by a snippet of JavaScript to sniff the user agent and // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at // our Getting Started page for more information on this bug. // // For more information, see the following: // // Issue: https://github.com/twbs/bootstrap/issues/10497 // Docs: http://getbootstrap.com/getting-started/#browsers // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ // @-ms-viewport { // width: device-width; // } // // Visibility utilities // .visible-xs, // .visible-sm, // .visible-md, // .visible-lg { // .responsive-invisibility(); // } // .visible-xs { // @media (max-width: @screen-xs-max) { // .responsive-visibility(); // } // } // .visible-sm { // @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { // .responsive-visibility(); // } // } // .visible-md { // @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { // .responsive-visibility(); // } // } // .visible-lg { // @media (min-width: @screen-lg-min) { // .responsive-visibility(); // } // } // .hidden-xs { // @media (max-width: @screen-xs-max) { // .responsive-invisibility(); // } // } // .hidden-sm { // @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { // .responsive-invisibility(); // } // } // .hidden-md { // @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { // .responsive-invisibility(); // } // } // .hidden-lg { // @media (min-width: @screen-lg-min) { // .responsive-invisibility(); // } // } // // Print utilities // // // // Media queries are placed on the inside to be mixin-friendly. // .visible-print { // .responsive-invisibility(); // @media print { // .responsive-visibility(); // } // } // .hidden-print { // @media print { // .responsive-invisibility(); // } // }