Skip to content

Instantly share code, notes, and snippets.

@ryantownsend

ryantownsend/example.html

Last active August 15, 2016 19:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryantownsend/3b2ebdd7e53de85ada01 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryantownsend/3b2ebdd7e53de85ada01 to your computer and use it in GitHub Desktop.
Download ZIP
ITCSS Flexbox Grid Object
Raw
example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="main.css" />
<title>ITCSS Grid Example</title>
</head>
<body>
<h3>Example of combining halfs and quarters</h3>
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--1/2@md">
o-grid__cell o-grid__cell--1/2@md
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
</div>
</div>
<h3>Example of nested grid</h3>
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--1/2@md">
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--1/2@md">
o-grid__cell o-grid__cell--1/2@md
</div>
<div class="o-grid__cell o-grid__cell--1/2@md">
o-grid__cell o-grid__cell--1/2@md
</div>
</div>
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
</div>
</div>
<h3>Example of quarters</h3>
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--3/4@sm">
o-grid__cell o-grid__cell--3/4@sm
</div>
<div class="o-grid__cell o-grid__cell--1/4@sm">
o-grid__cell o-grid__cell--1/4@sm
</div>
</div>
<h3>Example of thirds</h3>
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--1/3@sm">
o-grid__cell o-grid__cell--1/3@sm
</div>
<div class="o-grid__cell o-grid__cell--2/3@sm">
o-grid__cell o-grid__cell--2/3@sm
</div>
</div>
<h3>Example of reordering based on screen size</h3>
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--1/2@md u-order-2@md">
First when small, second (right) on medium<br />
o-grid__cell o-grid__cell--1/2@md u-order-2@md
</div>
<div class="o-grid__cell o-grid__cell--1/2@md u-order-1@md">
Second when small, first (left) on medium<br />
o-grid__cell o-grid__cell--1/2@md u-order-1@md
</div>
</div>
<h3>Example of multiple rows</h3>
<div class="o-grid">
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
</div>
<div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
</div>
</div>
</body>
</html>
Raw
main.scss
//
// s-breakpoints.scss
// Simply defines a key and min-width for each dimension to respond at
//
$breakpoints: (sm: 480px, md: 640px, lg: 960px);
//
// o-grid.scss
// Defines our grid object, no styling beyond layout
//
.o-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
&__cell {
min-width: 100%;
max-width: 100%;
flex: 1 1 100%;
@mixin grid-size($numerator, $denominator) {
$min-width: (100% / (($denominator + 1) / $numerator)) + 1%;
$max-width: 100% / ($denominator / $numerator);
min-width: $min-width;
max-width: $max-width;
flex-basis: $min-width;
}
$fractions: (1,2), (1,3), (2, 3), (3, 4), (1,4);
@each $numerator, $denominator in $fractions {
&--#{$numerator}\/#{$denominator} {
@include grid-size($numerator, $denominator);
@each $key, $size in $breakpoints {
@media (min-width: $size) {
&\@#{$key} { @include grid-size($numerator, $denominator); }
}
}
}
}
}
}
//
// u-order.scss
// Defines our order utility classes to re-order columns for different browser sizes
//
@for $number from 1 through 10 {
.u-order-#{$number} {
order: $number;
@each $key, $size in $breakpoints {
@media (min-width: $size) {
&\@#{$key} { order: $number }
}
}
}
}
//
// ignore.scss
// This is purely for demo purposes, do not include
//
body {
font: 14px/1.25 helvetica neue, helvetica, sans-serif;
background: #f7f7f7;
}
h3 {
font-size: 16px;
font-weight: bold;
}
.o-grid {
background: #fff;
box-sizing: border-box;
& & {
margin: -6px;
background: rgba(0,0,0,0.1);
}
&__cell {
box-sizing: border-box;
border: 1px solid #999;
padding: 5px;
@for $number from 1 through 10 {
&:nth-child(#{$number}) {
background-color: rgba(0,0,0,(0.1 * $number));
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment