LESS Responsive grid

README.md

LESS Responsive grid

grid.less

• .columns(span) => .span-1, …, .span-12
• .columns(col, 24) => .col-1, …, .col-24

TODO:

• better "mobile first" offsets

demo.less

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; }

grid.less

// 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 */

index.html

<!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>

style.less

* {
  -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);