Husk

A CSS framework for designers

CSS Documentation

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.css

General

Breakpoints

Husk has 5 size breakpoints. The default widths are listed here, but in the future these will be customizable:

  • tiny: 479px or less
    (optional; if missing, small is used)
  • small: 480px – 767px
  • medium: 768px – 1023px
  • large: 1024px – 1439px
  • huge: 1440px or higher
    (optional; if missing, large is used)

Responsive visibility

Husk can hide or show an element based on the current width of the viewport

  • hide-tiny
  • hide-small
  • hide-medium
  • hide-large
  • hide-huge
  • show-tiny
  • show-small
  • show-medium
  • show-large
  • show-huge
<element>
	you are viewing this in the
	<element class="show-tiny hide-small">tiny</element>
	<element class="hide-tiny show-small">small</element>
	<element class="show-medium">medium</element>
	<element class="show-large hide-huge">large</element>
	<element class="hide-large show-huge">huge</element>
	size
</element>

Note that, since tiny and huge are optional, the above example must explicitly specify that the tiny one is hidden when small, the small one is hidden when tiny, the large one is hidden when huge, and the huge one is hidden when large.

12-Column Grid

Let's start with The Big One: Husk's grid system. Husk uses a grid system similar to other CSS frameworks, but with the distinction of being powered by the new CSS3 Flexbox module (See also the W3C Draft). In the future, the number of columns will be customizable.
Husk's 12-column grid will not break when used in conjunction with Flex.css

Creating a grid

A grid must be any HTML element with the row class applied to it.

<element class="row"></element>

Removing default spacing

By default, a grid comes with 0.5em of padding and applies 0.5em of padding to its immediate children. To remove this padding, also apply the class flush. In other words, to make a row with no default padding, use this syntax:

<element class="row flush"></element>

Constant-sized cells

Husk allows you to make any cell of a grid constantly span the same number of columns with the following classes:

  • all-1
  • all-2
  • all-3
  • all-4
  • all-5
  • all-6
  • all-7
  • all-8
  • all-9
  • all-10
  • all-11
  • all-12
<element class="row">
	<element class="all-4"></element>
	<element class="all-3"></element>
	<element class="all-5"></element>
</element>

Variable-sized cells

Husk allows you to make any cell of a grid be a certain size depending on the width of the viewport with the following classes. Each type is applied based on the values listed in the Breakpoints section.

  • tiny-1
  • tiny-2
  • tiny-3
  • tiny-4
  • tiny-5
  • tiny-6
  • tiny-7
  • tiny-8
  • tiny-9
  • tiny-10
  • tiny-11
  • tiny-12
  • small-1
  • small-2
  • small-3
  • small-4
  • small-5
  • small-6
  • small-7
  • small-8
  • small-9
  • small-10
  • small-11
  • small-12
  • medium-1
  • medium-2
  • medium-3
  • medium-4
  • medium-5
  • medium-6
  • medium-7
  • medium-8
  • medium-9
  • medium-10
  • medium-11
  • medium-12
  • large-1
  • large-2
  • large-3
  • large-4
  • large-5
  • large-6
  • large-7
  • large-8
  • large-9
  • large-10
  • large-11
  • large-12
  • huge-1
  • huge-2
  • huge-3
  • huge-4
  • huge-5
  • huge-6
  • huge-7
  • huge-8
  • huge-9
  • huge-10
  • huge-11
  • huge-12
<element class="row">
	<element class="tiny-12 small-6 medium-4 large-3 huge-2"></element>
	<element class="        small-6  all-4                 "></element>
	<element class="tiny-12 all-6                    huge-3"></element>
</element>

Offset cells

Husk allows you to offset any cell of a grid from the previous one or the side of the grid, and to vary these offsets depending on the width of the viewport, with the following classes. Each type is applied based on the values listed in the Breakpoints section.

  • offset-all-1
  • offset-all-2
  • offset-all-3
  • offset-all-4
  • offset-all-5
  • offset-all-6
  • offset-all-7
  • offset-all-8
  • offset-all-9
  • offset-all-10
  • offset-all-11
  • offset-all-12
  • offset-tiny-1
  • offset-tiny-2
  • offset-tiny-3
  • offset-tiny-4
  • offset-tiny-5
  • offset-tiny-6
  • offset-tiny-7
  • offset-tiny-8
  • offset-tiny-9
  • offset-tiny-10
  • offset-tiny-11
  • offset-tiny-12
  • offset-small-1
  • offset-small-2
  • offset-small-3
  • offset-small-4
  • offset-small-5
  • offset-small-6
  • offset-small-7
  • offset-small-8
  • offset-small-9
  • offset-small-10
  • offset-small-11
  • offset-small-12
  • offset-medium-1
  • offset-medium-2
  • offset-medium-3
  • offset-medium-4
  • offset-medium-5
  • offset-medium-6
  • offset-medium-7
  • offset-medium-8
  • offset-medium-9
  • offset-medium-10
  • offset-medium-11
  • offset-medium-12
  • offset-large-1
  • offset-large-2
  • offset-large-3
  • offset-large-4
  • offset-large-5
  • offset-large-6
  • offset-large-7
  • offset-large-8
  • offset-large-9
  • offset-large-10
  • offset-large-11
  • offset-large-12
  • offset-huge-1
  • offset-huge-2
  • offset-huge-3
  • offset-huge-4
  • offset-huge-5
  • offset-huge-6
  • offset-huge-7
  • offset-huge-8
  • offset-huge-9
  • offset-huge-10
  • offset-huge-11
  • offset-huge-12
<element class="row">
	<element class="tiny-12 small-6 medium-4 large-3 huge-2"></element>
	<element class="        small-6  all-4                 "></element>
	<element class="tiny-12 all-6                    huge-3"></element>
</element>

Flex.css

Intro to Flexbox

Flex.css is Husk's library for easy use of the CSS3 Flexbox module. Normally, the flexbox module is hard to use because it changed three times before it was finalized (meaning some older browsers use very different syntaxes) and there are several steps to setting up and positioning a flexbox grid. Fortunately, Flex.css boils it down to a set of easy-to-use classes.

Rows and Columns

Flex.css's main feature is flexbox rows and columns.

To make an element a flex row, give it the flex-row class. To make it a flex column, give it the flex-column class. An element cannot be simultaneously a flex row and a flex column. Attempting to add both classes to the same element is not tested, and might result in unexpected behavior.

<element class="flex-row"></element>

<element class="flex-column"></element>

Wrapping

Flexbox lets you allow elements to wrap to the next line instead of overflowing or squishing. To force this on or off, you can use these classes:

  • flex-wrap
  • flex-nowrap
<element class="flex-row flex-wrap"></element>

Child distribution

Flexbox has multiple ways to distribute children of the container. Flex.css abstracts these into horizontal and vertical distribution classes

  • flex-horiz-left
  • flex-horiz-center
  • flex-horiz-right
  • flex-horiz-space-between
  • flex-horiz-space-around
  • flex-horiz-stretch
  • flex-vert-left
  • flex-vert-center
  • flex-vert-right
  • flex-vert-space-between
  • flex-vert-space-around
  • flex-vert-stretch
<element class="flex-row flex-horiz-space-between flex-vert-center"></element>

Direction

Flexbox allows you to change te direction that children are ordered. By default, Flex.css orders flex-rows left-to-right, and flex-columns top-to-bottom. Simply apply the flex-reverse class to make flex-rows sort right-to-left, and flex-columns bottom-to-top.

<element class="flex-row flex-reverse"></element>

<element class="flex-column flex-reverse"></element>

Type.css

Intro

Type.css is Husk's way to manage the typography of a site. It currently works on Google's suite of Roboto fonts, but a customizer is forthcoming.

Activating

Just like Husk.css and Flex.css, Type.css won't do anything until you tell it to. This is done with the husktype class. Simply apply this class to any parent whose children you wish to be managed by Type.css

<BODY class="husktype"></BODY>

Font Modifiers

Sizes

Type.css gives you the ability to easily set the relative size of fonts without using the dirty style attribute. Simply apply one of the following classes to whatever element you wish:

  • font-1qx
  • font-_25x
  • font-1hx
  • font-2qx
  • font-_5x
  • font-3qx
  • font-_75x
  • font-2hx
  • font-4qx
  • font-1x
  • font-1-1qx
  • font-5qx
  • font-1_25x
  • font-1-1hx
  • font-3hx
  • font-1-2qx
  • font-6qx
  • font-1_5x
  • font-1-3qx
  • font-7qx
  • font-1_75x
  • font-4hx
  • font-8qx
  • font-2x
  • font-3x
  • font-4x
  • font-smaller
  • font-xx-small
  • font-x-small
  • font-small
  • font-medium
  • font-large
  • font-x-large
  • font-xx-large
  • font-larger
<BODY class="husktype">
		<DIV class="font-2x"></DIV>
	</BODY>

Font Weights

Much like font sizes, Type.css provides classes to easily change font weights:

  • font-smaller
  • font-ultra-light
  • font-100
  • font-thin
  • font-200
  • font-light
  • font-300
  • font-roman
  • font-medium
  • font-normal
  • font-400
  • font-bold
  • font-500
  • font-heavy
  • font-600
  • font-black
  • font-700

Transformations

The following classes change the case of text:

  • font-smaller
  • text-uppercase
  • text-lowercase
  • text-title
  • text-capitalize

Direction

The following classes change text's direction:

  • text-left
  • align-left
  • text-right
  • align-right
  • text-center
  • align-center
  • text-justify
  • align-justify