Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add class "offset" and sample file.

  • Loading branch information...
commit b24160c2f5432250454a2b75732b76d3663e1cb7 1 parent 333342e
@keiso authored
Showing with 276 additions and 20 deletions.
  1. +100 −20 css/grid.css
  2. +135 −0 examples/grids_with_offset.html
  3. +41 −0 lib/grid.less
View
120 css/grid.css
@@ -1,20 +1,100 @@
-@charset "UTF-8";
-body{color:#000000;background-color:#FFFFFF;}
-.container{width:980px;margin-left:auto;margin-right:auto;padding-left:20px;zoom:1;}
-.span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{display:inline;float:left;position:relative;margin-right:20px;}
-.row{overflow:hidden;}
-*:first-child+html .row{overflow:hidden;}
-* html .row{height:1%;}
-.span1{width:60px;}
-.span2{width:140px;}
-.span3{width:220px;}
-.span4{width:300px;}
-.span5{width:380px;}
-.span6{width:460px;}
-.span7{width:540px;}
-.span8{width:620px;}
-.span9{width:700px;}
-.span10{width:780px;}
-.span11{width:860px;}
-.span12{width:940px;margin-right:0;}
-.last{margin-right:0;}
+@charset "UTF-8";
+body {
+ color:#000;
+ background-color:#fff
+}
+.container {
+ width:980px;
+ margin-left:auto;
+ margin-right:auto;
+ padding-left:20px;
+ zoom:1
+}
+.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
+ display:inline;
+ float:left;
+ position:relative;
+ margin-right:20px
+}
+.row {
+ overflow:hidden
+}
+*:first-child+html .row {
+ overflow:hidden
+}
+* html .row {
+ height:1%
+}
+.span1 {
+ width:60px
+}
+.span2 {
+ width:140px
+}
+.span3 {
+ width:220px
+}
+.span4 {
+ width:300px
+}
+.span5 {
+ width:380px
+}
+.span6 {
+ width:460px
+}
+.span7 {
+ width:540px
+}
+.span8 {
+ width:620px
+}
+.span9 {
+ width:700px
+}
+.span10 {
+ width:780px
+}
+.span11 {
+ width:860px
+}
+.span12 {
+ width:940px;
+ margin-right:0
+}
+.last {
+ margin-right:0
+}
+.offset1 {
+ margin-left:80px
+}
+.offset2 {
+ margin-left:160px
+}
+.offset3 {
+ margin-left:240px
+}
+.offset4 {
+ margin-left:320px
+}
+.offset5 {
+ margin-left:400px
+}
+.offset6 {
+ margin-left:480px
+}
+.offset7 {
+ margin-left:560px
+}
+.offset8 {
+ margin-left:640px
+}
+.offset9 {
+ margin-left:720px
+}
+.offset10 {
+ margin-left:800px
+}
+.offset11 {
+ margin-left:880px
+}
View
135 examples/grids_with_offset.html
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Grids / k3.grid.system</title>
+<link href="../css/reset.css" rel="stylesheet" type="text/css">
+<link href="../css/grid.css" rel="stylesheet" type="text/css">
+<link href="../css/color.css" rel="stylesheet" type="text/css">
+<link href="./style.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+<div class="container">
+ <div class="row">
+ <div class="span12">
+ <hgroup>
+ <h1>k3.grid.system<small>Grids.</small></h1>
+</hgroup>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset1 span1">
+ <p>class offset1 span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1">
+ <p>class span1</p>
+ </div>
+ <div class="span1 last">
+ <p>class span1 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset2 span2">
+ <p>class offset2 span2 </p>
+ </div>
+ <div class="span2">
+ <p>class span2 </p>
+ </div>
+ <div class="span2">
+ <p>class span2 </p>
+ </div>
+ <div class="span2">
+ <p>class span2 </p>
+ </div>
+ <div class="span2 last">
+ <p>class span2 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset3 span3">
+ <p>class offset3 span3</p>
+ </div>
+ <div class="span3">
+ <p>class span3 </p>
+ </div>
+ <div class="span3 last">
+ <p>class span3 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset4 span4">
+ <p>class offset4 span4 </p>
+ </div>
+ <div class="span4 last">
+ <p>class span4 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset5 span7 last">
+ <p>class offset5 span7 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset6 span6 last">
+ <p>class offset6 span6 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset7 span5 last">
+ <p>class offset7 span5 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset8 span4 last">
+ <p>class offset8 span4 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset9 span3 last">
+ <p>class offset9 span3 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset10 span2 last">
+ <p>class offset10 span2 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="offset11 span1 last">
+ <p>class offset11 span1 last</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span12">
+ <p>class span12</p>
+ <p>(c)2011,2012 keiso watanabe</p>
+ </div>
+ </div>
+</div>
+</body>
+</html>
View
41 lib/grid.less
@@ -86,3 +86,44 @@ padding-left:20px;
.last {
margin-right:0;
}
+
+.offsets(@columnSpan: 1) {
+ margin-left:(@columnWidth + @gutterWidth)* @columnSpan - @gutterWidth+20;
+}
+
+
+.offset1 {
+ .offsets(1);
+}
+
+.offset2 {
+ .offsets(2);
+}
+.offset3 {
+ .offsets(3);
+}
+.offset4 {
+ .offsets(4);
+}
+.offset5 {
+ .offsets(5);
+}
+.offset6 {
+ .offsets(6);
+}
+.offset7 {
+ .offsets(7);
+}
+.offset8 {
+ .offsets(8);
+}
+.offset9 {
+ .offsets(9);
+}
+.offset10 {
+ .offsets(10);
+}
+.offset11 {
+ .offsets(11);
+}
+
Please sign in to comment.
Something went wrong with that request. Please try again.