Treehouse

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!

ydkjs-4.png

Recent Features

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

  • MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

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!