Extending CSS With Sass

CSS is designed primarily to enable the separation of content from presentation, including elements such as the layout, colors, and fonts. This separation improves content accessibility and provides more flexibility and control over the presentation. CSS is quite flexible language on its own, but as websites become more and more complex we sometimes need to have more control.

I’m using Sass to extend the basic behavior of CSS and this post is mostly about some basic things I’m using. I’ll also assume that you know something about Sass already and that’s why I won’t dive deep into what it actually is. If you are running OS X, you can get Sass up and running using these two commands below. The first one installs Sass Ruby gem and the second one translates your .scss file into a .css file.

1
2
gem install sass
sass --watch style.scss:style.css

Partials

Using Sass’s @import you can organize your styles into a smaller partials. @import in Sass works a bit differently if compared to CSS @import statement. The difference is that when Sass is processed all the partials will be combined into a single CSS file which reduces unnecessary HTTP requests and speeds up the loading time. I usually have one “main” Sass file where I have all my variables, mixins, etc. and where I do the importing.

1
2
3
4
5
6
@import "fontface";
@import "reset";
@import "header";
@import "content";
@import "footer";
@import "print";

This way you can separate different sections/features.

Variables

Variables are good when you need to, for example, use the same colors again and again. They allow you to specify widely used values in a single place and I usually specify them as the first thing in my main stylesheet.

1
2
3
4
5
$color-red: rgb(124,42,0);
$color-blue: rgb(0,109,143);
$color-green: rgb(55,87,25);
$font-body: sans-serif;
$font-headers: "PTSansCustom", Arial, sans-serif;

And then later we can use them like this:

1
2
3
4
h1 {
  font-family: $font-headers;
  color: $color-blue;
}

The benefit of this is that when you need to later adjust or change that shade of blue, you only need to change it to one place.

Converting Pixels to EMs

One of the most useful features for me has been the ability to convert pixels to EMs without the need to use calculator. This function below does that and it works by taking two arguments, pixels and context. You can either use the default context and specify only the pixels you want to convert – or you can specify pixels and a custom context for the conversion.

1
2
3
4
5
$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

And then later this function can be used like below (converts 36px to EM units):

1
2
3
h1 {
  font-size: em(36);
}

If you’ve converted all your pixels to EMs you can even scale the whole layout inside Media Queries with this simple percent conversion:

1
2
3
4
5
6
7
@media screen and (min-width: 60em) {
  body { font-size: percentage(16 / 16); }
}

@media screen and (min-width: 80em) {
  body { font-size: percentage(18 / 16); }
}

Making a simple grid system

Making your own grid system is also pretty straightforward in Sass. The following example is a Sass @mixin from David Demaree’s article on A List Apart which takes one argument—$span—which will be passed into our @mixin as a variable:

1
2
3
4
5
6
7
8
9
$column-width: 21em;
$gutter: 1.5em;

@mixin grid($span) {
  float: left;
  margin-right: $gutter;
  margin-bottom: $gutter;
  width: ($column-width * $span) + ($gutter * ($span - 1));
}

And then later that mixin can be used with containers using simple @include:

1
2
3
4
5
6
7
8
9
10
11
12
header {
  @include grid(3);
}

article {
  @include grid(2);
}

aside {
  @include grid(1);
  margin-right: 0;
}

To make this a bit easier to understand, our grid (layout) would now look like this when containers are laid on top of it:

Grid

More Resources

I’m just scratching the surface here on what’s possible, and I suggest you to read more about some of these techniques from A List Apart and from the resources I’ve provided below.

Scaling with EM units

Recently I started testing how proportional scaling of bigger layouts would work in reality and if it makes any sense. It’s possible when using EM units and then changing body’s font-size when viewport’s height grows above certain point. Basically that means, that I have to change only one or two css properties between @media queries which are targeting larger screen sizes.

The reason why I started doing this, is that I wanted to rethink my current approach to responsive design and try something which would make the process at least a bit easier.

Warning: You’ll need to view my demo on at least 24" or 27" monitor with 1920×1200 resolution or bigger. Otherwise you won’t see this method in full effect and it might be harder to understand the benefits.

Demo viewed on 27" and 15" screens:

The idea is that when the screen size grows, the demo still takes approxi­mately the same amount of screen estate.

CSS and @media queries

This method makes most sense when combined with mobile first approach. After you’ve reached the “optimal desktop size” you can start scaling the layout up for larger screen sizes. The most important thing is to specify all units in your stylesheet with EMs, so that we can scale everything by changing body’s font-size. That works because EMs are relative to parent element’s font-size.

You can easily figure out the needed break points by scaling the window bigger and looking when the layout starts to break apart or look awkward. That’s the point when you’ll want the next @media query to trigger and scale the layout a bit bigger.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
  font-size: 81.25%;
}

@media (min-width: 68em) and (min-height: 53em) {
  body {
    font-size: 87.5%;
  }
}

@media (min-width: 75em) and (min-height: 57em) {
  body {
    font-size: 93.75%;
  }
}

@media (min-width: 80em) and (min-height: 62em) {
  body {
    font-size: 100%;
  }
}

Check out my demo to get a better picture of this. Try also scaling the browser window bigger/smaller + remember to do the testing on a big screen.

Images

I recommend using either SVG or some sort of adaptive images approach with this technique. You can get going with just one image version, but you should remember that when you optimize for the largest size possible it’s usually way too heavy for mobile devices + can also look quite awkward when browsers scale it down too much.

The future

This method won’t work with all designs, but at least when combined with a design which has elements which are somehow relative to the viewport dimensions, it makes it much easier to adapt the layout to different sizes.

Also: I heard two days ago that Webkit nightly builds started supporting viewport-relative lengths through the “vw” and “vh” units in CSS. In addition to Webkit, IE9 is the only browser out there right now that supports these new units. We cannot probably start using them right away, but they’ll open up many new possibilities to make it much easier to scale elements according to the viewport. Before we reach the point where all major browsers support these units we can use this EM method.

Resources

Please note that the demo layout I’m using is copyrighted work and cannot be used as a template/boilerplate for your work. The actual site will be launched later on different URL. The actual site is here. ❦

Adaptive vs Responsive, What’s The Difference?

There seems to be some confusion about these terms and what they mean, so here’s my thoughts on the subject and few links to back them up. I’m usually not very keen when it comes to debating over what something is called, but this time I wanted to make it clear, as I hear this question quite often.

Resposive design is a subset of adaptive design. Responsive design is fluid layout only, while adaptive design is fluid layout combined with progressive enhancement.

Responsive design” is a subset of a larger concept which is called “Adaptive design.” When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries).

Adaptive design” on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing.

Finally, “Adaptive layout” means a layout done by combining multiple fixed widths. Right now, I feel that Adaptive layout—when done right and when fixed widths are combined with fluid widths—is one form of responsive design and not just an alternative to it. Zeldman shared a bit similar idea in his blog post from 2011.

Adaptive design explained

Update v1. If my post made things look more complicated than they actually are, then this all in short: Resposive design is a subset of adaptive design. Responsive design = fluid layout only, while adaptive design = fluid layout + progressive enhancement. ❦

On Typography

I have been intrigued by the idea of making a typographic scale out of a musical scale that would not only be very readable, but also aesthetically pleasing. This whole idea started after the launch of my new site. At first, I ignored to see it, but weeks later I started to notice that the textual content of the site is actually pretty harsh for the eyes and the reading experience isn’t that great.

You can read it—I’m quite sure of that—but the longer you browse the content, the more your eyes start to hurt. Literally. One reason for this is the contrast between the text and the background, but there’s also more to it than just that, so I started wondering:

  1. How could I improve it?
  2. How to make building of responsive typography easier?
  3. Can typography look good and be readable on so wide range of devices?
  4. Are there any patterns where I could base my decisions on?

The foundation

At the time I were thinking about the subject, I had a Skype chat open with Joni Korpi and we were discussing about similar problems in Responsive Design. Later on the evening, when I had already went to sleep, Joni pasted me a link to 24 Ways article about Music, Harmony and Proportion in Web Design. The idea didn’t hit me instantly after I read it, but about a week or two later I was hooked and started studying how Musical Scales could help me to make the perfect Typographic Scale for the Web.

Since I’ve been following close-by music producers and artists—who compose their tracks with the help of a scale—for most of my youth, I felt pretty confident to base the rhythm and proportions on the chromatic scale. There are different versions of the scale and I decided to go with the Pythagorean one. That decision was mostly based on the information I could find from the Web.

The Chromatic Scale

The chromatic scale is a musical scale with twelve pitches, each a semitone apart. On a modern piano or other equal-tempered instrument, all the half steps are the same size. An equal tempered chromatic scale is a non-diatonic scale having no tonic because of the symmetry of its equally spaced tones.[1]

The most common conception of the chromatic scale before the 13th century was the Pythagorean chromatic scale. Due to a different tuning technique, the twelve semitones in this scale have two slightly different sizes. Thus, the scale is not perfectly symmetric. Many other tuning systems, developed in the ensuing centuries, share a similar asymmetry.[2]

Different notes and their Ratio/Pitch/Math:

The Pythagorean Scale

Don’t compose without a scale

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.” [3]

That’s an excerpt from a book called The Elements of Typographic Style by Robert Bringhurst. Basically, the use of a scale in typography is something that have been practised for centuries. It’s not something that I just invented. Today you can see it, for example, in all word processing applications that let you choose font-size or change line-height.

At this point, you might want to ask why did I even want to build a new scale if there’s a scale that have been used for centuries? How could I possibly build a better one?

The short answer: I never believed that I could do it better, but I wanted to learn more in-depth what is the foundation of good typography. I’ve always felt that typography is the most crucial part of a design and also the hardest thing to master.

Composing the layout

The first thing I did, is that I forgot pixels and started using EMs for everything. That’s because they give a lot more control for scaling and making the typography responsive. The chromatic scale is also easy to convert to EMs, so there are many arguments to support this decision.

What I basically did first, is that I started testing different combinations and notes that play well together and started adding some calculations to the mix. After about a week of testing the results were quite interesting: No matter what combinations I used, I always ended up having a scale that’s very similar to the centuries old Typographic Scale described in Alex Charchar’s article.

The Typographic Scale

That only covered the various font sizes though, but I added a 1.5em baseline grid into the mix and with the help of that calculated optimal white space needed for the headings, paragraphs and other elements.

The result of all this is the page you are reading right now. It’s using the same “foundation” which I’m going to share later on in this article. If you are eager, then go ahead and grab a copy of it from GitHub and tweak/use it in any way you want. It might not be perfect yet, probably never will, but if it works for you I’m more than happy to share it.

Template viewed at different widths

About the responsiveness

I started with a mobile first approach and wanted to make sure that the content preserves it’s readability from about 200px and up. So not only smartphones, but also feature phones that have slightly smaller screens.

The interesting thing for me is, that the more I build responsive sites, the more the current way of building them feels complex and hard. I can, for example, choose to make a completely fluid layout or a set of static layouts. Or take a mixed approach that has both fluid and fixed widths (but this isn’t really the hard part yet).

There’s also often a lot of “magic” happening inside various Media Queries and we tend (or tended) to think more device widths than what the layout can handle. Things get also interesting when you are building a site that runs on top of a CMS where your client does all the updating and even more so when you start adding advertising and dynamic content into the mix.

I tried to leave all these problems aside when thinking this, but I really couldn’t. The way which I might see myself working in the future is probably somehow based on the way how this template is built. It basically has only one one column layout which just scales up or down. Then the next layout after that—when the screen size is big enough—could be the more complex one, which includes more columns and “richer” experience (isn’t included in this template). So that’s two different fluid/fixed/mixed layouts which we can then scale up or down to create even more responsiveness.

The thing which I kind of like in this approach, is that I’d only have to build one layout for the mobile and one for the desktop and anything in between (or bigger) would just scale. I know that there are more things to consider than just that, but if I could get going with only minimal CSS changes between the Media Queries, let’s say, only the body’s font-size, max-width and maybe some padding, that would be wonderful.

Final layout

Below is the base CSS for the template I came up with. Different CSS declarations are explained below the code.

BTW: If you are using Firefox/Safari/Chrome to read this, and want to see the whole layout in effect, I suggest you to try Safari and install Resizer Extension so that you can see the narrowest layouts with your desktop browser (also a handy tool when building sites).

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body {
  font: 75%/1.5em Georgia, serif;
  max-width: 40.49984em;
  color: rgb(0,0,0);
  margin: 0 auto;
  padding: 1em;
}

@media print {
  /* styles for print */
}

@media screen and (min-width: 15.652em) {
  body {
    font-size: 87.5%;
  }
}

@media screen and (min-width: 19.9375em) {
  body {
    font-size: 100%;
    padding: 1.5em;
  }
}

@media screen and (min-width: 29.9375em) {
  body {
    max-width: 34.3em;
    padding: 1.5em 3em;
  }
}

@media screen and (min-width: 38em) {
  body {
    padding: 4.5em 3em 7.59372em;
  }
}

@media screen and (min-width: 99.9375em) {
  body {
    max-width: 34.43736em;
    line-height: 1.75em;
    font-size: 112.5%;
  }
}

CSS in short: the first layout for feature phones is using 12px base font-size and the max-width and horizontal centering are there for browsers that don’t support Media Queries. Then inside next Media Queries the whole layout starts to scale slightly bigger just by changing the body’s font-size. This works because EMs are always relative to parent element’s font-size and I’m using EMs everywhere instead of pixels.

Simple yet effective. ❦

Viewed on iPhone 4 and Nokia 6303i

Get the code

First and foremost, I should thank Iain Lamb for his exploration of scale and rhythm in typography. He was the one that gave me the idea to base my decisions on the Chromatic Scale. I should also thank Alex Charchar for his article about Typographic Scale.

Then there is the 24 Ways article which I mentioned earlier, where it all kind of started: Music, Harmony, Proportion in Web Design.

[1] Benward & Saker (2003). Music: In Theory and Practice, Vol. I. Seventh Edition. ISBN 978-0072942620.

[2] Excerpt from a Wikipedia article about the Chromatic Scale.

[3] Bringhurst, Robert (2003). The Elements of Typographic Style. Third edition. ISBN 978-0881792065.