Skip to content

Commit

Permalink
Boxes & panels page added.
Browse files Browse the repository at this point in the history
  • Loading branch information
Egor Kloos committed Sep 7, 2011
1 parent 0078e34 commit b485390
Show file tree
Hide file tree
Showing 11 changed files with 301 additions and 51 deletions.
140 changes: 140 additions & 0 deletions boxes.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!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>
</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. So your CSS should be able to share share chunks of code without the need to overwrite inherited code. With LESS this is very important so that you can avoid properties repeating themselves. </p>
<p>You can also see the maximum number of selectors in a rule. We've found that using more than four selectors is a good indicator of a problem with the implemented cascade. So keep your <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html" title="Andy Clarke's blog">specificity</a> as low as possible.</p>
</section>
<section class="examples">
<ul class="">
<li class="box">
<h3>Simple box</h3>
<code>
&lt;body&gt;
&lt;section class=&quot;box&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>
.box {
.panel;
.rounded-corners();
background-color: @light-color;
.box-shadow();
}
</code>
</li>
<li class="panel-box">
<header><h3>Box with header and footer*</h3></header>
<section>
<code>
&lt;body&gt;
&lt;section class=&quot;panel-box&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>
<code>
.panel-box {
.box;
.text-shadow(@l,@light-color);
background-color: @grey1;
}
.panel-box header {
.panel-inset;
.rounded-corners-top();
.gradient(@light-color,@grey2);
}
.panel-box footer {
.panel-inset;
.rounded-corners-bottom();
background-color: @grey2;
}
.panel-box header ~ section {
padding: @line 0;
}
</code>
</section>
<footer>* Optional text</footer>
</li>
<li class="panel-box highlighted">
<header><h3>Highlighted box</h3></header>
<section>
<code>
&lt;body&gt;
&lt;section class=&quot;panel-box 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>
57 changes: 35 additions & 22 deletions forms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
<li class="active"><a href="forms.html">Forms</a></li>
<li><a href="table.html">Tables</a></li>
<li><a href="layout.html">Layout</a></li>
<li><a href="boxes.html">Boxes</a></li>
<li><a href="less.html">LESS</a></li>
</ul>
</nav>
Expand Down Expand Up @@ -128,38 +129,46 @@ <h4>Buttons (right aligned)</h4>

<section class="notes">
<code class="note">
&lt;form&gt;
&lt;form novalidate&gt;
&lt;h4&gt;Contact form&lt;/h4&gt;
&lt;fieldset&gt;
&lt;div&gt;
&lt;label for="id01"&gt;Name *&lt;/label&gt;
&lt;input type="text" id="id01" required /&gt;
&lt;label for=&quot;id00&quot;&gt;ID&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;id00&quot; value=&quot;0001 (readonly id)&quot; readonly /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="id02"&gt;E-mail *&lt;/label&gt;
&lt;input type="email" id="id02" required /&gt;
&lt;label for=&quot;id01&quot;&gt;Name *&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;id01&quot; required /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="id03"&gt;Subject&lt;/label&gt;
&lt;input type="text" id="id03" /&gt;
&lt;label for=&quot;id02&quot;&gt;E-mail *&lt;/label&gt;
&lt;input type=&quot;email&quot; id=&quot;id02&quot; required /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="id04"&gt;Message *&lt;/label&gt;
&lt;textarea id="id04" rows="10" cols="20" required&gt;&lt;/textarea&gt;
&lt;label for=&quot;id03&quot;&gt;URL (optional)&lt;/label&gt;
&lt;input type=&quot;url&quot; id=&quot;id03&quot; placeholder=&quot;http://&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for=&quot;id04&quot;&gt;Subject&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;id04&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for=&quot;id05&quot;&gt;Message *&lt;/label&gt;
&lt;textarea id=&quot;id05&quot; rows=&quot;10&quot; cols=&quot;20&quot; required&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label&gt;Do you wish to receive our newletter?&lt;/label&gt;
&lt;div&gt;
&lt;input type="radio" name="radio" id="id05" /&gt;
&lt;label for="id05"&gt;Yes&lt;/label&gt;
&lt;input type="radio" name="radio" id="id06" /&gt;
&lt;label for="id06"&gt;No&lt;/label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot; id=&quot;id06&quot; /&gt;&lt;label for=&quot;id06&quot;&gt;Yes&lt;/label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot; id=&quot;id07&quot; /&gt;&lt;label for=&quot;id07&quot;&gt;No&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;div class="buttons"&gt;
&lt;button type="submit" class="save" value="Save"&gt;Save&lt;/button&gt;
&lt;button type="button" class="cancel"value="Cancel"&gt;Cancel&lt;/button&gt;
&lt;div class=&quot;buttons&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;save&quot; value=&quot;Save&quot;&gt;Save&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;cancel&quot;value=&quot;Cancel&quot;&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
&lt;p&gt;* These fields are required.&lt;/p&gt;
&lt;/form&gt;
</code>
</section>
Expand All @@ -179,18 +188,22 @@ <h4>Contact form</h4>
<input type="email" id="id02" required />
</div>
<div>
<label for="id03">Subject</label>
<input type="text" id="id03" />
<label for="id03">URL (optional)</label>
<input type="url" id="id03" placeholder="http://" />
</div>
<div>
<label for="id04">Subject</label>
<input type="text" id="id04" />
</div>
<div>
<label for="id04">Message *</label>
<textarea id="id04" rows="10" cols="20" required></textarea>
<label for="id05">Message *</label>
<textarea id="id05" rows="10" cols="20" required></textarea>
</div>
<div>
<label>Do you wish to receive our newletter?</label>
<div>
<input type="radio" name="radio" id="id05" /><label for="id05">Yes</label>
<input type="radio" name="radio" id="id06" /><label for="id06">No</label>
<input type="radio" name="radio" id="id06" /><label for="id06">Yes</label>
<input type="radio" name="radio" id="id07" /><label for="id07">No</label>
</div>
</div>
</fieldset>
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
<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><a href="boxes.html">Boxes</a></li>
<li><a href="less.html">LESS</a></li>
</ul>
</nav>
Expand Down
7 changes: 4 additions & 3 deletions layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
<li><a href="forms.html">Forms</a></li>
<li><a href="table.html">Tables</a></li>
<li class="active"><a href="layout.html">Layout</a></li>
<li><a href="boxes.html">Boxes</a></li>
<li><a href="less.html">LESS</a></li>
</ul>
</nav>
Expand All @@ -40,7 +41,7 @@ <h5>Holding it all together!</h5>
</section>
<section class="examples">
<ul class="">
<li>
<li class="box">
<h3>2 column, left sidebar</h3>
<code>
&lt;body&gt;
Expand Down Expand Up @@ -76,7 +77,7 @@ <h5>Less code:</h5>
}
</code>
</li>
<li>
<li class="box">
<h3>2 columns, right sidebar</h3>
<code>
&lt;body&gt;
Expand Down Expand Up @@ -112,7 +113,7 @@ <h5>Less code:</h5>
}
</code>
</li>
<li>
<li class="box">
<h3>3 columns, 2 sidebars</h3>
<code>
&lt;body&gt;
Expand Down
35 changes: 29 additions & 6 deletions less.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
<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><a href="boxes.html">Boxes</a></li>
<li class="active"><a href="less.html">LESS</a></li>
</ul>
</nav>
Expand Down Expand Up @@ -195,15 +196,36 @@ <h3><a href="#">Mixin functions</a></h3>
// IE HACK!!
//filter: e("progid:DXImageTransform.Microsoft.Gradient( StartColorStr=")@start e(", EndColorStr=")@stop e(",GradientType=0 )");/* ie */
}


.background-clip {
// Background clip to allow borders to blend properly with the background
-moz-background-clip: padding;
-webkit-background-clip:padding-box;
background-clip: padding-box;
}
.rounded-corners(@r:@rad) {
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
border-radius: @arguments;
// Background clip to allow borders to blend properly with the background
-moz-background-clip: padding;
-webkit-background-clip:padding-box;
background-clip: padding-box;
.background-clip;
}
.rounded-corners-top(@r:@rad) {
-webkit-border-top-left-radius: @arguments;
-webkit-border-top-right-radius: @arguments;
-moz-border-radius-topleft: @arguments;
-moz-border-radius-topright: @arguments;
border-top-left-radius: @arguments;
border-top-right-radius: @arguments;
.background-clip;
}
.rounded-corners-bottom(@r:@rad) {
-webkit-border-bottom-right-radius: @arguments;
-webkit-border-bottom-left-radius: @arguments;
-moz-border-radius-bottomright: @arguments;
-moz-border-radius-bottomleft: @arguments;
border-bottom-right-radius: @arguments;
border-bottom-left-radius: @arguments;
.background-clip;
}

.columns(@col:2) {
Expand Down Expand Up @@ -238,7 +260,8 @@ <h3><a href="#">Mixin functions</a></h3>
.opacity(@alpha:0.5) {
opacity: @arguments;
filter: e("Alpha(Opacity=")@arguments e(")");
} </code>
}
</code>
</div>
</div>

Expand Down
Loading

0 comments on commit b485390

Please sign in to comment.