.columns(span)
=>.span-1, …, .span-12
.columns(col, 24)
=>.col-1, …, .col-24
- better "mobile first" offsets
body { | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
h1 { | |
font-size: 18px; | |
} | |
[class*="demo"] { | |
text-align: center | |
} | |
.demo-1 { background: #fde; } | |
.demo-2 { background: #dfe; } | |
.demo-3 { background: #def; } | |
// Global Defaults // | |
@mobile-width: 100%; | |
@tablet-width: 720px; | |
@desktop-width: 940px; | |
// Resonsive Design Break Points | |
@mobile-breakpoint: @tablet-width + 19px; | |
@tablet-breakpoint: @tablet-width + 20px; | |
@desktop-breakpoint: @desktop-width + 19px; | |
// Grid generators params | |
@row-margin: 10px; | |
@col-margin: 2%; | |
/* Micro Clearfix */ | |
.clear, | |
.section, | |
.checkbox { | |
&:before, &:after { content: ""; display: table; } | |
&:after { clear: both; } | |
} | |
/* Common Classes */ | |
.left { float: left; } | |
.right { float: right; } | |
.block { display: block; } | |
.inline-block { display: inline-block; } | |
.inline { display: inline; } | |
.visuallyhidden { | |
border: 0; | |
clip: "~rect(0 0 0 0)"; | |
height: 1px; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
width: 1px; | |
left: -9999em; | |
} | |
.visuallyvisible { | |
clip: "~(auto)"; | |
clip: auto; | |
width: auto; | |
height: auto; | |
overflow: visible; | |
left: 0; | |
} | |
/* ========================================================================== | |
/* Grid Layout (Responsive) | |
========================================================================== */ | |
/* Sections & Content Blocks */ | |
.section { position: relative; } | |
.row { margin-bottom: @row-margin; } | |
.center { margin: 0 auto; } | |
.container { | |
max-width: @desktop-width; | |
margin: 0 auto; | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.container-full { | |
max-width: @desktop-width + 20px; | |
margin: 0 auto; | |
} | |
.none, | |
.nodesktop { | |
display: none; | |
} | |
.nocolmargin() { | |
margin-left: 0; | |
} | |
/* Fluid Grid */ | |
.col { | |
margin-left: @col-margin; | |
float: left; | |
&:first-child { | |
.nocolmargin(); | |
} | |
} | |
// Generators | |
// ========================================================================== | |
///* Columns */ | |
.column(@col, @of, @attr: width) { | |
@percents: (((100% - @col-margin * (@of - 1)) / @of) * @col) + @col-margin * (@col - 1); | |
width: @percents; | |
} | |
.__columns(0, @total, @prefix) {} | |
.__columns(@cur, @total, @prefix: span) when (@cur > 0) { | |
.@{prefix}-@{cur} { .column(@cur, @total); } | |
.__columns((@cur - 1), @total, @prefix); | |
} | |
._columns(@prefix: span, @total: 12) { .__columns(@total, @total, @prefix); } | |
///* Offsets */ | |
.offset(@col, @of, @attr: width) { | |
@percents: (((100% - @col-margin * (@of - 1)) / @of) * @col) + @col-margin * (@col - 1); | |
margin-left: @percents; | |
} | |
.__offsets(0, @total, @prefix) {} | |
.__offsets(@cur, @total, @prefix: span) when (@cur > 0) { | |
.@{prefix}-offset-@{cur}, .@{prefix}-offset-@{cur}:first-child { .offset(@cur, @total); } | |
.__offsets((@cur - 1), @total, @prefix); | |
} | |
._offsets(@prefix: span, @total: 12) { | |
.__offsets(@total, @total, @prefix); | |
.@{prefix}-offset-0 { margin-left: @col-margin; } | |
.@{prefix}-offset-0:first-child { margin-left: 0 } | |
} | |
// Base columns | |
// ========================================================================== | |
.columns(@prefix: span, @columns: 12) { | |
._columns(@prefix, @columns); | |
._offsets(@prefix, @columns); | |
.@{prefix}-first { .nocolmargin(); } | |
.@{prefix}-top { margin-top: @row-margin } | |
.@{prefix}-full { | |
.clear(); | |
width: 100%; | |
margin: @row-margin 0 0 0; | |
&:first-child { | |
margin-top: 0; | |
} | |
} | |
.no@{prefix} { .none(); } | |
.show@{prefix} { .block(); } | |
} | |
.columns(span); | |
.grid-8 { | |
._columns(span, 8); | |
} | |
/* ========================================================================== | |
/* -- Tablet Devices (Layout, Modifications, etc) | |
========================================================================== */ | |
@media only screen and (min-width: @tablet-breakpoint) and (max-width: @desktop-breakpoint) { | |
.container { | |
width: @tablet-width; | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.columns(tablet); | |
} /* End Tablet Media Query */ | |
/* ========================================================================== | |
/* -- Mobile Devices (Layout, Modifications, etc) | |
========================================================================== */ | |
@media only screen and (max-width: @mobile-breakpoint) { | |
.columns(mobile); | |
.container { | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
/* Mobile Tables */ | |
table th, | |
table td { | |
padding: 4px; | |
} | |
/* Mobile Forms */ | |
input[type=text], | |
input[type=password], | |
input[type=email], | |
input[type=search], | |
input[type=tel], | |
textarea { | |
width: 94%; | |
padding: 7px 2%; | |
} | |
select { | |
width: 90%; | |
} | |
} /* End Mobile Media Query */ |
<!doctype html> | |
<html lang="en" class="no-js"> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet/less" href="style.less"> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js" type="text/javascript"></script> | |
</head> | |
<body> | |
<h1>span, tablet, mobile</h1> | |
<div class="row section"> | |
<div class="demo-1 col mobile-full tablet-7 span-4"> | |
<h1 class="none showmobile">mobile-full</h1> | |
<h1 class="none showtablet">tablet-7</h1> | |
<h1 class="notablet nomobile">span-4</h1> | |
</div> | |
<div class="demo-2 col mobile-full tablet-3 span-4"> | |
<h1 class="none showmobile">mobile-full</h1> | |
<h1 class="none showtablet">tablet-3</h1> | |
<h1 class="notablet nomobile">span-4</h1> | |
</div> | |
<div class="demo-3 col mobile-full tablet-2 span-4"> | |
<h1 class="none showmobile">mobile-full</h1> | |
<h1 class="none showtablet">tablet-2</h1> | |
<h1 class="notablet nomobile">span-4</h1> | |
</div> | |
</div> | |
<hr> | |
<div class="row section"> | |
<div class="demo-1 col mobile-6 tablet-6 span-3"> | |
<h1 class="none showmobile">mobile-6</h1> | |
<h1 class="none showtablet">tablet-6</h1> | |
<h1 class="notablet nomobile">span-3</h1> | |
</div> | |
<div class="demo-2 col mobile-3 tablet-6 span-3"> | |
<h1 class="none showmobile">mobile-3</h1> | |
<h1 class="none showtablet">tablet-6</h1> | |
<h1 class="notablet nomobile">span-3</h1> | |
</div> | |
<div class="demo-3 col mobile-3 tablet-6 tablet-top tablet-first span-3"> | |
<h1 class="none showmobile">mobile-3</h1> | |
<h1 class="none showtablet">tablet-6 tablet-first tablet-top</h1> | |
<h1 class="notablet nomobile">span-3</h1> | |
</div> | |
<div class="demo-3 col mobile-full tablet-6 tablet-top span-3"> | |
<h1 class="none showmobile">mobile-full</h1> | |
<h1 class="none showtablet">tablet-6 tablet-top</h1> | |
<h1 class="notablet nomobile">span-3</h1> | |
</div> | |
</div> | |
<hr> | |
<h1>Offsets</h1> | |
<div class="row section"> | |
<div class="demo-1 col span-4 span-offset-1 mobile-6 mobile-offset-0"> | |
<h1 class="none showmobile">mobile-6 mobile-offset-0</h1> | |
<h1 class="nomobile">span-3 offset-1</h1> | |
</div> | |
<div class="demo-2 col span-3 span-offset-4 mobile-6 mobile-offset-0"> | |
<h1 class="none showmobile">mobile-6 mobile-offset-0</h1> | |
<h1 class="nomobile">span-3 offset-4</h1> | |
</div> | |
<div class="demo-3 col span-full"> | |
<h1>span-full</h1> | |
</div> | |
<div class="demo-3 col span-full"> | |
<h1>span-full</h1> | |
</div> | |
</div> | |
<hr> | |
<h1>Grid 8</h1> | |
<div class="row section grid-8"> | |
<div class="demo-1 col span-4 tablet-2"> | |
<h1 class="none showmobile">mobile-6</h1> | |
<h1 class="none showtablet">tablet-2</h1> | |
<h1 class="notablet nomobile">span-4</h1> | |
</div> | |
<div class="demo-2 col span-4 tablet-2"> | |
<h1 class="none showmobile">mobile-3</h1> | |
<h1 class="none showtablet">tablet-2</h1> | |
<h1 class="notablet nomobile">span-4</h1> | |
</div> | |
<div class="demo-3 col span-2 span-top span-first tablet-2"> | |
<h1 class="none showmobile">mobile-3</h1> | |
<h1 class="none showtablet">tablet-2 tablet-first tablet-top</h1> | |
<h1 class="notablet nomobile">span-2 span-first span-top</h1> | |
</div> | |
<div class="demo-3 col span-6 span-top tablet-2"> | |
<h1 class="none showmobile">mobile-full</h1> | |
<h1 class="none showtablet">tablet-2 tablet-top</h1> | |
<h1 class="notablet nomobile">span-6 span-top</h1> | |
</div> | |
</div> | |
</body> | |
</html> |
* { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
// @import "normalize.css"; | |
@import "grid.less"; | |
@import "demo.less"; | |
// @import "page.css"; | |
// @media print { @import "print.less"; } | |
// @import "480.less" screen and (min-width: 480px); | |
// @import "600.less" screen and (min-width: 600px); | |
// @import "768.less" screen and (min-width: 768px); | |
// @import "992.less" screen and (min-width: 992px); | |
// @import "1382.less" screen and (min-width: 1382px); |