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-1.png

Recent Features

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

Incredible Demos

  • Fancy Navigation with MooTools JavaScript

    Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect. The XHTML Just some simple...

  • Use Custom Missing Image Graphics Using Dojo

    A few months back I posted an article about how you can use your own “missing image” graphics when an image fails to load using MooTools and jQuery. Here’s how to do the same using Dojo. The HTML We'll delegate the image to display by class...

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!