oreolek
/
smalkil
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Something resembling a sample.

This commit is contained in:
Alexander Yakovlev 2012-12-12 11:26:11 +07:00
parent 13e40538e7
commit 460d4e3cdd
7 changed files with 859 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
colors.less
View File

@ -7,3 +7,18 @@
@foreground2: #222;
@foreground3: #444;
@foreground4: #666;
body {
color: @foreground1;
background-color: @background1;
}
a {
color: @foreground2;
&:hover {
color: @foreground4;
}
&:visited {
color: @foreground3;
}
}

4
elements.less
View File

@ -207,4 +207,8 @@
column-rule-style: @columnRuleStyle;
column-rule-width: @columnRuleWidth;
}
.centered(@width: auto) {
width: @width;
margin: 0 auto;
}
}

34
layout.less Normal file
View File

@ -0,0 +1,34 @@
@basesize: 1em;
body{
margin: @basesize 2 * @basesize;
font-size: @basesize;
line-height: 1.5 * @basesize;
margin-bottom: 1.5 * @basesize;
}
h1 {
font-size: 2 * @basesize;
line-height: 0.75 * @basesize;
}
h2 {
font-size: 1.5 * @basesize;
line-height: @basesize;
}
p {
text-indent: 2 * @basesize;
}
h1, h2, h3, h4, h5, h6 { }
p { }
ol, ul { }
a { }
blockquote { }
pre, code { }
small { }
.hidden {
display: none;
}

375
normalize.less vendored Normal file
View File

@ -0,0 +1,375 @@
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* Original author: necolas -- https://github.com/necolas/normalize.css */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font size within `section` and `article` contexts in
* Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}

428
sample/index.html Normal file
View File

@ -0,0 +1,428 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smalkil Sample Page</title>
<link rel="stylesheet" href="sample.css" type="text/css" media="all">
</head>
<body>
<div class="header">
<h1>Demonstration page</h1>
<h2>This is a demonstration of Smalkil LESS CSS Framework.</h2>
<p>This is not a complete coverage, but merely enough to understand the style.</p>
</div>
<div class="navigation">
<ul>
<li><a href="#text">Text</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#tables">Tables</a></li>
</ul>
</div>
<div class="column">
<h4>How it's done</h4>
<p>The page has its own <acronym title="Leaner Cascade Style Sheet">LESS</acronym> stylesheet, which compiles into <acronym title="Cascade Style Sheet">CSS</acronym> one.</p>
<p>Its style imports Smalkil styles; moreover, Smalkil provides number of functions and mixins to use in custom styles.</p>
<p>This is a bit awkward, isn't it? I know. (sigh)</p>
</div>
<div class="column">
<h4>And another box</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
</div>
<div class="column">
<h4>This box is aligned with the sidebar</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
<div class="column">
<p><img src="test.jpg" class="top pull-1 left" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p>
<p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p>
<p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p>
<blockquote>
<p>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p>
</blockquote>
<p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p>
<hr>
<div class="column">
<h5>This is a nested column</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="column">
<h5>This is another nested column</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="sidebar">
<h3>A <span class="alt">Simple</span> Sidebar</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
<p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p>
<p class="quiet">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
<h6>Incremental leading</h6>
<p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p>
<p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
</div>
<h3>You may pick and choose amongst these and many more features, so be bold.</h3>
</div>
<h5>LISTS</h5>
<div class="span-8">
<ul>
<li>Unordered list test</li>
<li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Yet another element in the list</li>
<li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
<ol>
<li>Ordered list test</li>
<li>Another list element</li>
<li>Yet another element in the list</li>
</ol>
</div>
<div class="span-8">
<ol>
<li>Ordered list</li>
<li>Here's a nested unordered list
<ul>
<li>Nested Unordered list</li>
<li>Nested ordered list
<ol>
<li>The first</li>
<li>And the second</li>
</ol>
</li>
</ul>
</li>
<li>Ordered List item</li>
<li>Nested Ordered list
<ol>
<li>Some point</li>
<li>Nested Unordered list
<ul>
<li>The first</li>
<li>And the second</li>
</ul>
</li>
</ol>
</li>
</ol>
</div>
<div class="span-8 last">
<dl>
<dt>definition list dt</dt>
<dd>definition list dd</dd>
<dt>definition list dt</dt>
<dd>definition list dd</dd>
<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd>
<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd>
</dl>
</div>
<hr>
<h5>HEADINGS</h5>
<div class="span-8">
<h1>H1: Lorem ipsum dolor sit amet</h1>
<h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2>
<h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<h4>H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis</h4>
<h5>H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h5>
<h6>H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</h6>
</div>
<div class="span-8">
<h1>Heading 1</h1><hr>
<h2>Heading 2</h2><hr>
<h3>Heading 3</h3><hr>
<h4>Heading 4</h4><hr>
<h5>Heading 5</h5><hr>
<h6>Heading 6</h6>
</div>
<div class="span-8 last">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<hr>
<h5>MISC ELEMENTS</h5>
<div class="span-8">
<p>
<strong>&lt;strong&gt;</strong><br>
<del>&lt;del&gt; deleted</del><br>
<dfn>&lt;dfn&gt; dfn</dfn><br>
<em>&lt;em&gt; emphasis</em>
</p>
<p>
<a>&lt;a&gt; anchor</a><br>
<a href="http://www.google.com">&lt;a&gt; a + href</a>
</p>
<p>
<abbr title="extended abbr text should show when mouse over">&lt;abbr&gt; abbr - extended text when mouseover.</abbr><br>
<acronym title="extended acronym text should show when mouse over">&lt;acronym&gt; acronym - extended text when mouseover.</acronym>
</p>
<address>
&lt;address&gt;<br>
Donald Duck<br>
Box 555<br>
Disneyland
</address>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.</p>
</div>
<div class="span-8">
<table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0">
<caption><em>A standard test table with a caption, tr, td elements</em></caption>
<tr>
<th class="span-4">Table Header One</th>
<th class="span-4 last">Table Header Two</th>
</tr>
<tr>
<td>TD One</td>
<td>TD Two</td>
</tr>
<tr>
<td colspan="2">TD colspan 2</td>
</tr>
</table>
<table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0">
<caption><em>A test table with a thead, tfoot, and tbody elements</em></caption>
<thead>
<tr>
<th class="span-4">Table Header One</th>
<th class="span-4 last">Table Header Two</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">tfoot footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>TD One</td>
<td>TD Two</td>
</tr>
<tr>
<td>TD One</td>
<td>TD Two</td>
</tr>
</tbody>
<tbody>
<tr>
<td>TD One</td>
<td>TD Two</td>
</tr>
<tr>
<td>TD One</td>
<td>TD Two</td>
</tr>
</tbody>
</table>
</div>
<div class="span-8 last">
<pre>&lt;pre&gt;
pre space1
pre space1
pre space2
pre space2
pre tab
pre tab</pre>
<code>&lt;code&gt;
Not indented
indent1
indent1
indent2
indent3</code>
<tt>&lt;tt&gt;
This tt text should be monospaced
and
wrap as if
one line of text
even though the code has newlines, spaces, and tabs.
It should be the same size as &lt;p&gt; text.
</tt>
</div>
<div class="span-12"><a name="forms"></a>
<form id="dummy" action="" method="post">
<fieldset>
<legend>Simple sample form</legend>
<p>
<label for="dummy0">Text input (title)</label><br>
<input type="text" class="title" name="dummy0" id="dummy0" value="Field with class .title">
</p>
<p>
<label for="dummy1">Another field</label><br>
<input type="text" class="text" id="dummy1" name="dummy1" value="Field with class .text">
</p>
<p>
<label for="dummy2">Textarea</label><br>
<textarea name="dummy2" id="dummy2" rows="5" cols="20"></textarea>
</p>
<p>
<label for="dummy3">A password field</label><br>
<input type="password" class="text" id="dummy3" name="dummy3" value="Password field with class .text">
</p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</fieldset>
</form>
</div>
<div class="span-12 last">
<div class="error">
This is a &lt;div&gt; with the class <strong>.error</strong>. <a href="#">Link</a>.
</div>
<div class="notice">
This is a &lt;div&gt; with the class <strong>.notice</strong>. <a href="#">Link</a>.
</div>
<div class="info">
This is a &lt;div&gt; with the class <strong>.info</strong>. <a href="#">Link</a>.
</div>
<div class="success">
This is a &lt;div&gt; with the class <strong>.success</strong>. <a href="#">Link</a>.
</div>
<fieldset>
<legend>Select, checkboxes, lists</legend>
<p>
<label for="dummy3">Select field</label><br>
<select id="dummy3" name="dummy3">
<option value="1">Ottawa</option>
<option value="2">Calgary</option>
<option value="3">Moosejaw</option>
</select>
</p>
<p>
<label for="dummy4">Select with groups</label><br>
<select id="dummy4" name="dummy4">
<option>Favorite pet</option>
<optgroup label="mammals">
<option>dog</option>
<option>cat</option>
<option>rabbit</option>
<option>horse</option>
</optgroup>
<optgroup label="reptiles">
<option>iguana</option>
<option>snake</option>
</optgroup>
</select>
</p>
<p><label>Radio buttons</label><br>
<input type="radio" name="example"> Radio one<br>
<input type="radio" name="example"> Radio two<br>
<input type="radio" name="example"> Radio three<br>
</p>
<p><label>Checkboxes</label><br>
<input type="checkbox"> Check one<br>
<input type="checkbox"> Check two<br>
<input type="checkbox"> Check three<br>
</p>
</fieldset>
</div>
<div class="span-24 last">
<fieldset>
<legend>Alignment</legend>
<p>
<label for="dummy5">Select field</label>
<select id="dummy5" name="dummy5">
<option value="1">Ottawa</option>
<option value="2">Calgary</option>
<option value="3">Moosejaw</option>
</select>
</p>
<p>
<label for="dummy6">Text input (title)</label>
<input type="text" class="title" name="dummy6" id="dummy6" value="Field with class .title">
</p>
<p>
<label for="dummy7">Select field</label>
<select id="dummy7" name="dummy7">
<option value="1">Ottawa</option>
<option value="2">Calgary</option>
<option value="3">Moosejaw</option>
</select>
<label for="dummy8">Another field</label>
<input type="text" class="text" id="dummy8" name="dummy8" value="Field with class .text">
</p>
</fieldset>
</div>
<div class="span-24 last">
<form action="" method="post" class="inline">
<fieldset>
<legend>A form with class "inline"</legend>
<div class="span-3">
<label for="a">Label A:</label>
<select id="a" name="a" >
<option value="0">All</option>
</select>
</div>
<div class="span-2">
some text
</div>
<div class="span-3">
<input type="checkbox" id="o" name="o" value="true" checked="checked" class="checkbox">checkbox one
</div>
<div class="span-3">
<label for="b">Label B:</label>
<select id="b" name="b" >
<option value="0">All</option>
</select>
</div>
<div class="span-2">
<a href="">A Hyperlink</a>
</div>
<div class="span-8">
<input type="text" class="text" id="q" name="q" value="Field with class .text">
</div>
<div class="span-2 last">
<input type="submit" value="submit" class="button">
</div>
</fieldset>
</form>
</div>
</body>
</html>

1
sample/sample.less Normal file
View File

@ -0,0 +1 @@
@import "../smalkil.less";

2
smalkil.less
View File

@ -1,2 +1,4 @@
@import 'normalize';
@import 'colors';
@import 'elements';
@import 'layout';