Skip to content

Instantly share code, notes, and snippets.

@seankmchenry
Last active April 25, 2017 16:19
Show Gist options
  • Save seankmchenry/62a0aaf928835882f1b4def04dbc9de9 to your computer and use it in GitHub Desktop.
Save seankmchenry/62a0aaf928835882f1b4def04dbc9de9 to your computer and use it in GitHub Desktop.
Inline-block grid with Bootstrap-based class names
/**
* ibgrid.scss
*
* An inline-block grid.
*/
/*
Variables
*/
// breakpoints
$break-xs: 35rem;
$break-sm: 48rem;
$break-md: 62rem;
$break-lg: 75rem;
$break-xl: 90rem;
// gutter size
$gutter-width: 1.25rem !default;
/*
Core
*/
/* Container */
.container-fluid,
.container {
margin-right: auto;
margin-left: auto;
padding-right: $gutter-size;
padding-left: $gutter-size;
/* Clearfix */
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
/* Rows */
.row {
display: block;
margin-left: -$gutter-size;
margin-right: -$gutter-size;
text-rendering: optimizespeed;
letter-spacing: -0.31em;
*letter-spacing: normal;
// word-spacing: -0.43em;
}
/* Columns */
.row [class^="col-"] {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
padding-left: $gutter-size;
padding-right: $gutter-size;
vertical-align: top;
box-sizing: border-box;
letter-spacing: normal;
// word-spacing: normal;
}
// center vertically
.row.middle-xs [class^="col-"] {
vertical-align: middle;
}
/*
Mobile
*/
@for $i from 1 through 12 {
.col-xs-#{$i} {
width: percentage($i/12);
}
.col-xs-offset-#{$i} {
margin-left: percentage($i/12);
}
.col-xs-push-#{$i} {
left: percentage($i/12);
}
.col-xs-pull-#{$i} {
right: percentage($i/12);
}
}
/*
Small
*/
@media only screen and (min-width: $break-sm) {
.container {
width: $break-sm - (2 * $gutter-size);
}
@for $i from 1 through 12 {
.col-sm-#{$i} {
width: percentage($i/12);
}
.col-sm-offset-#{$i} {
margin-left: percentage($i/12);
}
.col-sm-push-#{$i} {
left: percentage($i/12);
}
.col-sm-pull-#{$i} {
right: percentage($i/12);
}
}
.row.middle-sm [class^="col-"] {
vertical-align: middle;
}
}
/*
Medium
*/
@media only screen and (min-width: $break-md) {
.container {
width: $break-md - (2 * $gutter-size);
}
@for $i from 1 through 12 {
.col-md-#{$i} {
width: percentage($i/12);
}
.col-md-offset-#{$i} {
margin-left: percentage($i/12);
}
.col-md-push-#{$i} {
left: percentage($i/12);
}
.col-md-pull-#{$i} {
right: percentage($i/12);
}
}
.row.middle-md [class^="col-"] {
vertical-align: middle;
}
}
/*
Large
*/
@media only screen and (min-width: $break-lg) {
.container {
width: $break-lg - (2 * $gutter-size);
}
@for $i from 1 through 12 {
.col-lg-#{$i} {
width: percentage($i/12);
}
.col-lg-offset-#{$i} {
margin-left: percentage($i/12);
}
.col-lg-push-#{$i} {
left: percentage($i/12);
}
.col-lg-pull-#{$i} {
right: percentage($i/12);
}
}
.row.middle-lg [class^="col-"] {
vertical-align: middle;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment