Design in the browser

TLDR

  1. Photoshop speaks lies

  2. Don’t give up on semantics

  3. Spend more quality time with your text editor

Realistic Expectations

For clients

For you

Good markup is good design

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

Rams’ ten principles of “good design”

  1. Is innovative

  2. Makes a product useful

  3. Is aesthetic

  4. Makes a product understandable

  5. Is unobtrusive

  6. Is honest

  7. Is long-lasting

  8. Is thorough down to the last detail

  9. Is environmentally friendly

  10. Is as little design as possible

CSS is filling out nicely

There are some antipattens brewing

Why use Sass?

CSS nitty griddy

.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}

Sass that produces the same results

@for $i from 1 through 24 {
  .span-#{$i} {
    width: $i * 30 + 10 * ( $i - 1 );
    @if $i == 24 {margin-right:0px;}
    @else{margin-right:10px;}
  }
}

Why stop there?

$columns: 24;
$column-width: 30px;
$gutter-width: 10px;
@for $i from 1 through $columns {
  .span-#{$i} {
    width: $i * $column-width + $gutter-width * ( $i - 1 );
    @if $i == $columns {margin-right:0px;}
    @else{margin-right:$gutter-width;}
  }
}

Sure, that’s clever, but…

Grids from mixins

@mixin column($columns, $last: false) {
  width: ($column-width * $columns) + ($gutter-width * ($columns - 1));
  @if $last != true {
    margin-right: $gutter-width;
  }
}

@mixin padded-column($columns, $border-width: 0px, $last: false){
  width: ($column-width * $columns) + ($gutter-width * ($columns - 1));
  padding: $column-padding;
  margin-top: $gutter-width - $column-padding - $border-width;
  margin-bottom: $gutter-width - $column-padding - $border-width;
  margin-left: -($column-padding + $border-width);
  margin-right: -($column-padding + $border-width);
  @if $last != true {
    margin-right: $gutter-width - $column-padding - $border-width;
  }
}

How do you use that?

div[role="main"]{
  @include column(2.5);
  padding-left: ($column-width + $gutter-width)  * .25;
  padding-right: ($column-width + $gutter-width)  * .25;
  padding-top:1em;
  background:rgba(0,0,0,.2);
  float:left;
}

body>aside{
  @include column(1.5, true);
  padding-left: ($column-width + $gutter-width) * .25;
  padding-right: ($column-width + $gutter-width) * .25;
  display:block;
  float:left;
  background:rgba(0,0,0,.5);
}

A real layout sketch

Layout Sketch

HTML version

Layout Sketch

Quick change

Layout Sketch

Is it bullet proof?

No!

That’s where compass comes in

A pretty slick button

@mixin clean-pill-button($background: #666, $height: 48px){
  $shadow: darken($background, 20%);
  background: $background;
  @include background-image(linear-gradient(rgba(255,255,255,.6),
                                            rgba(255,255,255,.4) 50%,
                                            rgba(255,255,255,0) 50%));
  @include box-shadow($shadow 1px 1px 3px,
                      inset lighten($background, 50%) 0px 1px 0);
  color: #fff;
  border: solid 1px $shadow;
  height: $height;
  padding-left:24px;
  padding-right:24px;
  @include border-radius($height/2);
  @include text-shadow($shadow -1px -1px 0);
  &:hover{
    @include text-shadow(none);
    @include box-shadow(inset lighten($background, 20%) 0px -1px 0);
    @include background-image(linear-gradient(rgba(255,255,255,.4),
                                              rgba(255,255,255,.3) 50%,
                                              rgba(255,255,255,0) 50%));
  }
}

What that looks like

Visual helper for your grid

$grid-background-total-columns: 10;
$grid-background-column-width: 68px;
$grid-background-gutter-width: 24px;
$grid-background-baseline-height: 24px;
$grid-background-offset:24px;

body{ @include grid-background();}

Serve

Minimal Drupal theme

Tools

More Reading

Thanks!

← →

/

#