Responsive layouts in stylus
-
There is no
span1..15
styles, 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, orcolumn(); width: (100%/8)
for 8 columns on a row, orcolumn(); 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.
Created by Benjamin Lupton and licensed under the Creative Commons Zero License
Reasonable people can disagree about syntax flavors, but to call Sass stale and outdated is just not factually correct. Sass has many new features to support responsive design that stylus does not (as far as I know). These features already implemented an in the next release (3.2) and some that are already in stable (3.1).
Media Bubbling
Media directives in a nested context are bubbled up to the top level of the document.
Compiles to:
Mixin Content
Pass blocks of styles to a mixin. This is useful for lots of things, but abstracting media selectors
is one of them. It also allows responsive behavior to disabled.
You can define a library mixin like so:
And then use it simply like this:
Which compiles to:
@extend
ing base classes within media blocks.Mixins can cause a lot of bloat, but a mixin that applies media behavior is even worse in this respect.
Sass's
@extend
directive can be used to limit this bloat.Which compiles to:
If you had to make
.foo
a mixin to share it's styles, you would have had this: