Looping Sass Arrays

Whilst I prefer a fluid approach to website building, occasionally something more rigid is required. In these happy times I turn to a handy technique using a few fudged Sass/SCSS associative arrays (technically multiple lists) to easily maintain those fiddly fixed-width menus.

Given some HTML hooks;

<nav>
    <ul>
        <li class="home"><a href="/home">Home</a></li>
        <li class="about"><a href="/about">About</a></li>
        <li class="blog"><a href="/blog">Blog</a></li>
        <li class="contact"><a href="/contact">Contact</a></li>
    </ul>
</nav>

We create our SCSS lists like so… (it's helpful to tab line everything up)

$nav_section: home about blog contact;
$nav_widths: 80 120 100 140;
$nav_colors: red yellow blue green;

Then using a loop with a counter to reference those different collections using nth(), we can set the width, change the colour, or nudge the background position of a sprite.

$i:1;
$bg_position: 0;

nav {
    li {
        @each $section in $nav_section {

            &.#{$section} a {
                width: nth($nav_widths, $i) + px;
                background-color: nth($nav_colors, $i);
                background-position: -$bg_position + px 0px;
            }
            // add width to position counter
            $bg_position: $bg_position + nth($nav_widths, $i);

            $i: $i+1;
        }
    }
}

Producing the following CSS

nav li.home a {
  width: 80px;
  background-color: red;
  background-position: 0px 0px;
}
nav li.about a {
  width: 120px;
  background-color: yellow;
  background-position: -80px 0px;
}
nav li.blog a {
  width: 100px;
  background-color: blue;
  background-position: -200px 0px;
}
nav li.contact a {
  width: 140px;
  background-color: green;
  background-position: -300px 0px;
}

I've whacked this code in a gist for easy consumption;
https://gist.github.com/3737271

I’m No Slacker, Just Self-employed.

Having recently changed my employment status from Safely Employed to the altogether more distressing Scarily Self-Employed, it’s true, I even changed it on which is all business, I want to explain my reasons.

A mostly selfish endeavour (that’s blogging for you) this post might also serve those wondering why a thirty something husband & mortgage holder might swap a stable income for a life of perpetual worry.

The wise and/or married amongst you might also wonder how I convinced Sarah. But I digress; What follows is my account of the reasoning. I’m sticking to the story.

Who needs training wheels?

Starting out, the employee safety net is a wonderful thing; It protects you from bad judgements and creates space for you to learn. It’s why I’m immensely grateful to Designition (who are hiring btw). Now clearly I’d be foolish to think my mistakes made, but I’m no fool and I believe I’ve made most of the big ones.

I’m aware my work will not be perfect, but I want full responsibility for it. To live and die by its quality. I’m not saying all employees need training wheels, just that I’m ready to lose mine and I believe my life and work will be the better for it.

A rhythm of your own

Given that statements of this ilk could easily contribute to the freelancer in pants cliché, which I might add, defending yourself against is possibly the worst part of being self-employed … I want to clarify a little.

I think we all know the point of no return in a day. The point when the coffee no longer works, no matter how meticulously prepared. The point when you are barely more than going though the motions, mostly checking Twitter, or in particularly severe cases, Facebook.

Being self employed lets you work within your capabilities; I work intensely and can easily burn myself out working 8 hours in a sitting. This means I structure my day into shorter bursts including gaps long enough to be suspicious in most work environments.

Clearly this approach doesn’t prevent Facebook from ever happening. But you have another out; Stopped being effective? Do something completely different; Go outside, exercise. Come back and make up the time later. You might even solve a few of your problems doing that anyway.

It’s not all standing desks in the sunshine

Although that is actually happening right now, self employment isn’t all rosy. Like much of life; the negatives are just the flip side of the good bits.

Personally I’m looking for balance. I’ll let you know how I get on.

Seeing Faces Everywhere

Our brains are hardwired to attribute human features and behaviour to many things we know not to have them. From pets (they really aren't clever), to abstract things like countries, simple things like plug sockets, and the UI of digital products.

Despite being able to rationally detach these human characteristics, we can't help but see them anyway. We see faces everywhere we look.

Steven Urmston - Freelance Web & UI Designer

This condition (anthropomorphism for those who like to sound clever) can be used by designers to give inanimate objects personality and to guide a positive user experience around digital products and services, which we not only come to see as allies, but in many cases as friends.

Can you imagine treating this little dude as you might treat your desktop printer? (which in my case is a toxic combination of disdain and rage)

Steven Urmston - Freelance Web & UI Designer

Or throwing a cup this cute in a non-recycling bin?

Steven Urmston - Freelance Web & UI Designer

Nope though not. These designs can strongly infulence our reactions and behaviour toward the objects around us.

So, should I draw a face on my next website? Yes this is a rhetorical question. Clearly there are levels, and not everything needs a face.

I’ve made use of this in my own work in more subtly ways, recently on a website for Cliff Design where the open/close functionality uses animation to transform a 50 pixel green square into a little character who fetches content at your call.

Steven Urmston - Freelance Web & UI Designer

I did experiment using an face instead of the text and arrow combination, but found it wasn't required, the character coming from the animation (as well as making the functionality less obvious).

What am I taking home here?

This is a powerful technique to infulence people's behaviour. It can be used subtly, or overtly, but should be used carefully as it could easily become a turn-off. It could also just be an unecessary distraction.

What is certain is that we are going to see a lot more of this, and (like any overused technique) we could find ourselves in the middle of a backlash.

Percentages & Pixels Sitting in a Tree

When building a properly responsive layout, gutters set in % become inappropriately sized at both large and small window sizes. Using some simple and pretty well supported CSS (IE8+) we can damn well fix that.

The obvious CSS for a liquid layout might be something like this;

.sidebar {
    width: 20%;
    padding-left: 10%;
    float: left;
}
.content {
    width: 60%;
    padding-left: 10%;
    float: left;
}

The problem being; at iPad size the gap between columns is too small, and on your shiny new cinema display, it's gonna be too damn big!

Are we just gonna take this?

(Hell no)

What we actually need is the IE6 box model in Quirks mode, and (here's one I prepared earlier!) CSS has that very option!

.sidebar, .content {
    box-sizing: border-box;
    padding-left: 24px;
    float: left;
}
.sidebar {
    width: 30%;
}
.content {
    width: 70%;
}

This is gonna to give us a liquid layout, with fixed pixel gutters.

To be fair this isn't perfectly supported. It requires the following prefixes;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

and doesn't work in IE7 (although there is a polyfil for that).

Only you can decide how much of a problem this is, although I would say is that if you are using this technique for fluid responsive websites, serve it up inside a media query and the poor little devil gets fat nothing.

There is an alternative; using display: table which does actually emulate this behaviour, but although this property is slightly better supported, I've found it to be a little unhelful due to additional effects; accessibility problems and jQuery issues.

Can we do better than pixels?

We could use alternative pixel padding values within a series of media queries, so we could make use of the space afforded by larger screens with appropriate padding.

My personal preference however is to set gutters in ems, and control the gutter widths using the base font size.

body {
    font-size: 16px;
}
@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}
/* and onwards */

.sidebar, .content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 2em; /* either 32px, or 36px */
    float: left;
}

Boom.

Bacon In The Sky ... With Diamonds.

Hot damn I've only launched a personal website! As something of a serial scrapper, I've burnt through my fair share of designs, all preferable to the fat nothing my domain has worn for the last 5 years.

Recently I've begun to consider why I even want a website, and I believe this thought process has tipped me over the edge. Thus as an eternal reminder of my own personal solution to scrapping, I shall now scratch my reasons into this HTML.

Learn by doing

I want to experiment with the bleeding edge techniques which I love about my job (more to come, but responsive and SVG are go). I shall also improve something I feel is a weakness; my writing, which whilst not a disaster, needs the polish which only consistently doing can bring.

Make waves

No, not that kind. The Web is constantly shifting. I will use Clearbar to document the work I am proud of, before it's inevitable demise.

Give something back

I've been making websites for about a decade, during which time I've consumed vast quantities of content, created by supremely talented people. Yet I never contribute, I don't even leave comments.

This will change. Hold me to it.