Permalink
Fetching contributors…
Cannot retrieve contributors at this time
97 lines (92 sloc) 2.46 KB
<!DOCTYPE html>
<html>
<head>
<title>Griddles</title>
<!--[if (gte IE 9)|!(IE)]><!-->
<link href='css/debug/griddles-mq.css' rel='stylesheet' type='text/css'>
<!--<![endif]-->
<!--[if lt IE 9]>
<link href='css/debug/griddles-no-mq.css' rel='stylesheet' type='text/css'>
<![endif]-->
<style type='text/css'>
.container {
max-width: 70em;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
font-family: helvetica, sans;
}
.txt {
height: 50px;
background: #eee;
text-align: center;
line-height: 50px;
text-shadow: 0 1px 1px #FFF;
color: #ccc;
}
.txt:hover {
background: #ccc;
color: #717171;
}
.extra-div {
height: 100px;
}
.s-show div {
font-size: 15px;
}
.m-show div {
font-size: 20px;
}
.l-show div {
font-size: 25px;
}
.xl-show div {
font-size: 30px;
}
.xxl-show div {
font-size: 35px;
}
.red {
background: #BD1D4A;
}
.blue {
background: #2C86EE;
}
.purple {
background: #613CBC;
}
.orange {
background: #D9522C;
}
.outlined {
outline: 1px solid yellow;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Griddles</h1>
</header>
<h2>Nested Grids should not have guttering applied if the parent does.</h2>
<div class="grid gutter nesting-examples">
<div class="g-1/2">
<div class="grid">
<div class="g-1/2"><div class="txt red"></div></div>
<div class="g-1/2"><div class="txt blue"></div></div>
<div class="g-1/3"><div class="txt red"></div></div>
<div class="g-2/3"><div class="txt blue"></div></div>
</div>
</div>
<div class="g-1/2">
<div class="grid">
<div class="g-1/3"><div class="txt red"></div></div>
<div class="g-2/3"><div class="txt blue"></div></div>
<div class="g-1/2"><div class="txt red"></div></div>
<div class="g-1/2"><div class="txt blue"></div></div>
</div>
</div>
</div>
</div>
</body>
</html>