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() {
|
.clearfix() {
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
|
|
@ -58,41 +60,30 @@ table {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid (@cols: 16) {
|
.grid () {
|
||||||
@gutter: 1.5%;//1.5 * @basesize;
|
|
||||||
.clearfix();
|
.clearfix();
|
||||||
.col(@width: 1) {
|
margin-left: -@gutter;
|
||||||
//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;
|
|
||||||
}
|
}
|
||||||
|
.col(@width: 1) {
|
||||||
|
float: left;
|
||||||
|
padding-left: @gutter;
|
||||||
|
width: percentage(@width / @columns) - @gutter;
|
||||||
|
}
|
||||||
|
|
||||||
// classes for use in plain CSS
|
// classes for use in plain CSS
|
||||||
.grid16 { .grid(16); }
|
.column { .col(); }
|
||||||
.grid12 { .grid(12); }
|
.column2 { .col(2); }
|
||||||
.grid9 { .grid(9); }
|
.column3 { .col(3); }
|
||||||
.grid8 { .grid(8); }
|
.column4 { .col(4); }
|
||||||
.grid6 { .grid(6); }
|
.column5 { .col(5); }
|
||||||
.grid5 { .grid(5); }
|
.column6 { .col(6); }
|
||||||
.grid4 { .grid(4); }
|
.column7 { .col(7); }
|
||||||
.grid3 { .grid(3); }
|
.column8 { .col(8); }
|
||||||
.grid2 { .grid(2); }
|
.column9 { .col(9); }
|
||||||
.grid1 { .grid(1); }
|
.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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container_page">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>Demonstration page</h1>
|
<h1>Demonstration page</h1>
|
||||||
|
|
||||||
|
|
@ -31,8 +32,7 @@
|
||||||
|
|
||||||
<h5><a name="text">TEXT</a></h5>
|
<h5><a name="text">TEXT</a></h5>
|
||||||
|
|
||||||
<div class="container_page">
|
<div class="side">
|
||||||
<div class="column2">
|
|
||||||
<h4>How it's done</h4>
|
<h4>How it's done</h4>
|
||||||
|
|
||||||
<p>The page has its own <acronym title=
|
<p>The page has its own <acronym title=
|
||||||
|
|
@ -82,7 +82,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column4">
|
<div class="story">
|
||||||
<p><img src="test.jpg" class="left" alt="test"> 'It's too
|
<p><img src="test.jpg" class="left" alt="test"> 'It's too
|
||||||
ridiculous!' cried Alice, losing all her patience this time.
|
ridiculous!' cried Alice, losing all her patience this time.
|
||||||
'You ought to have a wooden horse on wheels, that you
|
'You ought to have a wooden horse on wheels, that you
|
||||||
|
|
@ -128,7 +128,7 @@
|
||||||
hard.'</p>
|
hard.'</p>
|
||||||
|
|
||||||
<div class="container_nested">
|
<div class="container_nested">
|
||||||
<div class="column">
|
<div class="additional">
|
||||||
<h5>This is a nested column from TV Tropes</h5>
|
<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>
|
<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>
|
<p>Still, nobody cares. And that's pretty much how television works. </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column">
|
<div class="additional">
|
||||||
<h5>This is another nested column (also Tropes)</h5>
|
<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>
|
<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>
|
<h3 class="center">And now for something completely different.</h3>
|
||||||
|
|
||||||
<h5><a name="lists">LISTS</a></h5>
|
<h5><a name="lists">LISTS</a></h5>
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
|
|
||||||
<p>Don't forget to buy:</p>
|
<p>Don't forget to buy:</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -167,6 +169,10 @@
|
||||||
<li>Santa costume</li>
|
<li>Santa costume</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
|
|
||||||
<p>Still, the order was in place, and there was nothing I could do to change it:</p>
|
<p>Still, the order was in place, and there was nothing I could do to change it:</p>
|
||||||
|
|
||||||
<ol>
|
<ol>
|
||||||
|
|
@ -183,7 +189,9 @@
|
||||||
<li>Right boot</li>
|
<li>Right boot</li>
|
||||||
</ol>
|
</ol>
|
||||||
</ol>
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
<dl>
|
<dl>
|
||||||
<dt>definition, n.</dt>
|
<dt>definition, n.</dt>
|
||||||
|
|
||||||
|
|
@ -199,11 +207,11 @@
|
||||||
<dd>a fictional character in the G.I. Joe universe</dd>
|
<dd>a fictional character in the G.I. Joe universe</dd>
|
||||||
|
|
||||||
</dl>
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h5><a name="tables">TABLES</a></h5>
|
<h5><a name="tables">TABLES</a></h5>
|
||||||
|
|
||||||
<div class="container_page">
|
<div class="container_table">
|
||||||
<div class="column3">
|
|
||||||
<table summary="Summary text">
|
<table summary="Summary text">
|
||||||
<caption> A simple table </caption>
|
<caption> A simple table </caption>
|
||||||
|
|
||||||
|
|
@ -223,8 +231,8 @@
|
||||||
<td colspan="2">Circle</td>
|
<td colspan="2">Circle</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="column3">
|
<div class="container_table">
|
||||||
<table>
|
<table>
|
||||||
<caption>Table with <code>THEAD,</code> <code>TFOOT</code> and <code>TBODY</code></caption>
|
<caption>Table with <code>THEAD,</code> <code>TFOOT</code> and <code>TBODY</code></caption>
|
||||||
|
|
||||||
|
|
@ -257,8 +265,8 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="center">That's all folks!</h3>
|
<h3 class="center">That's all folks!</h3>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
@import "../smalkil.less";
|
@import "../smalkil.less";
|
||||||
|
@columns: 6;
|
||||||
|
|
||||||
.navigation{
|
.navigation{
|
||||||
ul {
|
ul {
|
||||||
|
|
@ -8,18 +9,47 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container_page{
|
.container_page{
|
||||||
.grid(6);
|
.grid();
|
||||||
}
|
}
|
||||||
|
|
||||||
.container_nested {
|
.header,
|
||||||
.grid(2);
|
.navigation,
|
||||||
|
h3 {
|
||||||
|
.col(@columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container_nested .additional {
|
||||||
|
.col(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3.center {
|
h3.center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
table td {
|
|
||||||
text-align: center;
|
.side {
|
||||||
padding: 0.5 * @basesize;
|
.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