HTML 5

CSS 3/Sass

jQuery

PHP

Portfolio

Brand & Website Design / Development

My portfolio was designed and built with an emphasis on content to showcase my past and current work. The article below details the workflow I used to manage the website styles using BEM, OOCSS and SMACSS for Sass.

in_browser
01
Concept

Making the Content Matter

A professional portfolio is a necessity for anyone working in the creative industry. It is a good opportunity to show my work in a medium that actually showcases the work I really do: web design and web development. In building my portfolio, my main goal was to create a simple design that would facilitate the work of a potential employer who wishes to form a quick impression.

The portfolio site itself should fade into the background and act as a frame for the work I am presenting. Therefore, like for most websites in general, the content should be king, with beautiful images and texts that should be accessible regardless of the screen size, or browser it is viewed on.

02
Design

Visual Simplicity

I chose colors that will give the website a high contrast in order to bring focus to the content.

img-project-center

Color palette of the website.

All of the pages of the website follow the same layout principle. They are divided into two sections; one side is shows additional information, the other, the main information of the page. This principle is then to decline on the different pages to avoid repetition.

For example, the Homepage is divided into two parts and the main content is emphasized using color contrast. On the contact page, a focal point is created by using proportion differences, the main content being larger than the additional information.

These design choices allow me to build simple, but well organized, pages that emphasize the content while also allowing for a more modular approach when developing the website.

img-project-center

An example of user interaction: the contact form.

03
Code

A Modular Approach

If content is king for a web designer's perspective, for a web developer, however, some may argue that speed is king. Unfortunately, CSS is often overlooked in this area while many front-end developers focus largely on JavaScript performances.

To help improve my CSS development process, for this project I decided to try a different approach to Styling using some of the most popular methods for writing modular HTML and CSS the BEM method (Block, Element, Modifier), the OOCSS method (Object oriented CSS) and the SMACKS method (Block, Element, Modifier). I used these methodologies along with SCSS.

BEM

The BEM methodology is all about modularity, each element of the page that is used more than once can become a module. To become a module, an element needs to be structured and styled in a specific way:

  • Containers need to be separated from the module itself, so that it can be moved anywhere on the page without breaking the layout.
  • The classes name needs to reflect the function of the element and must follow the BEM naming convention.

                    <nav class="wrapper__lang--left">
                      <ul class="lang">
                        <li>
                        <a class="lang__label">
                          <span class="lang__icon icon-cross-small"></span>
                          <span class="lang__selected"></span>
                        </a>
                          <ul class="lang__dropdown">
                          <li class="lang__dropdown--items" ><a href="">fr</a></li>
                          <li class="lang__dropdown--items" ><a href="">en</a></li>
                          <li class="lang__dropdown--items" ><a href="">jp</a></li>
                          </ul>
                        </li>
                      </ul>
                    </nav>
                  

The container wrapper__lang--left position the module block Lang in the page. It is styled separately from the module itself so it can be used in different contexts. The module lang elements are named according to their function and preceded by a double underscore __dropdown. The modifier of an element is marked by a double dash followed by its name --items.

Using SCSS, the module styles are then stored in a SCSS file simply called lang that is organized according to the module HTML structure.


                   .lang {
                         position:relative;
                         z-index: 4;
                         width:27px;
                         height:41px;
                         margin: 0 auto;
                         cursor:pointer;

                             @include e(label) {
                               @extend %lang__label;
                               z-index: 2;
                               border: 3px solid $black;
                               span{font-family: $font-family--primary--regular;}
                              }

                             @include e(icon) {
                               @include absolute(top -6px left 4px);
                               @extend %lang-span;
                               width: 13px;
                               opacity: 0;
                            }

                            @include e(selected) {
                              @include transform(rotate(45deg));
                              display: block;
                              margin-left: 3px;
                              font-size: 13px;
                              line-height: 21px;
                              text-align: center;
                              @include m(projects){color:$white;}
                            }

                            @include e(dropdown) {
                              @include center-axis(x);
                              @include absolute(top -25px);
                              display: none;
                              padding: 40px 11px 9px;
                              background-color:$black;

                              @include m(items) {
                                position:relative;
                                width:50px;
                                height: 33px;
                                margin-bottom: 5px;
                                margin-top: 5px;
                                text-align:center;
                          }
                  }
                }
                

All of the JavaScript code that affects that element is also organized in a file called lang. The module is, therefore, self-contained and can be added, removed, or modified easily without breaking the layout or the code, allowing for a more flexible, scalable, and maintainable code.

OOCSS

As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.

OOCSS is based on one main principle, the separation of skin and structure. Almost every element on a styled web page has different visual features (“skins”) that are repeated in different contexts. For example, the color or the text styles. When these features are abstracted into class, they become reusable and can be applied to any element and have the same basic result. When developing my portfolio, I used this principle for many elements like the colors, the buttons, the headlines, etc

For example, here is how the paragraphs styles are defined:



                 .para {

                 @include e(large) {

                     @include m(dark) {
                       @extend %para;
                       color: $gray;
                       @include trailer(1);
                    }

                    @include m(light) {
                      @extend %para;
                      color: $blue--x-light;
                      @include trailer(1);
                    }
                }


                @include e(meduim) {

                    @include m(dark) {
                      @extend %para-medium;
                      color: $gray;
                      @include trailer(1);
                    }

                    @include m(light) {
                      @extend %para-medium;
                      color: $blue--x-light;
                      @include trailer(1);
                     }
                  @extend %para-medium;
                }


                @include e(xsmall) {

                    @include m(dark) {
                      @extend %para-xsmall;
                      color: $gray;
                      @include trailer(1);
                      text-shadow: 1px 1px $black;
                    }

                    @include m(light) {
                      @extend %para-xsmall;
                      color: $blue--light;
                      @include trailer(1);
                      text-shadow: 1px 1px $black;
                    }
                    @extend %para-small;
                }

                

All of the styles are contained inside a class "para", which is itself a module, all of the different font sizes are stored as an element of that module, and the color variations of a specific size are stored as a modifier. The common styles are combined into a reusable “skin” and nothing is unnecessarily repeated. I just need to apply the “skin”, for example the class para__large--dark to all the elements and the result will be the same.

SMACSS

At the very core of SMACSS is a way to categorize CSS rules. For this project I used six types of categories:

  • Base
  • Layout
  • Elements
  • Module
  • Settings
  • State
  • Vendors

The purpose of this categorization is to identify patterns that repeat themselves within the design, therefore, limiting repetition resulting in less code, easier maintenance, and greater consistency in the user experience. My workflow was powered by Grunt.js to provide automated tasks such as SCSS preprocessing, image and SVG optimization. I also used require.JS to organize and optimize my JavaScript files.

Conclusion

Thanks to this project, I was able to explore modularity using principles like OOCSS, SMACSS and BEM and take advantage of SCSS to create better organized stylesheets. This new approach to CSS styling will be particularly useful in future large-scale projects.