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!

Recent Features

Incredible Demos

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • By
    JavaScript Speech Recognition

    Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...

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!