purist-css/src/grid/grid-core.css

Purist a complete reimagining of Yahoo's Pure to be less opinionated and more abstracted.

/*
   #grid
   ========================================================================== */

/**
 * The grid object is used to create a fluid grid.
 *
 * Usage:
 *
 * <div class="o-grid">
 *     <div class="o-grid__item"></div>
 *     <div class="o-grid__item"></div>
 *     <div class="o-grid__item"></div>
 * </div>
 */

.o-grid {
	margin-left: -1.5em;
}

    .o-grid:after {
        display: table;
        content: "";
        clear: both;
    }

		.o-grid__item {
			float: left;
			padding-left: 1.5em;
			box-sizing: border-box;
		}

/*
   #width
   ========================================================================== */

/**
 * The width utility classes set the widths on grid items for normal displays.
 *
 * Usage:
 *
 * <div class="o-grid">
 *     <div class="o-grid__item u-w-1-3"></div>
 *     <div class="o-grid__item u-w-1-3"></div>
 *     <div class="o-grid__item u-w-1-3"></div>
 * </div>
 */

/* Large */

.u-w-1-1    { width: 100%; }
.u-w-1-2    { width: 50%; }
.u-w-1-3    { width: 33.3%; }
.u-w-1-4    { width: 25%; }
.u-w-2-3    { width: 66.6%; }
.u-w-3-4    { width: 75%; }
.u-w-1-5    { width: 20%; }
.u-w-2-5    { width: 40%; }
.u-w-3-5    { width: 60%; }
.u-w-4-5    { width: 80%; }

/* Medium */

@media (max-width: 48em) {
    .u-mw-1-1   { width: 100%; }
    .u-mw-1-2   { width: 50%; }
    .u-mw-1-3   { width: 33.3%; }
    .u-mw-1-4   { width: 25%; }
    .u-mw-2-3   { width: 66.6%; }
    .u-mw-3-4   { width: 75%; }
    .u-mw-hide  { display: none; }
}

/* Small */

@media (max-width: 35.5em) {
    .u-sw-1-1   { width: 100%; }
    .u-sw-1-2   { width: 50%; }
    .u-sw-1-3   { width: 33.3%; }
    .u-sw-1-4   { width: 25%; }
    .u-sw-2-3   { width: 66.6%; }
    .u-sw-3-4   { width: 75%; }
    .u-sw-hide  { display: none; }
}