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

@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