Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: f52ccfe2cd
Fetching contributors…

Cannot retrieve contributors at this time

153 lines (143 sloc) 5.489 kB
<!DOCTYPE html>
<html lang="">
<head>
<title>Lunatech Labs - Front-end Patterns</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="stylesheet" type="text/css" media="screen" href="styles/vanilla/css/main.css">
<script src="scripts/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/init.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header>
<div class="logo">Front-end Patterns</div>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="usage.html">Usage</a></li>
<li><a href="text.html">Content</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="table.html">Tables</a></li>
<li><a href="layout.html">Layout</a></li>
<li class="active"><a href="boxes.html">Boxes</a></li>
<li><a href="less.html">LESS</a></li>
<li><a href="play.html">Play</a></li>
</ul>
</nav>
<article class="content">
<hgroup>
<h1>Living in a box</h1>
<h5>It's where your content lives!</h5>
</hgroup>
<section class="info">
<p>Boxes, panels and blocks al have something in common. Usually you want to treat <a href="http://en.wikipedia.org/wiki/White_space_(visual_arts)" title="Wikipedia article">white space</a> in a consistant manner. So your CSS should be able to share share chunks of code without the need to overwrite inherited code. <br>
With LESS this is very important so that you can avoid properties repeating themselves. </p>
<p>
To achieve below we needed to make sure block elements with negative margins (heading and footer) are offset by their sibling block elements (sections) to avoid duplication. So that in this case the three headings take up the same amount of space.
</p>
</section>
<section class="examples">
<ul class="">
<li class="panel">
<h3>Simple box</h3>
<code>
&lt;body&gt;
&lt;section class=&quot;panel&quot;&gt;
&lt;h3&gt;Simple box&lt;/h3&gt;
&lt;p&gt;lorem&#8230;&lt;/p&gt;
&lt;/section&gt;
&lt;/body&gt;
</code>
<h5>Less code:</h5>
<code>
.panel {
.box;
.rounded-corners();
background-color: @light-color;
.box-shadow();
}
.panel > header {
.box-inset;
.rounded-corners-top();
}
.panel > footer {
.box-inset;
.rounded-corners-bottom();
}
.panel > header ~ section {
padding: @line 0;
}
</code>
</li>
<li class="panel widgit">
<header><h3>Box with header and footer*</h3></header>
<section>
<code>
&lt;body&gt;
&lt;section class=&quot;panel widgit&quot;&gt;
&lt;header&gt;
&lt;h3&gt;Box with header and footer*&lt;/h3&gt;
&lt;/header&gt;
&lt;section&gt;lorem&#8230;&lt;/section&gt;
&lt;footer&gt;* Optional text&lt;/footer&gt;
&lt;/section&gt;
&lt;/body&gt;
</code>
<h5>Less code:</h5>
<p>
The '.widgit' class extends '.panel'. <br>
In this case '.widgit' only overrides the colour.
</p>
<code>
.widgit {
.text-shadow(@l,@light-color);
background-color: @grey1;
}
.widgit header {
.gradient(@light-color,@grey2);
}
.widgit footer {
background-color: @grey2;
}
</code>
</section>
<footer>* Optional text</footer>
</li>
<li class="panel widgit highlighted">
<header><h3>Highlighted box</h3></header>
<section>
<code>
&lt;body&gt;
&lt;section class=&quot;panel widgit highlighted&quot;&gt;
&lt;header&gt;
&lt;h3&gt;Highlighted box&lt;/h3&gt;
&lt;/header&gt;
&lt;section&gt;lorem&#8230;&lt;/section&gt;
&lt;/section&gt;
&lt;/body&gt;
</code>
<h5>Less code:</h5>
<code>
.highlighted {
background-color: @yellow1;
.gradient(@yellow1,@yellow2);
}
.highlighted header {
color: @light-color;
.text-shadow(0 - @l,@dark-color);
.gradient(@grey5,@grey6);
}
</code>
</section>
</li>
</ul>
</section>
</article>
<footer>
<p>Copyright &copy; 2011, Lunatech Research B.V. All rights reserved.</p>
</footer>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.