Skip to content

Instantly share code, notes, and snippets.

@ActionScripted

ActionScripted/simple-grid.html

Created June 4, 2014 18:35
Show Gist options
  • Save ActionScripted/9a70fb64c020566eb370 to your computer and use it in GitHub Desktop.
Save ActionScripted/9a70fb64c020566eb370 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Responsive Grid
Raw
simple-grid.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TODO: Page Title</title>
<meta name="description" content="TODO: Page Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/*
* Utility Classes
*/
.grid-clearfix, .grid-row {
*zoom: 1;
display: block; }
.grid-clearfix:before, .grid-row:before, .grid-clearfix:after, .grid-row:after {
content: " ";
display: table; }
.grid-clearfix:after, .grid-row:after {
clear: both; }
.grid-borderbox, .grid-row, .grid-col-1,
.grid-col-2,
.grid-col-3,
.grid-col-4 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/*
* Grid Classes
*/
.grid-row {
width: 100%; }
.grid-col-1,
.grid-col-2,
.grid-col-3,
.grid-col-4 {
float: left;
padding: 9px 18px; }
.grid-col-1 {
width: 100%; }
.grid-col-2 {
width: 50%; }
.grid-col-3 {
width: 33.33333%; }
.grid-col-4 {
width: 25%; }
</style>
</head>
<body>
<div class="container">
<div class="grid-row">
<div class="grid-col-1">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="grid-row">
<div class="grid-col-2">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="grid-col-2">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="grid-row">
<div class="grid-col-3">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="grid-col-3">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="grid-col-3">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="grid-row">
<div class="grid-col-4">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="grid-col-4">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="grid-col-4">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="grid-col-4">
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</body>
</html>
@ActionScripted
Copy link
Author

SASS file source used to generate the simple CSS in the header:

/*
 * Utility Classes
 */

.grid-clearfix {
  & {
    *zoom: 1;
    display: block;
  }
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.grid-borderbox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/*
 * Grid Classes
 */

.grid-row {
  @extend .grid-clearfix;
  @extend .grid-borderbox;
  width: 100%;
}

.grid-col-1,
.grid-col-2,
.grid-col-3,
.grid-col-4 {
  @extend .grid-borderbox;
  float: left;
  padding: 9px 18px;
}

.grid-col-1 {
  width: 100%;
}

.grid-col-2 {
  width: 1/2 * 100%;
}

.grid-col-3 {
  width: 1/3 * 100%;
}

.grid-col-4 {
  width: 1/4 * 100%;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment