Skip to content

Instantly share code, notes, and snippets.

@eliasfaical

eliasfaical/grid.less

Last active August 29, 2015 14:04
Show Gist options
  • Save eliasfaical/8ff3cf496e97322151a3 to your computer and use it in GitHub Desktop.
Save eliasfaical/8ff3cf496e97322151a3 to your computer and use it in GitHub Desktop.
Download ZIP
Grid - Urucum Digital
Raw
grid.less
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* CLEAR */
.clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}
/* CONTAINER */
.container {
width: 910px;
margin: 0 auto;
}
/* SECTIONS */
.section {
width: 780px;
clear: both;
padding: 0px;
margin: 0 auto;
.clearfix;
}
/* COLUMN SETUP */
.col {
float: left;
display: block;
margin: 0 0 0 15px;
&:first-child { margin-left: 0; }
}
/* GRID */
// loja
.span_1_of_1 { width: 250px; }
// blog
.span_1_of_2 { width: 250px; }
.span_2_of_2 { width: 580px; }
// single loja
.span_1_of_3 { width: 520px; }
.span_2_of_3 { width: 320px; }
/* --------------------------------- */
.hd, .bd, .ft { min-height: 50px; margin: 10px 0; }
.hd { background-color: red; }
.bd { background-color: green; }
.ft { background-color: red; }
/* --------------------------------- */
Raw
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet/less" type="text/css" href="grid.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="hd"></div>
<!-- ./HEADER -->
<!-- BODY -->
<div class="bd">
<div class="section">
<div class="col colspan_1_of_1"><img src="http://dummyimage.com/250x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></div>
<div class="col colspan_1_of_1"><img src="http://dummyimage.com/250x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></div>
<div class="col colspan_1_of_1"><img src="http://dummyimage.com/250x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></div>
</div>
<div class="section">
<div class="col colspan_1_of_1"><img src="http://dummyimage.com/250x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></div>
<div class="col colspan_1_of_1"><img src="http://dummyimage.com/250x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></div>
<div class="col colspan_1_of_1"><img src="http://dummyimage.com/250x300/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"></div>
</div>
</div>
<!-- ./BODY -->
<!-- FOOTER -->
<div class="ft">
<div class="section">
<div class="span_1_of_1"></div>
<div class="span_1_of_1"></div>
<div class="span_1_of_1"></div>
</div>
</div>
<!-- ./FOOTER -->
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment