Skip to content

Instantly share code, notes, and snippets.

@balupton
Last active September 29, 2018 18:31
Show Gist options
  • Star 40 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save balupton/1549029 to your computer and use it in GitHub Desktop.
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
@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