Responsive layouts in stylus
There is no
span1..15styles, instead your css defines your layout and your html remains semantic and not polluted with display information. As it should be.
The markup is incredibly easy, you specify the wrappers width, and then each columns width in percentages. Every other grid framework I've found is incredibly complicated with this.
It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.
Did I mention it's as it should be, and incredibly simple?
Specify your wrapper width by doing
wrapper(100%)to take up 100% of the space,
wrapper(50%)to take up only 50% of the space - or whatever
Specify how many columns should be on a row by doing:
column(); width: (100%/4)for 4 columns on a row, or
column(); width: (100%/8)for 8 columns on a row, or
column(); width: (100%/1)for one column on a row - or whatever
Pretty easy right, you just specify how big the wrapper should be, how many columns in a row, and it will automatically adjust as your browser resizes. Awesome.
Then on smaller screen sizes, perhaps instead of displaying something with 8 rows, we want 4 rows instead, then on a very small screen size, 1 row instead. We can specify that pretty easily with this too. (See example).
We also have an awesome resizing transition when they resize their browser to make the re-adjustment of the grid very smooth.
- LessCSS is good, until you try to actually use it (sooo many bugs)
- Stylus is new, stable, and beautiful
- Provide a working demo of this in action
I love using stylus in DocPad, you just write your stylus files as
src/documents/my-stylus-file.css.styl and it will automatically convert it to
out/my-stylus-file.css for you. It also supports this same functionality for coffee-script, coffeekup, jade, haml, less, sass, whatever really.