Plank

Plank

Contactez-nous
Under the hood Technologie

Under the hood

Under the hood

With the increasing number of responsive sites we build, using em units for typography made the most sense and SASS really simplified the process.

The part of a web project I like best is the beginning. You get the chance to set the project foundation, often choose the technology you're going to work with and brainstorm ways to include all the new (or not so new) shiny techniques and tricks you've been reading about over the last few months. Everyone knows the craziness of the web, so even a week of reading and learning is a lot! This was my experience with building the new Plank site so I will give you a little summary of what technology we used and why.

We wanted our new site to be easily editable, scalable, and have a modern look and feel. We started by choosing WordPress as the CMS. The decision made sense since we already had our blog running on it and we know the system very well. We did hesitate a bit before making a final decision, as we are well aware that WordPress can be really painful to customize.

On the front-end, we'd been using SASS for a couple of months already and I don't think we could ever go back to coding regular CSS. SASS is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. It really helps us keep our CSS clean and lean. The ability to use variables, mixins and functions is priceless. We used a function to convert px to em sizes so that incomprehensible font-size goes back to being legible.

/*
$target-px: value you want to convert
$context: pixel value of 1em
*/
@function em($target-px, $context) {
    @return ($target-px / $context) * 1em;
}

Before

h1 {
    font-size: 3.42857142857143em;
}

After

h1 {
    font-size: em(48,14);
}

With the increasing number of responsive sites we build, using em units for typography made the most sense and SASS really simplified the process.

Something new we wanted to try was to use SASS's little cousin, Compass. Compass is a framework which contains tons of functions and mixins to help you code cross-browser CSS faster and better. We were mostly interested in the CSS3 modules which avoid having to deal with the vendor prefixes. Creating a rounded corner square with a 15 degree rotation is very easy using this technology.

With SASS

.box {
    background-color: #ccc;
    display: block;
    width: 50px; height: 50px;

    @include border-radius(10px);
    @include rotate(15deg, false);
}

Outputted by SASS

.box {
    background-color: #ccc;
    display: block;
    width: 50px; height: 50px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

Compass helped us create cross-browser CSS but also simplified our code. However, I would suggest you get familiar with the syntax and properties of the newest CSS features before using Compass. It's always good to know the ins and outs of a property before using shortcuts.

Of course, most of these SASS techniques didn't help us support old or less modern browsers. We used the very good feature detection library Modernizr to apply different styles to elements, but all the new CSS features like multiple backgrounds, rgba colors, animations and transitions have fallback styles for less capable browsers.

We also made sure the HTML we wrote was semantic. We even added an extra layer of meaningful data with Microformats to ensure that robots read and index our content properly.

Browsers are slowly supporting more and more HTML5 APIs, and we wanted to take advantage of it. With a lot of the site content loaded with Ajax, we needed to be sure we could deep-link to all the specific states of a page. This would also create permalinks that would be indexable by search engines. Thankfully the HTML5 History API allowed us to change the page URL on the fly, which created a unique link for each state. We used the plugin jQuery Address to support older browsers.

There's a lot more things I could list, but I'll let you discover it for yourselves with the good old fashioned View Source or Inspect Element. If you're a front-end developer, I'm sure you've already looked at it!

Any suggestions for what I can try for our next project?

Commentaires

  1. Yeah, yeah really great tech stuff, but all I’m interested in is how you made the ladybug fly. Love that little guy. I wish your site loaded slower.

    • This, my friend, is a very good question. We used an old technology once forgotten, that has seen a lot of hype in the last years. It’s called an animated GIF :) 2 frames. ON-OFF.

  2. Having worked at Plank for 5+ years, I am proud / embarrassed to say I understand none of this..

    But the front end looks awesome, so félicitations JF et al

Un moment, svp...

Plank