touchstonejs-ui/less/core/grid.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

// 
// Grid
// ==============================

// Base
// ------------------------------

.g-row {
	.display-flex();
	.flex-wrap(wrap);

	// offset spacing
	margin-left: -(@gutter-base / 2);
	margin-right: -(@gutter-base / 2);
}
.g-col {
	.flex-grow(1);

	// provide spacing
	padding-left: (@gutter-base / 2);
	padding-right: (@gutter-base / 2);
}

// Fixed Widths (optional)
// ------------------------------

.g-one-whole,
.g-one-half,
.g-one-quarter,
.g-three-quarters,
.g-one-third,
.g-two-thirds,
.g-one-fifth,
.g-two-fifths,
.g-three-fifths,
.g-four-fifths,
.g-one-sixth,
.g-five-sixths {
	.flex-grow(0);
}

.g-one-whole      { width: 100%; }

.g-one-half,
.g-two-quarters,
.g-three-sixths   { width: 50%; }

.g-one-quarter    { width: 25%; }
.g-three-quarters { width: 75%; }

.g-one-third,
.g-two-sixths     { width: 33.333%; }
.g-two-thirds,
.g-four-sixths    { width: 66.666%; }

.g-one-fifth      { width: 20%; }
.g-two-fifths     { width: 40%; }
.g-three-fifths   { width: 60%; }
.g-four-fifths    { width: 80%; }

.g-one-sixth      { width: 16.666%; }
.g-five-sixths    { width: 83.333%; }