Using Foundation Modular Scale in em

For a new project i use the amazing Foundation framework to build an large responsive website. And i love it! The framework includes the modular scale approach by Tim Brown. You’ll find more informations here: http://foundation.zurb.com/docs/typography.php

A drawback for responsive websites is, that Foundation using px to define all font sizes. But we want different font-sizes for different devices and screens. So we have to teach Foundation to speak in em. And that’s the way:

1. Define the modular scale parameters

Set the variables in your _settings.scss file

$ratio: 1.5;
$baseFontSize: 14px;
$importantModNum: 40px;
$base-size: $baseFontSize $importantModNum;

and add these variables for the modular scale function by Scott Kellum.

$round-pixels: false;

The last variable is missing in the Foundation settings file. But it doesn’t work correctly without. By default all numbers are floored and that means sometimes you get identical values back.

2. px2em function

The modular scale function returns only px values. You need a simple SASS function to convert px to em:

@function px2em ($font_size, $base_font_size: $baseFontSize) {
  @return ($font_size / $base_font_size) + em;
}

I used my px2em function and just change the base-font-size variable. In your .scss files use now px2em(ms(0)) for example to get 1em and px2em(ms(2)) to get 1.5em. Here is a list of all values depending on my parameters: http://modularscale.com/scale/?px1=14&px2=50&ra1=1.5&ra2=0

3. Reset all font sizes to em

Last of all you must change the Foundation font settings to em. By default it’s your $baseFontSize. Just add this line in your app.scss:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td, section, article, footer, header, nav {
   font-size: 1em;
}

and set

html {
   font-size: $baseFontSize;    
}

After that you can write your media queries for example like that to increase the font size on very large screens:

@media only screen and (min-width: 1441px) { /* aka very large */
    html {
        font-size: 18px;
    }
}

Here you can check some different modular scale values: http://modularscale.com/

Icon CSS with SASS

If you want icons for buttons, links, info text or something else on your website the best way is to use an icon sprite as background image. So just one image for all is needed. But sometimes it’s a mess to handle all the different pixel positions. Lets get SASS do the work.

1. Step: The icon sprite

Important for the sprite are the grid and the alignment of every single icon. At this example the grid is 20x20px.

2. Step: Get the right icon position

To get the position of every icon a SASS function is used.

@function get_icn_bg_pos ($pos-x: 0, $state: default) {
  $pos-y: 0;
  $raster-x: 20;
  $raster-y: 20;

  @if $state == default {
    $pos-y: 0;
  } @else if $state == link {
    $pos-y: 0;
  } @else if $state == visited {
    $pos-y: 0;
  } @else if $state == focus {
    $pos-y: 1;
  } @else if $state == hover {
    $pos-y: 1;
  } @else if $state == active {
    $pos-y: 2;
  } @else if $state == current {
    $pos-y: 2;
  } @else if $state == primary {
    $pos-y: 2;
  }

  @return (-$raster-x * $pos-x) + px (-$raster-y * $pos-y) + px;
}

This function returns the pixel for the background position dependent on the icon position in the sprite and the state of the element (link for example). Possible states are link, visited, focus, hover, active and current for links and default and primary for non active elements. The grid is defined in the function. With icon position and grid it’s easy to calculate the top / left pixel position.

3. Step: The main CSS

Just two classes for icons before or after the element content.

.icn_before:before, .icn_after:after {
  content: '';
  height: 20px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  background: url('images/icon_sprite.png') no-repeat;
}

4. Step: Generate the single icon CSS

At first a list of all icons in the right order:

$icons: like, comments, love, message;

Finally just a little loop to generate the CSS for all states:

$i: 0;
@each $type in $icons {
  .icn_before.#{$type}:before, .icn_after.#{$type}:after {
    background-position: get_icn_bg_pos($i);
  }
  a.icn_before.#{$type}:link:before, a.icn_after.#{$type}:link:after {
    background-position: get_icn_bg_pos($i, link);
  }
  a.icn_before.#{$type}:visited:before, a.icn_after.#{$type}:visited:after {
    background-position: get_icn_bg_pos($i, hover);
  }
  a.icn_before.#{$type}:focus:before, a.icn_after.#{$type}:focus:after {
    background-position: get_icn_bg_pos($i, focus);
  }
  a.icn_before.#{$type}:hover:before, a.icn_after.#{$type}:hover:after {
    background-position: get_icn_bg_pos($i, hover);
  }
  a.icn_before.#{$type}:active:before, a.icn_after.#{$type}:active:after {
    background-position: get_icn_bg_pos($i, active);
  }
  .current.icn_before.#{$type}:before, .current.icn_after.#{$type}:after {
    background-position: get_icn_bg_pos($i, current);
  }
  .primary.icn_before.#{$type}:before, .primary.icn_after.#{$type}:after {
    background-position: get_icn_bg_pos($i, primary);
  }
  $i: $i + 1;
}

$i is the position of the icon in the list as a number.

5. Step: The HTML markup

<span class="icn_before message primary">100</span>

Now, if a new icon is needed, just replace the icon sprite and change the $icons list.
That’s all!

Again thanx to Kosmar for brainstorming.

SASS border-radius mixin

This SASS mixin makes it easy to generate the CSS code for a border radius on all corners, upper corners or bottom corners of an element. Also the different -moz- prefix is supported. Thanx to Kosmar for brainstorming.

More informations about border-radius: http://www.css3.info/preview/rounded-border/

@mixin border-radius($top_right, $bottom_right: $top_right, $bottom_left: $bottom_right, $top_left: $top_right)
  border-top-left-radius: $top_left
  border-top-right-radius: $top_right
  border-bottom-right-radius: $bottom_right
  border-bottom-left-radius: $bottom_left
  -moz-border-radius-topleft: $top_left
  -moz-border-radius-topright: $top_right
  -moz-border-radius-bottomright: $bottom_right
  -moz-border-radius-bottomleft: $bottom_left

Usage:

@include border-radius(10px)

to create the CSS code for a border radius of 10px for all corners.

@include border-radius(10px,0)

to create the CSS code for a border radius of 10px on the right and left upper corner.

@include border-radius(0,10px)

to create the CSS code for a border radius of 10px on the bottom right and left corner.

SASS function px2em

Just a little SASS helper to convert px to em during writing CSS.

@function px2em ($font_size, $base_font_size: 16)
  @return ($font_size / $base_font_size) + em

Usage:

article
  font-size: px2em(20)

Is compiled to:

article {
  font-size: 1.25em;
}

and

article
   font-size: px2em(20,20)

Is compiled to:

article {
   font-size: 1em;
 }