Skip to content

Instantly share code, notes, and snippets.

@mediastuttgart
Last active September 8, 2015 06:36
Show Gist options
  • Save mediastuttgart/caa6e410c5aed8eebd92 to your computer and use it in GitHub Desktop.
Save mediastuttgart/caa6e410c5aed8eebd92 to your computer and use it in GitHub Desktop.
bootstrap 3 col-sx
/*
override default before import
$screen-xs-max: 479px;
@import '_bootstrap.scss';
*/
$screen-sx: 480px !default;
$screen-sx-min: $screen-sx !default;
$screen-sx-max: ($screen-sm-min - 1) !default;
$container-sx: 400px + $grid-gutter-width !default;
.container {
@include container-fixed;
@media (min-width: $screen-sx-min) {
width: $container-sx;
}
@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;
}
}
@mixin make-sx-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-sx-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-sx-column-offset($columns) {
@media (min-width: $screen-sx-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-sx-column-push($columns) {
@media (min-width: $screen-sx-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-sx-column-pull($columns) {
@media (min-width: $screen-sx-min) {
right: percentage(($columns / $grid-columns));
}
}
@mixin make-grid-sx-column($i: 1, $list: ".col-sx-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-sx-#{$i}";
}
#{$list} {
position: relative;
min-height: 1px;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
@include make-grid-sx-column();
@media (min-width: $screen-sx-min) {
@include make-grid(sx);
}
.visible-sx-block,
.visible-sx-inline,
.visible-sx-inline-block {
display: none !important;
}
.visible-sx-block {
@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
display: block !important;
}
}
.visible-sx-inline {
@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
display: inline !important;
}
}
.visible-sx-inline-block {
@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
display: inline-block !important;
}
}
@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
@include responsive-visibility('.visible-sx');
}
@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
@include responsive-invisibility('.hidden-sx');
}
@AndersDJohnson
Copy link

FYI I've published similar code as https://github.com/adjohnson916/bootstrap-grid-ms.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment