Created
March 26, 2014 02:21
-
-
Save baxang/9775806 to your computer and use it in GitHub Desktop.
Add an additional breakpoint which covers 0..479px to Twitter Bootstrap 3.1.
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
// Add a breakpoint which covers 0..479px | |
$screen-tn: 320px !default; | |
$screen-tn-min: $screen-tn !default; | |
$screen-tn-max: ($screen-xs-min - 1) !default; | |
// Additional grid mixins for tn. | |
@mixin make-tn-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); | |
} | |
@mixin make-tn-column-offset($columns) { | |
@media (min-width: $screen-tn-min) { | |
margin-left: percentage(($columns / $grid-columns)); | |
} | |
} | |
@mixin make-tn-column-push($columns) { | |
@media (min-width: $screen-tn-min) { | |
left: percentage(($columns / $grid-columns)); | |
} | |
} | |
@mixin make-tn-column-pull($columns) { | |
@media (min-width: $screen-tn-min) { | |
right: percentage(($columns / $grid-columns)); | |
} | |
} | |
// We need .col-tn-# | |
@mixin make-grid-columns() { | |
$list: ''; | |
$i: 1; | |
$list: ".col-tn-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; | |
@for $i from (1 + 1) through $grid-columns { | |
$list: "#{$list}, .col-tn-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; | |
} | |
#{$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); | |
} | |
} | |
// Let's re-declare grids. | |
@include make-grid(tn); | |
@media (min-width: $screen-xs-min) { | |
@include make-grid(xs); | |
} | |
@media (min-width: $screen-sm-min) { | |
@include make-grid(sm); | |
} | |
@media (min-width: $screen-md-min) { | |
@include make-grid(md); | |
} | |
@media (min-width: $screen-lg-min) { | |
@include make-grid(lg); | |
} | |
// Redefind responsive utilities. | |
@-ms-viewport { | |
width: device-width; | |
} | |
@include responsive-invisibility('.visible-tn, .visible-xs, .visible-sm, .visible-md, .visible-lg'); | |
@media (max-width: $screen-tn-max) { | |
@include responsive-visibility('.visible-tn'); | |
} | |
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { | |
@include responsive-visibility('.visible-xs'); | |
} | |
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { | |
@include responsive-visibility('.visible-sm'); | |
} | |
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { | |
@include responsive-visibility('.visible-md'); | |
} | |
@media (min-width: $screen-lg-min) { | |
@include responsive-visibility('.visible-lg'); | |
} | |
@media (max-width: $screen-tn-max) { | |
@include responsive-invisibility('.hidden-tn'); | |
} | |
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { | |
@include responsive-invisibility('.hidden-xs'); | |
} | |
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { | |
@include responsive-invisibility('.hidden-sm'); | |
} | |
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { | |
@include responsive-invisibility('.hidden-md'); | |
} | |
@media (min-width: $screen-lg-min) { | |
@include responsive-invisibility('.hidden-lg'); | |
} | |
// Shorthand mixin for the breakpoint. | |
@mixin bp-tn { | |
@media (max-width: $screen-tn-max) { | |
@content; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment