442 lines
18 KiB
HTML
442 lines
18 KiB
HTML
<!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="left" alt="test">
|
|
'It's too ridiculous!' cried Alice, losing all her patience this time. 'You ought to have a wooden horse on wheels, that you ought!'</p>
|
|
<p>'Does that kind go smoothly?' the Knight asked in a tone of great interest, clasping his arms round the horse's neck as he spoke, just in time to save himself from tumbling off again.</p>
|
|
<p>'Much more smoothly than a live horse,' Alice said, with a little scream of laughter, in spite of all she could do to prevent it.</p>
|
|
<p>'I'll get one,' the Knight said thoughtfully to himself. 'One or two—several.'</p>
|
|
<p>There was a short silence after this, and then the Knight went on again. 'I'm a great hand at inventing things. Now, I daresay you noticed, that last time you picked me up, that I was looking rather thoughtful?'</p>
|
|
<p>'You WERE a little grave,' said Alice.</p>
|
|
<p>'Well, just then I was inventing a new way of getting over a gate—would you like to hear it?'</p>
|
|
<p>'Very much indeed,' Alice said politely.</p>
|
|
<p>'I'll tell you how I came to think of it,' said the Knight. 'You see, I said to myself, "The only difficulty is with the feet: the HEAD is high enough already." Now, first I put my head on the top of the gate—then I stand on my head—then the feet are high enough, you see—then I'm over, you see.'</p>
|
|
<p>'Yes, I suppose you'd be over when that was done,' Alice said thoughtfully: 'but don't you think it would be rather hard?'</p>
|
|
<p>'I haven't tried it yet,' the Knight said, gravely: 'so I can't tell for certain—but I'm afraid it WOULD be a little hard.'</p>
|
|
<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 class="story">
|
|
<div class="poem">
|
|
<div class="verse">
|
|
The merry-go-round goes 'round and 'round,<br>
|
|
The children laughed and laughed and laughed,<br>
|
|
So many were going 'round and 'round,<br>
|
|
That the merry-go-round collapsed.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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><strong></strong><br>
|
|
<del><del> deleted</del><br>
|
|
<dfn><dfn> dfn</dfn><br>
|
|
<em><em> emphasis</em>
|
|
</p>
|
|
<p>
|
|
<a><a> anchor</a><br>
|
|
<a href="http://www.google.com"><a> a + href</a>
|
|
</p>
|
|
<p>
|
|
<abbr title="extended abbr text should show when mouse over"><abbr> abbr - extended text when mouseover.</abbr><br>
|
|
<acronym title="extended acronym text should show when mouse over"><acronym> acronym - extended text when mouseover.</acronym>
|
|
</p>
|
|
<address>
|
|
<address><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><pre>
|
|
pre space1
|
|
pre space1
|
|
pre space2
|
|
pre space2
|
|
pre tab
|
|
pre tab</pre>
|
|
|
|
<code><code>
|
|
Not indented
|
|
indent1
|
|
indent1
|
|
indent2
|
|
indent3</code>
|
|
|
|
<tt><tt>
|
|
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 <p> 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 <div> with the class <strong>.error</strong>. <a href="#">Link</a>.
|
|
</div>
|
|
<div class="notice">
|
|
This is a <div> with the class <strong>.notice</strong>. <a href="#">Link</a>.
|
|
</div>
|
|
<div class="info">
|
|
This is a <div> with the class <strong>.info</strong>. <a href="#">Link</a>.
|
|
</div>
|
|
<div class="success">
|
|
This is a <div> 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>
|