Home

Dumb Grids with Susy

in CSS and Susy

Susy might be my new favorite thing… at least in CSS.

I say “dumb grids” with nothing but love, because in this case “dumb” means “not too magic and easy to grok”. Without providing any configuration to Susy you can do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.container {
  @include container;

  /* this is our grid breakpoint, ~ a medium width */
  @media (min-width: 50em) {
    max-width: 50em;

    .half {
      @include span(1 of 2);
    }
    .third {
      @include span(1 of 3);
    }
    .half, .third {
      &.last {
        @include last;
      }
    }
  }

  /* this is our "desktop" width */
  @media (min-width: 65em) {
    max-width: 65em;
  }
}

So now, without having to define any grid settings, we have basic support for half- and third-width grids inside of containers that snap to fixed widths at breakpoints.

Neat, huh?