Responsive layouts in stylus

README.md

Responsive layouts in stylus

Why this way?

1. 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.

2. 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.

3. It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.

4. Did I mention it's as it should be, and incredibly simple?

Using it

1. 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

2. 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

3. 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.

4. 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).

5. We also have an awesome resizing transition when they resize their browser to make the re-adjustment of the grid very smooth.

Why stylus?

• LessCSS is good, until you try to actually use it (sooo many bugs)
• Stylus is new, stable, and beautiful

What next?

1. Provide a working demo of this in action

Using stylus?

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.

License

Created by Benjamin Lupton and licensed under the Creative Commons Zero License

responsive.styl

// Responsive layouts in stylus
// https://gist.github.com/1549029
// Created by Benjamin Lupton
// Licensed under the Creative Commons Zero - http://creativecommons.org/publicdomain/zero/1.0/

// ====================================
// Responsive Layout Awesomeness

// Include paddings inside our width for everything
*
	box-sizing border-box

// Provide our wrapper mixin
// Contains our resize transition
wrapper($site-width = 70%)
	$site-margin = ((100% - $site-width) / 2)
	margin-left: $site-margin
	margin-right: $site-margin
	transition: margin 0.3s ease-out

// Provide our column mixin
column()
	display: inline
	float: left
	overflow: hidden

style.styl

// Responsive layouts in stylus
// https://gist.github.com/1549029
// Created by Benjamin Lupton
// Licensed under the Creative Commons Zero - http://creativecommons.org/publicdomain/zero/1.0/

// ====================================
// Imports

// Nib
@import 'nib'

// Reset
global-reset()

// Responsive Layouts
@import 'responsive'


// ====================================
// Layout: Initial
// Write your initial layout configuration here

// Sections
#header, #main, #footer
	wrapper(80%)

// Menu
#header
	clearfix()
	nav,ul
		li
			column()
			width: (100%/7)

// Portal
.portal
	clearfix()
	nav,ul
		column()
		width: (100%/4)
		h3
			margin 0 5%


// ====================================
// Styles
// Write your normal styles here


// ====================================
// Layout: Responsive
// Write your responsive layout styles here
// Below is merely an example of how this should work

// Increase the wrappers from 80% to 85%
@media screen and (max-width: 1280px)
	#header, #main, #footer
		wrapper(85%)

// Increase the wrappers from 85% to 90%
@media screen and (max-width: 1120px)
	#header, #main, #footer
		wrapper(90%)

// Increase the wrappers from 90% to 100%
// Drop the portal columns from 4 a row, to 2 a row
@media screen and (max-width: 960px)
	#header, #main, #footer
		wrapper(100%)
	.portal
		nav,ul
			width: (100%/2)
			.heading
				margin: 2%

// Change some font sizes
@media screen and (max-width: 840px)
	#header nav li a h2
		font-size 18px
		padding-top 4px

// Change the menu columns from 7 a row, to 4 a row
// Drop the main width from 100% to 95%
// Drop the portal columns from 2 a row, to 1 a row
@media screen and (max-width: 720px)
	#header, #footer
		wrapper(100%)
		nav,ul
			li
				width: (100%/4)
	#main
		wrapper(95%)
	.portal
		nav,ul
			width: (100%)
			.heading
				margin: 0

Why not pass in the number of columns to your column() mixin and declare the width there?

You could do that too ;-)

Personally, I find that to a bit too much magic and counter-intuitive for me, where specifying the width manually is more like how css naturally works and more intuitive for me.

Though it's totally up to you, by all means take it and mix it up.

Fair enough. Thanks for posting this, it's making me completely rethink the way I set up my grids. I always hated the .grid4, .omega stuff, but I used it because it was so easy. I think this is a better solution.

also dont need to do stuff like width: (100%), you only need that for / due to the ambiguity of font: 14px/1.5 etc

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.

.foo {
  width: 50%;
  @media screen and (max-width: 720px) {
   width: 100%;
  }
}

Compiles to:

.foo { width: 50%; }
@media screen and (max-width: 720px) { .foo { width: 100%; } }

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:

$rwd-enabled: true !default;
@mixin tablets {
  @if $rwd-enabled {
    @media screen and (max-width: 720px) {
      @content;
    }
  }
  @else {
    @content;
  }
}

And then use it simply like this:

.foo {
  width: 50%;
  @include tablets { width: 100%; }
}

Which compiles to:

.foo { width: 50%; }
@media screen and (max-width: 720px) { .foo { width: 100%; } }

@extending 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.

.foo {
  width: 50%;
  @include tablets { width: 100%; }
}
.bar { @extend .foo; }

Which compiles to:

.foo, .bar { width: 50%; }
@media screen and (max-width: 720px) { .foo, .bar { width: 100%; } }

If you had to make .foo a mixin to share it's styles, you would have had this:

.foo { width: 50%; }
@media screen and (max-width: 720px) { .foo { width: 100%; } }
.bar { width: 50%; }
@media screen and (max-width: 720px) { .bar { width: 100%; } }

Ya I wouldnt call it stale either considering its like 5 years more mature. Extend is wicked tho I would love to get that in

@visonmedia I hope you will add it, it's a great feature.

@chriseppstein definitely is! simple but clever

@chriseppstein definitely is! simple but clever

@chriseppstein @visionmedia I've retracted that comment about Sass - sorry about that! Your arguments have definitely changed my mind on it. Turns out I couldn't have been more wrong about it!

@visionmedia yeah @extend is awesome, it would be great for including things like Twitter Bootstrap, as we would be able to apply Twitter Bootstrap styling in the same way we have done responsive design here (instead of using .span1..15 classes). Alternatively, I was planning to just rewrite bootstrap as mxiins, but that is a lot of work.

oooh, media bubbling is awesome!

@jgallen23 thanks!

Good work! I'd love to see a demo. :)

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.

great 👍

I have chosen Jeet over foundation and bootstrap because I love stylus; but I wonder do I even need the framework or should I follow in the footsteps laid out here?

Do whatever you like, however this methodology allows you to ditch complete frameworks if all you need is a simple, responsive grid.

What next?1.Provide a working demo of this in action

Any idea when? Would love to see a few basic examples to get me going..

Thanks