Husk

A CSS framework for designers

12-Column Grid

This browser does not support Husk. Sorry!
Click here for more information
We can't tell if this browser supports Husk. Sorry!
Click here for more information

Husk works on the principle of a 12-column grid *. This means that cells in a row will be sized in units of twelfths of their parent. This inherently lets you evenly split a page into 12, 6, 4, 3, 2, or 1 column(s), or any combination of mixed sizes.

To create a Husk row, you need only give an element the class row and its children sizing classes (we'll get to that soon). By default, Husk rows and their cells have .5em margins, but these can be removed by adding the flush class to the row.

Constant-sized cells

Let's start simple. You can set any item to a certain width by using all-#, but replacing the # with the number of columns you want it to span.

all-12
all-6
all-6
all-4
all-4
all-4
all-3
all-3
all-3
all-3
all-2
all-2
all-2
all-2
all-2
all-2
all-1
all-1
all-1
all-1
all-1
all-1
all-1
all-1
all-1
all-1
all-1
all-1
<SECTION CLASS="row">
	<DIV CLASS="all-12"><CODE>all<B>12</B><CODE></DIV>

	<DIV CLASS="all-6"><CODE>all<B>6</B><CODE></DIV>
	<DIV CLASS="all-6"><CODE>all<B>6</B><CODE></DIV>

	...

</SECTION>

Responsive-sizing cells

small-12 medium-6 large-2 huge-1
tiny-12 small-6 medium-6 large-2 huge-1
tiny-12 small-6 medium-3 large-2 huge-1
small-12 medium-3 large-2 huge-1
tiny-12 small-6 medium-3 large-2 huge-1
tiny-12 small-6 medium-3 large-2 huge-1
small-12 medium-3 large-4 huge-1
tiny-12 small-6 medium-3 large-4 huge-1
tiny-12 small-6 medium-3 large-4 huge-1
small-12 medium-3 large-4 huge-1
tiny-12 small-6 medium-6 large-4 huge-1
tiny-12 small-6 medium-6 large-4 huge-1
<SECTION CLASS="row">
		<DIV CLASS="        small-12 medium-6 large-2 huge-1"> ... </DIV>
		<DIV CLASS="tiny-12 small-6  medium-6 large-2 huge-1"> ... </DIV>
		<DIV CLASS="tiny-12 small-6  medium-3 large-2 huge-1"> ... </DIV>
		<DIV CLASS="        small-12 medium-3 large-2 huge-1"> ... </DIV>
		
		...
		
</SECTION>

Offset cells

<SECTION CLASS="row">
	
	...
	
	<DIV CLASS="all-1 "></DIV> <DIV CLASS="all-4 offset-all-3"></DIV> <DIV CLASS="all-1 offset-all-3"></DIV>
	<DIV CLASS="all-1 "></DIV> <DIV CLASS="all-1 offset-all-1"></DIV> <DIV CLASS="all-1 offset-all-1"></DIV> <DIV CLASS="all-1 offset-all-2"></DIV> <DIV CLASS="all-1 offset-all-1"></DIV> <DIV CLASS="all-1 offset-all-1"></DIV>
	
	...
	
</SECTION>

Nested rows

You can
nest any cells
within any other cells or rows, without any bulky
surrounding elements
<SECTION CLASS="row">
	<DIV CLASS="all-4 small-12   row">
		<DIV CLASS="all-4">You can</DIV>
		<DIV CLASS="all-8">nest any cells</DIV>
	</DIV>
	<DIV CLASS="all-8 small-12   row">
		<DIV CLASS="all-8">within any other cells or rows, without any bulky</DIV>
		<DIV CLASS="all-4">surrounding elements</DIV>
	</DIV>
</SECTION>

Mario stress test

Hat
Hat
Hair
Face
Eye
Forehead
Hair
Ear
Sideburn
Face
Eye
Nose
Hair
Ear
Sideburn
Face
Stache
Nose
Hair
Face
Stache
Jaw
Shirt
Overalls
Shirt
Shirt
Overalls
Shirt
Overalls
Shirt
Shirt
Overalls
Shirt
Hand
Shirt
Overalls
Button
Overalls
Button
Overalls
Shirt
Hand
Hand
Overalls
Hand
Hand
Overalls
Hand
Overalls
Overalls
Boot
Boot
Boot
Boot