O'Reilly

Generate a CSS Grid with Stylus

By on  

I've jumped into Stylus over the past few moths and I love it.  I wouldn't say it's better or worse than SASS, it's just something a bit different.  One task I've recently completed is building the standard Mozilla grid and column structure with a Stylus mixin.  Here's how I did it!

The CSS

The first step is setting up vars to represent the column start, stop, and increment sizes:

/* grid and site dimensions */
grid-increment-desktop = 80px
grid-increment-tablet = 60px
grid-increment-mobile = grid-increment-tablet

grid-start-desktop = 60px
grid-start-tablet = 40px
grid-start-mobile = grid-start-tablet

grid-end-desktop = 940px
grid-end-tablet = 700px
grid-end-mobile = 280px
grid-end-mobile-wide = 400px

site-width-desktop = 1000px
site-width-tablet = 760px
site-width-mobile = 320px
site-width-wide = 480px

/* media query dimensions */
/* obviously the default view doesn't require a media query */
media-query-tablet = 'only screen and (min-width: 760px) and (max-width: 1000px)'
media-query-mobile = 'only screen and (max-width: 760px)'
media-query-mobile-wide = 'only screen and (min-width: 480px) and (max-width: 760px)'

The grid widths will be need to be modified based on media query (device width) so we'll generate a general grid and then a media query-specific grid:

generate-grid(increment, start, end)
	total = start
	for n, x in 0..((end - start) / increment)
		.column-{x+1}
			width total
		total = total + increment


/* and now to generate the grids... */


/* Desktop Layout (default) */
generate-grid(grid-increment-desktop, grid-start-desktop, grid-end-desktop)


/* Tablet Layout - 760px */
@media media-query-tablet
	generate-grid(grid-increment-tablet, grid-start-tablet, grid-end-tablet)

/* Mobile Layout - 320px */
@media media-query-mobile
	generate-grid(grid-increment-mobile, grid-start-mobile, grid-end-mobile)

 /* Wide Mobile Layout - 480px */
@media media-query-mobile-wide
	generate-grid(grid-increment-mobile, grid-start-mobile, grid-end-mobile-wide)

The result looks like this:

.column-1 {
  width: 60px;
}
.column-2 {
  width: 140px;
}
.column-3 {
  width: 220px;
}
.column-4 {
  width: 300px;
}
.column-5 {
  width: 380px;
}
.column-6 {
  width: 460px;
}
.column-7 {
  width: 540px;
}
.column-8 {
  width: 620px;
}
.column-9 {
  width: 700px;
}
.column-10 {
  width: 780px;
}
.column-11 {
  width: 860px;
}
.column-12 {
  width: 940px;
}
@media only screen and (min-width: 760px) and (max-width: 1000px) {
  .column-1 {
    width: 40px;
  }
  .column-2 {
    width: 100px;
  }
  /* ... */
}
@media only screen and (max-width: 760px) {
  /* ... */
}
@media only screen and (min-width: 480px) and (max-width: 760px) {
  /* ... */
}

I love how easy it is to create these grids using CSS preprocessors and I hope CSS eventually makes it to the dynamic level.  SASS and Stylus proves that the system works and I pray we get a standard soon!

Track.js Error Reporting

Recent Features

  • 5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • Modal-Style Text Selection with Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in...

  • Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

Discussion

  1. But PX and not %?

    • That did surprise me too, Dan. I’m going to push around Mozilla to see why pixel-based design is the standard. The nice thing, however, is that we can modify this mixin/function for percentages

    • Jamie

      pixel based design is a standard because of advertisements. Trying to always have a 300×250 ad in a sidebar doesn’t work too well with percentage based grids.

  2. darksapito

    nice article, thanks! :D

    take a look tuktuk.tapquo.com is a framework using stylus

    the ‘nib’ module of stylus is great :D

  3. I still would go with SASS. Nice mixin though. tuktuk looks interesting …

  4. Loc_rabbirt

    thanks you :), great article

  5. Alex

    codepen unfortunately does not support stylus, an alternative would be cssdeck

  6. Good to see a fellow Stylus user! Here is a responsive grid system I wrote in Stylus using a loop over a 12 column grid: https://github.com/stinoga/columnus

    • my man Rob I thought about when I saw the article title… I’m digging columnus. Cheers :)

    • Thanks Ady! I’d love any feedback you’ve got on it.

  7. Great to see, very similar to a grid system I use without pre processors.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...