I've changed my mind about grids.
This commit is contained in:
parent
268df79d88
commit
e42cb969c0
63
layout.less
63
layout.less
|
@ -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); }
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue