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

I've changed my mind about grids.

Browse Source
master
Alexander Yakovlev 11 years ago
parent 268df79d88
commit e42cb969c0
3 changed files with 81 additions and 52 deletions
Show Stats Download Patch File Download Diff File

63
layout.less
Unescape Escape View File

@ -1,4 +1,6 @@
@basesize: 1em;
@basesize: 1em; //base font size
@columns: 16; //number of columns - for grid
@gutter: 1.5%;
.clearfix() {
*zoom: 1;
@ -58,41 +60,30 @@ table {
display: none;
}
.grid (@cols: 16) {
@gutter: 1.5%;//1.5 * @basesize;
.grid () {
.clearfix();
.col(@width: 1) {
//display: block;
float: left;
padding-left: @gutter;
width: percentage(@width / @cols) - @gutter;
}
.column { .col(); }
.column2 { .col(2); }
.column3 { .col(3); }
.column4 { .col(4); }
.column5 { .col(5); }
.column6 { .col(6); }
.column7 { .col(7); }
.column8 { .col(8); }
.column9 { .col(9); }
.column10 { .col(10); }
.column11 { .col(11); }
.column12 { .col(12); }
.column13 { .col(13); }
.column14 { .col(14); }
.column15 { .col(15); }
.column16 { .col(16); }
margin-left: - @gutter;
margin-left: -@gutter;
}
.col(@width: 1) {
float: left;
padding-left: @gutter;
width: percentage(@width / @columns) - @gutter;
}
// classes for use in plain CSS
.grid16 { .grid(16); }
.grid12 { .grid(12); }
.grid9 { .grid(9); }
.grid8 { .grid(8); }
.grid6 { .grid(6); }
.grid5 { .grid(5); }
.grid4 { .grid(4); }
.grid3 { .grid(3); }
.grid2 { .grid(2); }
.grid1 { .grid(1); }
.column { .col(); }
.column2 { .col(2); }
.column3 { .col(3); }
.column4 { .col(4); }
.column5 { .col(5); }
.column6 { .col(6); }
.column7 { .col(7); }
.column8 { .col(8); }
.column9 { .col(9); }
.column10 { .col(10); }
.column11 { .col(11); }
.column12 { .col(12); }
.column13 { .col(13); }
.column14 { .col(14); }
.column15 { .col(15); }
.column16 { .col(16); }

28
sample/index.html
Unescape Escape View File

@ -10,6 +10,7 @@
</head>
<body>
<div class="container_page">
<div class="header">
<h1>Demonstration page</h1>
@ -31,8 +32,7 @@
<h5><a name="text">TEXT</a></h5>
<div class="container_page">
<div class="column2">
<div class="side">
<h4>How it's done</h4>
<p>The page has its own <acronym title=
@ -82,7 +82,7 @@
</div>
<div class="column4">
<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
@ -128,7 +128,7 @@
hard.'</p>
<div class="container_nested">
<div class="column">
<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>
@ -136,7 +136,7 @@
<p>Still, nobody cares. And that's pretty much how television works. </p>
</div>
<div class="column">
<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>
@ -149,6 +149,8 @@
<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>
@ -167,6 +169,10 @@
<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>
@ -183,7 +189,9 @@
<li>Right boot</li>
</ol>
</ol>
</div>
<div class="list">
<dl>
<dt>definition, n.</dt>
@ -199,11 +207,11 @@
<dd>a fictional character in the G.I. Joe universe</dd>
</dl>
</div>
<h5><a name="tables">TABLES</a></h5>
<div class="container_page">
<div class="column3">
<div class="container_table">
<table summary="Summary text">
<caption> A simple table </caption>
@ -223,8 +231,8 @@
<td colspan="2">Circle</td>
</tr>
</table>
</div>
<div class="column3">
</div>
<div class="container_table">
<table>
<caption>Table with <code>THEAD,</code> <code>TFOOT</code> and <code>TBODY</code></caption>
@ -257,8 +265,8 @@
</tbody>
</table>
</div>
</div>
<h3 class="center">That's all folks!</h3>
</div>
</body>
</html>

42
sample/sample.less
Unescape Escape View File

@ -1,4 +1,5 @@
@import "../smalkil.less";
@columns: 6;
.navigation{
ul {
@ -8,18 +9,47 @@
}
.container_page{
.grid(6);
.grid();
}
.container_nested {
.grid(2);
.header,
.navigation,
h3 {
.col(@columns);
}
.container_nested .additional {
.col(3);
}
h3.center {
text-align: center;
}
table td {
text-align: center;
padding: 0.5 * @basesize;
.side {
.col(2);
}
.list {
.col(2);
p {
text-align: left;
text-indent: 0;
}
}
.story{
.col(4);
}
.container_table {
.col(3);
table {
td {
text-align: center;
padding: 0.5 * @basesize;
}
}
}