Skip to content

Commit

Permalink
v.1.4 additions
Browse files Browse the repository at this point in the history
  • Loading branch information
@csswizardry
csswizardry committed May 2, 2011
1 parent e3d392f commit d126fd6
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 12 deletions.
3 changes: 2 additions & 1 deletion changelog.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
1.2 Grids turned on in debug mode. Added thanks to @VictorPimentel
Added inuit.css to github at v1.2
1.2.1 @charset rule moved to top of file, cursor:pointer; added to <label>, 960.gs attribution added, forced-scrollbar method changed.
1.3 Print styles!
1.3 Print styles!
1.4 12 column grid system and a bit of housekeeping.
140 changes: 129 additions & 11 deletions css/inuit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ Author: Harry Roberts
Twitter: @inuitcss
Author URL: csswizardry.com
Project URL: inuitcss.com
Version: 1.3
Version: 1.4
Codename: Eskimo
Date: 27 April 2011
Date: 2 May 2011
Copyright 2011 Harry Roberts
Expand Down Expand Up @@ -92,17 +92,15 @@ html{
font-family:Calibri, "Helvetica Neue", Arial, sans-serif; /* Swap these two lines around to switch between serif and sans */
font-family:Cambria, Georgia, "Times New Roman", serif; /* Swap these two lines around to switch between serif and sans */
line-height:1.5;
background:#fff;
background:url(../img/css/baseline.gif) 0 4px #fff; /* Swap these two lines around to turn baseline on/off */
background:url(../img/css/baseline.gif) 0 4px #fff;
color:#333;
}
body{
width:940px;
min-height:100%;
padding:10px;
margin:0 auto;
background:none; /* Swap these two lines around to turn grid on/off */
background:url(../img/css/grid.png) top center repeat-y; /* Swap these two lines around to turn grid on/off */
background:url(../img/css/grid.png) top center repeat-y;
}


Expand All @@ -121,7 +119,8 @@ We also alow you to use grid items as stand alone columns or in a series of colu
overflow:hidden;
clear:both;
}
ul.grids{
ul.grids,
.cols-12 ul.grids{
/* So we can make grids out of lists */
margin:0 0 0 -20px;
list-style:none;
Expand All @@ -133,8 +132,15 @@ ul.grids{
.grids .grid{
margin:0 0 0 20px;
}

/*
Based on 960.gs by @nathansmith
Grid sizes based on 960.gs by @nathansmith
For the sake of file-size and load-time please delete all CSS pertaining to the grid system you aren’t using.
The ability to use one of two different grid systems from the same file means there is a lot of code needed to alter intricate styles--look out for lists!
*/

/*
16 column grid system -- default
*/
.grid-1 { width:40px; }
.grid-2 { width:100px; }
Expand All @@ -157,6 +163,39 @@ Based on 960.gs by @nathansmith
.grid-16 { width:940px; margin:0; }


/*
12 column grid system -- add ‘class="cols-12"’ to the html element to invoke this system.
*/

/*
12-col version
*/
.cols-12 body{
background:url(../img/css/12-grid.png) top center repeat-y;
}

.cols-12 .grid-1 { width:60px; }
.cols-12 .grid-2 { width:140px; }
.cols-12 .grid-3 { width:220px; }
.cols-12 .grid-4 { width:300px; }

.cols-12 .grid-5 { width:380px; }
.cols-12 .grid-6 { width:460px; }
.cols-12 .grid-7 { width:540px; }
.cols-12 .grid-8 { width:620px; }

.cols-12 .grid-9 { width:700px; }
.cols-12 .grid-10 { width:780px; }
.cols-12 .grid-11 { width:860px; }

/* Take care of grids 12-16 to cater for a switch from one system to the other. */
.cols-12 .grid-12,
.cols-12 .grid-13,
.cols-12 .grid-14,
.cols-12 .grid-15,
.cols-12 .grid-16 { width:940px; margin:0; }





Expand Down Expand Up @@ -341,6 +380,15 @@ I personally love this next one. Create a list of keywords by adding a single cl
content:".";
}

/*
Lists in the 12 col version
*/
.cols-12 ul,
.cols-12 ol,
.cols-12 dd{
margin-left:80px;
}

/*--- QUOTES ---*/
blockquote{
text-indent:-0.4em; /* Hang that punctuation */
Expand Down Expand Up @@ -452,6 +500,10 @@ textarea{
list-style:none;
margin:0 0 1.5em 0;
}
.cols-12 .check-list{
/* Change to suit 12 col version */
margin-left:0;
}
.check-list li{
width:25%;
float:left;
Expand Down Expand Up @@ -550,6 +602,10 @@ ul.message{
list-style:decimal outside; /* It’s also handy to number them however they might not necessarily be in a certain order, that’s why we spoof it by putting numbers on an unordered list */
padding:10px 10px 10px 56px;
}
.cols-12 ul.message{
/* Change to suit 12 col version */
margin-left:0;
}
.error{
border-color:#fb5766;
background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
Expand Down Expand Up @@ -626,6 +682,7 @@ Turn the grids back on. Idea given by @VictorPimentel

.debug { background:url(../img/css/baseline.gif) 0 4px #fff!important; }
.debug body { background:url(../img/css/grid.png) top center repeat-y!important; }
.cols-12.debug body { background:url(../img/css/12-grid.png) top center repeat-y!important; }

/*
Red border == something is wrong
Expand Down Expand Up @@ -701,18 +758,33 @@ CSS for tablets and narrower devices
\*------------------------------------*/
body{
width:700px;
background:none; /* Swap these two lines around to turn grid on/off */
background:url(../img/css/grid-720.png) top center repeat-y; /* Swap these two lines around to turn grid on/off */
background:url(../img/css/grid-720.png) top center repeat-y;
}
/*
12-col version
*/
.cols-12 body { background:url(../img/css/12-grid-720.png) top center repeat-y; }

/*
Debug version
*/
.debug body { background:url(../img/css/grid-720.png) top center repeat-y!important; }

/*
12-col AND debug version
*/
.debug.cols-12 body { background:url(../img/css/12-grid-720.png) top center repeat-y!important; }





/*------------------------------------*\
GRIDS
\*------------------------------------*/
/*
16 cols
*/
.grid-1 { width:25px; }
.grid-2 { width:70px; }
.grid-3 { width:115px; }
Expand All @@ -733,6 +805,30 @@ body{
.grid-15 { width:655px; }
.grid-16 { width:700px; }

/*
12 cols
*/
.cols-12 .grid-1 { width:40px; }
.cols-12 .grid-2 { width:100px; }
.cols-12 .grid-3 { width:160px; }
.cols-12 .grid-4 { width:220px; }

.cols-12 .grid-5 { width:280px; }
.cols-12 .grid-6 { width:340px; }
.cols-12 .grid-7 { width:400px; }
.cols-12 .grid-8 { width:460px; }

.cols-12 .grid-9 { width:520px; }
.cols-12 .grid-10 { width:580px; }
.cols-12 .grid-11 { width:640px; }

/* Take care of grids 12-16 to cater for a switch from one system to the other */
.cols-12 .grid-12,
.cols-12 .grid-13,
.cols-12 .grid-14,
.cols-12 .grid-15,
.cols-12 .grid-16 { width:700px; }




Expand All @@ -755,6 +851,15 @@ ol ul{
dd{
margin-left:45px;
}

/*
Lists in the 12 col version
*/
.cols-12 ul,
.cols-12 ol,
.cols-12 dd{
margin-left:60px;
}
}
/*--- END NARROW ---*/

Expand Down Expand Up @@ -783,7 +888,11 @@ body{
background:#fff;
}
.debug,
.debug body{
.debug body,
.cols-12,
.cols-12 body,
.debug.cols-12,
.debug.cols-12 body{
background:#fff!important;
}
html{
Expand Down Expand Up @@ -833,6 +942,15 @@ dd{
margin-left:25px;
}

/*
Override 12 col settings
*/
.cols-12 ul,
.cols-12 ul,
.cols-12 dd{
margin-left:25px;
}




Expand Down
Binary file added img/css/12-grid-720.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/css/12-grid.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d126fd6

Please sign in to comment.