Skip to content

Instantly share code, notes, and snippets.

@madr madr/rutnät.scss
Created Nov 3, 2015

Embed
What would you like to do?
simple bootstrap for your own grid system
@charset "utf-8";
// Grids, loosely based on Flexbox grid:
// https://github.com/kristoferjoseph/flexboxgrid
// extend to use flexbox
%row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
> * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
}
// CONTAINER HELPERS
// ==================================================================
// extend to reverse order
%row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
// extend to turn row into column
%row-vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
// extend to turn row into column with reversed order
%row-vertical-reverse {
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse;
}
// extend to align items to the middle of the container
%row-align-middle {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
// extend to align items at the start of the container (top/left)
%row-align-start {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
// extend to align items at the end of the container (bottom/right)
%row-align-end {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
// extend to set remaining white-space around all items
.row-whitespace-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
// extend to set remaining white-space between all items
.row-whitespace-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
// UNIT HELPERS
// ==================================================================
// include to set unit width
@mixin unit ($width) {
-webkit-flex-basis: $width;
-ms-flex-preferred-size: $width;
flex-basis: $width;
max-width: $width;
}
// extend to force-put unit first in flexbox.
%unit-put-first {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
// extend to force-put unit last in flexbox.
%unit-put-last {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
// extend to center content in unit, horizontally AND vertically
%unit-align-middle {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
// extend to center content to top/left
%unit-align-top {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
// extend to align content to bottom/right
%unit-align-bottom {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.