Download

NOTE - Salsa was merged into Susy v2.x which is going to include all of Salsa's features and much more.
See this demo page for some examples.

CSS grid systems are nice, but we can do so much better...
Salsa is a Sass based layout system that allows you to:

  • Easily and quickly create both simple and complex layouts.
  • Keep your HTML nice and clean, no presentational classes.
  • Produce lighter CSS with only what you really need.
  • Separate display order from source order for SEO and Accessibility.
  • Support mobile devices by creating fluid, responsive layouts.
  • Create non-grid layouts with a smart positioning system.

Some Examples#

This should give you a clue about how simple it is to use Salsa to create some pretty impressive layouts. with or without a grid.
These were all done using only a few lines of pure Sass, no Javascript or any other magic tricks, the code is attached below, check it out.

Resize your browser to see them change!

3-column complex nested grid AG test

3-column complex nested grid AG test - Source order manipulations

2-column nested grids, with an off-grid element

1-column nested grid - variable wrapper widths

No grid (custom width values), Off Canvas effect (hover it!)

1-column mobile stack

E1

E2

E4

E5

E6

E7

E8

E9

E10

E3

⇤

resize to see them change

⇥

resize to see them change

?
1
2
3
4
5
6
7
8
9
10
11
// Nested grids AG test
.e1 { @include grid(2); }
.e2 { @include grid(6 container); }
.e3 { @include grid(2); }
.e4 { @include grid(3/6); }
.e5 { @include grid(3/6); }
.e6 { @include grid(2/6); }
.e7 { @include grid(4/6 container); }
.e8 { @include grid(2/4); }
.e9 { @include grid(2/4); }
.e10 { @include grid(100%); }
?
1
2
3
4
5
6
7
8
9
10
11
// Source order manipulations
.e1 { @include grid(2, 8); }
.e2 { @include grid(6 container, 0); }
.e3 { @include grid(2, 6); }
.e4 { @include grid(3/6); }
.e5 { @include grid(3/6); }
.e6 { @include grid(2/6); }
.e7 { @include grid(4/6 container); }
.e8 { @include grid(2/4, 0); }
.e9 { @include grid(2/4, 2/4); }
.e10 { @include grid(100%, row); }
?
1
2
3
4
5
6
7
8
9
10
11
// 2-column nested grids, with off-grid element
.e1 { @include grid(3, 7); }
.e2 { @include grid(7 container, 0); }
.e3 { @include grid(100%, row); }
.e4 { @include grid(60%, 40%); }
.e5 { @include grid(60%, -20%); }
.e6 { @include grid(2/6, row); }
.e7 { @include grid(4/6 container); }
.e8 { @include grid(1/4); }
.e9 { @include grid(1/4); }
.e10 { @include grid(2/4); }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1-column nested grid - variable widths
.e1 { @include grid(100%); }
.e2 {
  @include grid(7 container, 15%);
  @include row;
}
.e3 { @include grid(100%, row); }
.e4 { @include grid(1/7, 5/7); }
.e5 { @include grid(1/7, 6/7); }
.e6 { @include grid(5/7, 0); }
.e7 { @include grid(100% container, row); }
.e8 { @include grid(1/7); }
.e9 { @include grid(1/7); }
.e10 { @include grid(5/7); }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// No grid (custom width values), off-canvas effect (hover)
.e1 { @include grid(25%, -25%); }
.e2 { @include grid(75% container); }
.e3 { @include grid(25%); }
.e4 { @include grid(15%); }
.e5 { @include grid(33%); }
.e6 { @include grid(52%); }
.e7 { @include grid(100% container, row); }
.e8 { @include grid(25%); }
.e9 { @include grid(25%); }
.e10 { @include grid(88%, 0); }
 
.container{
  overflow: hidden;
  &:hover{
  .e1 { @include grid(25%, 0); }
  .e2 { @include grid(75% container, 25%); }
  .e3 { @include grid(25%, 100%); }
  }
}
?
1
2
3
4
5
6
7
8
9
10
11
// 1-column mobile stack
.e1 { @include grid(100%); }
.e2 { @include grid(100%); }
.e3 { @include grid(100%); }
.e4 { @include grid(50%); }
.e5 { @include grid(50%); }
.e6 { @include grid(100%); }
.e7 { @include grid(100%); }
.e8 { @include grid(100%); }
.e9 { @include grid(100%); }
.e10 { @include grid(100%); }

Getting started#

Requirements:

First download Salsa, then put the /salsa folder in your stylesheets directory and import it:

?
1
@import "salsa/salsa";

Documentation#

Not much yet, but the code is very well commented, quickly going through the comments will get you started in no-time.
Knowing the settings and how to use the span() and the container mixins will be enough for most cases, read about those first.

Documentation and more examples are coming, stay tuned.

Browser support

Salsa will work fine on IE8 and better.
If you want to support IE7 (you don't) you'll have to add a box-sizing polyfill, and tell Salsa where it is.

Credits

Credit for the inspiration goes mostly to Susy and Zen grids.
I believe Salsa manage to combine the best of both in a much simpler system.
Salsa was created to power Sasson's layout system by Tsachi Shlidor (@shlidor).

License

Salsa is open-source, licensed under the GNU General Public License.