bootstrap_ms.css.less

// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
//
// LICENSE under MIT - https://github.com/twbs/bootstrap/blob/master/LICENSE
//
// Source: https://gist.github.com/matjaz-elumina/fb4eb093764db68dbed9
// Forked: https://gist.github.com/seyDoggy/4f370a676f5db6df2d1d
//
// This is a hack to fill the gap between 480 and 760 pixels - a missing range
// in the bootstrap responsive grid structure. Use these classes to style pages
// on cellphones when they transition from portrait to landscape.
//
// By default, the smallest column (col-xs-*) spans from 480px to 768px,
// neglecting the ever-useful 640px screen size. This snippet aims to solve
// that by limiting col-xs-* to the 480px to 640px range and adding col-ms-*
// that covers the range between 640px and 768px.
//
// This initiative was originally started by @andyl in response to this thread
// https://github.com/twbs/bootstrap/issues/10203, but I found it lacked the
// responsive utilities, container widths and other such conveniences that it
// generally raised more questions in me than it solved. Plus it didn't actually
// work well in my test cases. I'm hoping what I've done here fixes that.
//
// SASS version here: https://gist.github.com/seyDoggy/4f370a676f5db6df2d1d
//
// See https://github.com/twbs/bootstrap/issues/10203 for more info.
//
// Columns, offsets, pushes, pulls, visible-ms-*, hidden-ms and container-ms
// for the ms device range, from landscape phones (640px) to tablets (768px).
//
// Note that `.col-ms-12` doesn't get floated on purpose—there's no need since
// it's full-width.
 
// @screen-ms variables (defined above import for @screen-xs-max override)
@screen-ms: 640px;
@screen-ms-min: @screen-ms;
 
// overrides default (has to be before import) // this doesn't work // this needs to be defined in variables.less
@screen-xs-max: (@screen-ms-min - 1);
 
// Include bootstrap
@import "bootstrap.less";
 
// @screen-ms-max (defined after import to read @screen-sm)
@screen-ms-max: (@screen-sm-min - 1);
 
// @container-ms (defined after import to read @grid-gutter-width)
@container-ms: (592px + @grid-gutter-width);
 
// ms visible helper
.visible-ms {
 @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
  .responsive-visibility();
 }  
}
.visible-ms-block {
@media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
display: block !important;
}
}
.visible-ms-inline {
@media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
display: inline !important;
}
}
.visible-ms-inline-block {
@media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
display: inline-block !important;
}
}
 
// ms visible helper
.visible-ms {
  display: none !important;
}
.visible-ms-block,
.visible-ms-inline,
.visible-ms-inline-block {
  display: none !important;
}

.hidden-ms {
 @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
  .responsive-invisibility();
 }
}
 
// Container widths
//
// Set the container width (again), and override it for fixed navbars in media queries.
 
.container {
.container-fixed();
 
@media (min-width: @screen-ms-min) {
width: @container-ms;
}
@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;
}
}
 
// ----- common styles - from twbs/bootstrap/blob/master/less/grid.less -----
 
.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
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-ms breakpoints and related classes -----
 
@media (min-width: @screen-ms-min) {
 
.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11 {
float: left;
}
.col-ms-1 { width: percentage((1 / @grid-columns)); }
.col-ms-2 { width: percentage((2 / @grid-columns)); }
.col-ms-3 { width: percentage((3 / @grid-columns)); }
.col-ms-4 { width: percentage((4 / @grid-columns)); }
.col-ms-5 { width: percentage((5 / @grid-columns)); }
.col-ms-6 { width: percentage((6 / @grid-columns)); }
.col-ms-7 { width: percentage((7 / @grid-columns)); }
.col-ms-8 { width: percentage((8 / @grid-columns)); }
.col-ms-9 { width: percentage((9 / @grid-columns)); }
.col-ms-10 { width: percentage((10/ @grid-columns)); }
.col-ms-11 { width: percentage((11/ @grid-columns)); }
.col-ms-12 { width: 100%; }
 
// Push and pull columns for source order changes
.col-ms-push-1 { left: percentage((1 / @grid-columns)); }
.col-ms-push-2 { left: percentage((2 / @grid-columns)); }
.col-ms-push-3 { left: percentage((3 / @grid-columns)); }
.col-ms-push-4 { left: percentage((4 / @grid-columns)); }
.col-ms-push-5 { left: percentage((5 / @grid-columns)); }
.col-ms-push-6 { left: percentage((6 / @grid-columns)); }
.col-ms-push-7 { left: percentage((7 / @grid-columns)); }
.col-ms-push-8 { left: percentage((8 / @grid-columns)); }
.col-ms-push-9 { left: percentage((9 / @grid-columns)); }
.col-ms-push-10 { left: percentage((10/ @grid-columns)); }
.col-ms-push-11 { left: percentage((11/ @grid-columns)); }
 
.col-ms-pull-1 { right: percentage((1 / @grid-columns)); }
.col-ms-pull-2 { right: percentage((2 / @grid-columns)); }
.col-ms-pull-3 { right: percentage((3 / @grid-columns)); }
.col-ms-pull-4 { right: percentage((4 / @grid-columns)); }
.col-ms-pull-5 { right: percentage((5 / @grid-columns)); }
.col-ms-pull-6 { right: percentage((6 / @grid-columns)); }
.col-ms-pull-7 { right: percentage((7 / @grid-columns)); }
.col-ms-pull-8 { right: percentage((8 / @grid-columns)); }
.col-ms-pull-9 { right: percentage((9 / @grid-columns)); }
.col-ms-pull-10 { right: percentage((10/ @grid-columns)); }
.col-ms-pull-11 { right: percentage((11/ @grid-columns)); }
 
// Offsets
.col-ms-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-ms-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-ms-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-ms-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-ms-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-ms-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-ms-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-ms-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-ms-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-ms-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-ms-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} 

Still no CSS version?