Skip to content

Instantly share code, notes, and snippets.

@balupton
Last active September 29, 2018 18:31
  • Star 40 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save balupton/1549029 to your computer and use it in GitHub Desktop.
Responsive layouts in stylus

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 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
// 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
@jgallen23
Copy link

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

@balupton
Copy link
Author

balupton commented Jan 2, 2012

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.

@jgallen23
Copy link

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.

@tj
Copy link

tj commented Jan 2, 2012

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

@chriseppstein
Copy link

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%; } }

@tj
Copy link

tj commented Jan 2, 2012

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

@chriseppstein
Copy link

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

@tj
Copy link

tj commented Jan 2, 2012

@chriseppstein definitely is! simple but clever

@tj
Copy link

tj commented Jan 2, 2012

@chriseppstein definitely is! simple but clever

@balupton
Copy link
Author

balupton commented Jan 2, 2012

@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!

@bjourne
Copy link

bjourne commented Oct 14, 2012

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

@jbaumbach
Copy link

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.

@fizzvr
Copy link

fizzvr commented Apr 13, 2013

great 👍

@schtauffen
Copy link

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?

@EnMod
Copy link

EnMod commented Nov 13, 2014

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

@oferns
Copy link

oferns commented Sep 22, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment