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
This seems like a good idea, but I'm confused about how to use it. What is ".portal"? How do I know what to divide 100% by in the "width:" statement? What does @visionmedia mean about not even needing the "width:" statement?
I ended up going with this guy's solution, but it seems like stylus can be leveraged to make it a lot more elegant: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps Our layout is very simple, so there's got to be a way to get your solution to work.
Perhaps copy the source HTML that the CSS applies to into this article? That should clear a lot of the confusion up.