273 lines
6.7 KiB
HTML
273 lines
6.7 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="container_page">
|
|
<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="#lists">Lists</a></li>
|
|
|
|
<li><a href="#tables">Tables</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h5><a name="text">TEXT</a></h5>
|
|
|
|
<div class="side">
|
|
<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>
|
|
|
|
<h5>Smaller heading</h5>
|
|
|
|
<p>This heading was small, wasn't it? Well, that's because there's not much text here.</p>
|
|
|
|
<h6>Small heading</h6>
|
|
|
|
<p>This was the smallest heading possible.</p>
|
|
|
|
<p>And now for a poem. Ahem.</p>
|
|
|
|
<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>
|
|
|
|
<p>Please send your correspondence to:</p>
|
|
<address>
|
|
S. Holmes<br>
|
|
221B Baker St.<br>
|
|
London, England
|
|
</address>
|
|
|
|
<pre>pre keeps
|
|
ur spaces</pre>
|
|
|
|
<code>code does
|
|
not</code> <br>
|
|
|
|
<tt>tt is just a
|
|
usual paragraph with monospaced font</tt>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="story">
|
|
<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="container_nested">
|
|
<div class="additional">
|
|
<h5>This is a nested column from TV Tropes</h5>
|
|
|
|
<p>A great many things happen on television that have happened at least once to someone in the world.</p>
|
|
<blockquote>Does that kind go smoothly?</blockquote>
|
|
<p>Still, nobody cares. And that's pretty much how television works. </p>
|
|
</div>
|
|
|
|
<div class="additional">
|
|
<h5>This is another nested column (also Tropes)</h5>
|
|
|
|
<p>Don't say you've never whacked your TV or computer when it failed. A good whack can actually be a useful temporary fix. Also used as a last resort fix (as in, nothing else works and the only option is losing the data) to get a non-solid-state hard drive to work long enough to retrieve data from it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h3 class="center">And now for something completely different.</h3>
|
|
|
|
<h5><a name="lists">LISTS</a></h5>
|
|
|
|
<div class="list">
|
|
|
|
<p>Don't forget to buy:</p>
|
|
<ul>
|
|
<li><del>GPS</del></li>
|
|
|
|
<li>Rifle</li>
|
|
|
|
<ul>
|
|
|
|
<li>Rifle scope</li>
|
|
|
|
<li>Ammo</li>
|
|
|
|
</ul>
|
|
|
|
<li>Santa costume</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="list">
|
|
|
|
<p>Still, the order was in place, and there was nothing I could do to change it:</p>
|
|
|
|
<ol>
|
|
<li>Shirt</li>
|
|
|
|
<li>Trousers</li>
|
|
|
|
<li>Socks</li>
|
|
|
|
<li>Boots</li>
|
|
|
|
<ol>
|
|
<li>Left boot</li>
|
|
<li>Right boot</li>
|
|
</ol>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<dl>
|
|
<dt>definition, n.</dt>
|
|
|
|
<dd>A definition is a statement that explains the meaning.</dd>
|
|
|
|
<dt>gmina, n.</dt>
|
|
|
|
<dd>The gmina is the principal unit of administrative division of Poland at its lowest uniform level.
|
|
It is often translated as "commune" or "municipality." <em>(Wikipedia)</em></dd>
|
|
|
|
<dt>shipwreck, n.</dt>
|
|
<dd>sunken ship</dd>
|
|
<dd>a fictional character in the G.I. Joe universe</dd>
|
|
|
|
</dl>
|
|
</div>
|
|
|
|
<h5><a name="tables">TABLES</a></h5>
|
|
|
|
<div class="container_table">
|
|
<table summary="Summary text">
|
|
<caption> A simple table </caption>
|
|
|
|
<tr>
|
|
<th>Round</th>
|
|
|
|
<th>Flat</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Sphere</td>
|
|
|
|
<td>Square</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">Circle</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="container_table">
|
|
<table>
|
|
<caption>Table with <code>THEAD,</code> <code>TFOOT</code> and <code>TBODY</code></caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Cool</th>
|
|
|
|
<th>Hot</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="2">Superman</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Arctic Circle</td>
|
|
|
|
<td>Havana</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Chuck Norris</td>
|
|
|
|
<td>Emily Blunt</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
<h3 class="center">That's all folks!</h3>
|
|
</div>
|
|
</body>
|
|
</html>
|