Bulletproof Pixels

Home About Pricing Contact Little HowTos

Little HowTos

Mobile First CSS

After having been using SASS for some time on a project, I got "real used" to the SASS structure, particularly where CSS Media Queries and "mobile first" came in.

First off is the absolute convenience of variables:

$breakpoint-tablet: 600px;
$breakpoint-desktop: 820px;
$font-size-mobile: 18px;
$font-size-tablet: 24px;
$font-size-desktop: 32px;

This makes the SASS nesting feature and media queries simple to use, simple to understand:

.someclass {
  font-weight: normal;
  font-size: $font-size-mobile;
  line-height: 2em;

  @include media-query( $breakpoint-tablet ) {
    font-size: $font-size-tablet;
  }

  @include media-query( $breakpoint-desktop ) {
    font-size: $font-size-desktop;
  }
}

Without that visual simplicity, it took me a bit to wrap my head around achieving the same thing with standard CSS syntax.

The default CSS rules are applied for mobile devices and those that apply to all three contexts. These are applied to all viewport widths from "zero" up to the first Media Query. In this case that would be all viewport widths 0 to 599px.

.someclass {
  font-weight: normal;
  font-size: 18px;
  line-height: 2em;
}

Then it's simply following the same pattern sans the variables and the nesting:

/* tablet */
@media (min-width: 600px) {
  .someclass {
    font-size: 24px.
  }
}

/* desktop */
@media (min-width: 820px) {
  .someclass {
    font-size: 32px.
  }
}

"min-width: 600px" translates as all widths beginning at 600px to 819px.

"min-width: 820px" translates as all widths beginning at 820px and wider.

Update: Since first writing this simple overview of mobile first CSS, I more and more believe that to achieve a truly "fluid" UX (beyond "responsive") more than a couple of breakpoints are required. With that said, the above is just a primer of sorts.

bul • let • proof :

adjective : safe from failure; without errors or shortcomings and beyond criticism; a bulletproof website