I'm a web designer & developer from Trinidad & Tobago, with a degree in Mechanical Engineering. I love the logical side of the web, and I'm an artist/painter at heart. I endorse progressive web techniques, and try to learn something every day. I try to impart my knowledge as much as possible on my personal blog, callmenick.com. I love food, I surf every weekend, and I have an amazing creative partnership with fellow mischief maker Elena. Together, we run SAYSM.

Nick's articles

  1. Are We Ready to Use Flexbox?

    flexible adjective
    1. capable of bending or being bent, able to be easily modified to respond to altered circumstances or conditions.

    box noun
    1. a rigid typically rectangular container.

    The Flexible Box Module, a.k.a. flexbox, is all the latest and greatest at the moment. It digs into the fundamentals of the CSS box-model, providing us with a powerful and highly useful module for layout configurations. It is easily defined in our CSS and markup, and responsive adaptations are just a media query away. Think about a world where we don’t have to clear floats or utilise frameworks or masses of code to create responsive grids. Flexbox does all the dirty work. For us, it’s just a simple implementation. We define a flex container, and in it we have flex items.

    flexbox example

    Exactly What is Flexbox?

    Here’s a definition of flexbox, according to MDN:

    The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

    In simple words, we can mark up a few flex items inside a flex container, and define the layout arrangement with our CSS. We have numerous options when defining our layout arrangement that make possibilities endless. Here are a few:

    1. flex-direction – With this property we can specify if we want the items to be in a row or column, and also if we want the items to be in order of markup appearance or reversed.
    2. justify-content – Let’s us declare how the browser should distribute the available space between elements. In other words, if we have 3 elements at a combined total width of 50% of their container, we can specify whether to pack the elements to the left, right, center, distribute from left to right with an even amount of spacing in between them, along with some other options.
    3. flex-wrap – With this property, we can specify whether we want our flex items to jump to a new line if the flex container runs out of space.

    The points above are just a small sampling of the capabilities of flexbox, and you can get much further insight and documentation by visiting the flexbox guide on MDN. I encourage you to go experiment and get familiar, but I won’t bombard you with any more theory. Let’s look at how flexbox has evolved over the years.

  2. Easy Responsive CSS Grid Layouts: 4 Methods

    These days, there’s a framework for everything, and it seems that before we can even digest one, another one is released. This holds particularly true when it comes to CSS grid layouts, and there’s no shortage of framieworks deemed “the best, most lightweight to date”. This overdose of information can baffle us, and leave us wondering if frameworks like HTML9 Responsive Boilerstrap JS are really the way to go.

    Let’s step back and breathe a bit, and ask ourselves a question: Are we really going to use every one of those 24 variants and the million sub-variants that “That Great Framework” ships with? Often we need only a simple flexible solution with a few variants to work in our project, and with a strong command of the basics we can extend as we see fit. I’m going to present four different techniques for developing your own CSS grid, and each of them are easily extendable. Here are the four methods:

    1. Responsive grid layout, v1 (using negative margins)
    2. Responsive grid layout, v2 (using box-sizing: border-box)
    3. Responsive grid layout using table display
    4. Responsive grid layout using flexbox

    I’m going to simplify these methods by using minimal amounts of easy, understandable CSS. A CodePen demo will be provided with each example, so you can fork and/or play with the CSS in the demos. Let’s dive in.

    Common CSS

    Before we dig in to each method, let’s take a look at some common CSS we’ll use. We’ll be using the box-sizing: border-box declaration universally across our document, and we’ll also implement a .clearfix class for clearing floats. Here’s our base CSS:

    [code language="css"]
    /* resets */
    *,
    *:before,
    *:after {
    box-sizing: border-box;
    }
    .clearfix:after {
    content: "";
    display: table;
    clear: both;
    }
    [/code]

    In case any vendor prefixes are necessary, we’ll be using CodePen’s autoprefixer feature to fill those in for us. Let’s now get into the first of our four methods.

  3. Clearing Floats: An Overview of Different clearfix Methods

    Clearing floats has long been a common necessity in front-end development. It’s no surprise then that over the years, we’ve been exposed to multiple methods for clearing floats, nowadays more commonly known as “clearfix methods”. Before we dig into the various methods, let’s take a look at the problem that clearfix methods attempt to solve.

    The scenario: .el-1 and .el-2 are floated side by side inside a .container element, and there’s a .main element after .container.

    The desired outcome: We want .container to expand to the height of its child elements (i.e. the taller of either .el-1 or .el-2), and we want .main to be after .container.

    The actual outcome: .container collapses and takes on no height at all, as if there is nothing inside it, putting .main in an undesired location and potentially causing any backgrounds or borders on .container to be missing.

    Based on the above scenario, our markup may look something like this:

    [code language="css"]

    A long string of stuff here...
    A short string of stuff here...
    Some stuff here...

    [/code]

    Then our CSS may look something like this:

    [code language="css"]
    .el-1, .el-2 {
    float: left;
    width: 50%;
    }

    .el-1 {
    /* styles for .el-1 here */
    }

    .el-2 {
    /* styles for .el-2 here */
    }

    .main {
    /* styles for .main here */
    }
    [/code]

    Finally, the result is as shown in this demo: