Responsive Layouts With Stylus Jeet And Rupture

Develop for mobile first is a common theme you hear today. I use three libraries for preprocessing css to help with this process. They make it easy to get a responsive site running fairly quick.

  1. Stylus - CSS pre-processor.
  2. Jeet - Flexible ratio grid system for stylus.
  3. Rupture - Simple media queries in stylus.

Below is a sample design I’ll be working with. There is a sidebar and a content area. I’ve decided to make a breakpoint at 600 pixels. Once the browser screen size is below 600 pixels the layout will change.

alt text

This is how the screen will display once the size is below 600 pixels. I’ve stacked the sidebar and content area. I also display the links horizontally instead of vertically.

alt text

I’ll use the following stylus code to accomplish the above:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@import 'jeet'
#root
center(960px)
.sidebar
col(1/3)
background-color: #FFFFCC
ul
list-style: none
li
display: none
margin: 0 0 10px 0
+below(600px)
stack()
ul
center(200px)
li
display: inline
margin: 0 15px 0 0
.main
col(2/3)
background-color: #CCCCCC
+below(600px)
stack()

To summarize what I’m doing:

  • Center the document within 960 pixels.
  • Set the .sidebar element to take up 1/3 of the screen size.
  • Each .sidebar > ul > li will be displayed vertically and have a bottom margin of 15 pixels.
  • Set the .main element to take up 2/3 of the screen size.

When the screen size is below 600 pixles:

  • Stack the .sidebar and .main elements vertically.
  • Center the .sidebar > ul within 200 pixels.
  • Each .sidebar > ul > li will be displayed horizontally and have a right margin of 15 pixels.

For under 30 lines of code I accomplished a lot and set a good foundation for a responsive design. I’ll need to create a build step for the above code to be processed into css. That’s pretty easy too:

1
$ stylus -u jeet -u rupture css/*.styl --out static/bundle.css

That one liner takes the stylus file and creates a css file, bundle.css, in the directory static. I can then include the bundle.css in my html.

I created a github repo, responsive-layout for this example.

Questions? Comments? Tweet me @schempy or email schempysays@gmail.com