DEV Community: Steven Roberts

Grid Tutorial - The Holy Grail (of) Layout

Steven Roberts — Mon, 28 Oct 2019 09:47:53 +0000

Originally published in Web Designer Mag: March 2017

Code: http://codepen.io/collection/DEgogB/

The idea here is to build the holy grail layout in Grid, but obviously it needs to be responsive. In case you don't know the holy grail layout is a header, a left sidebar, content area, right sidebar and then a footer. The code to accomplish this complex layout is pretty short and really easy to follow and understand, the syntax and new properties in Grid are not only simple but somehow elegant.

Just as a bonus, we've also got that much asked for feature of the footer being at the bottom of the viewport when the content isn't long enough to fill it. With a little help from the minmax() function.

As this demo is built using Grid you may need to turn on the appropriate browser flag until Grid is fully supported.

Step One - The HTML

As always, you can't style elements that don't exist. So we have a containing div with the class of grid and inside that the five elements we need to create our holy grail layout, <header>,<article>,<aside>x2 and <footer>. Then added the class of grid-item to each of the elements and added a class to the sidebars to differentiate them in the CSS. Drop in the header from the last tutorial if you like too, Grid and Flexbox get along just fine.
(http://codepen.io/matchboxhero/pen/pRLwJY)

Step Two - Named Areas

Jumping into the CSS we're going to start naming our elements to create a grid template. Mobile first, we will create our grid template. It's worth noting that you can have the grid-template-areas property span multiple lines in your CSS to represent the rows, allowing you to literally (ASCII style) describe the layout of your grid.

.grid {
    display: grid;
    grid-template-areas:
        "header"
        "article"
        "left-sidebar"
        "right-sidebar"
        "footer"
    ;
    grid-template-columns: 1fr;
}

As you can see we have literally described in our template the layout we want the grid to use. We have also defined how many columns we want we setting it to 1fr we're saying, there is one column and it should span the whole available width.
(http://codepen.io/matchboxhero/pen/ggeRPv)

Step Three - Responsive

The next step is to start adding media queries to redefine the grid template at a certain breakpoint. Since we want the layout to now have two columns in the middle we need to define these. At this breakpoint we want the header to span the entire first row and the footer the last;

@media (min-width: 540px) {
  .grid {
        grid-template-areas: 
            "header header"
            "left-sidebar article"
            "right-sidebar right-sidebar"
            "footer footer"
        ;
        grid-template-columns: 1fr 2fr;
  }
}

By repeating the name of the area Grid knows the element should span two columns, you can also do the same thing with rows. The left sidebar and article are being split into thirds, one third being applied to the sidebar and two thirds the article.
(http://codepen.io/matchboxhero/pen/VPXWmW)

Step Four - Wow, really?

Now we repeat the previous step but change some of the values, so at a larger breakpoint the article and sidebars will all be on the same row.

@media (min-width: 1200px) {
  .grid {
        grid-template-areas: 
            "header header header"
            "left-sidebar article right-sidebar"
            "footer footer footer"
        ;
        grid-template-columns: 1fr 3fr 1fr;
  }
}

The grid-template-areas property can override the order of the DOM allowing for any layout you can dream up and the ability to change and reorder it, every 50px if you want to. Please don't, but you could.
(http://codepen.io/matchboxhero/pen/KaoqGK)

Step Five - Bonus round

That's it, the holy grail layout built in Grid with 2 simple media-queries. Just as a bonus lets make the footer sick to the bottom of the page when there is not enough content to fill the viewport. We accomplish this by first applying a minimum height to the grid of the viewport height, that works but the header and footer are stretched vertically to fill the leftover space. We can use the minmax() function to stop the header and footer from expanding by defining the grids rows.

.grid {
    min-height: 100vh;
    height: 100vh; /* required by chrome */

    grid-template-rows: 
        minmax(min-content, max-content) 
        auto 
        minmax(min-content, max-content)
    ;

}

Using the min-content and max-content keyword values inside the minmax() function we've told the header and footer not to grow into the available space, allowing the middle row to use all of the extra space.
(http://codepen.io/matchboxhero/pen/JELoxx)

ALL CODE

header {
  grid-area: header;
}

.left {
  grid-area: left-sidebar;
}

.right {
  grid-area: right-sidebar;
}

article {
  grid-area: article;
}

footer {
  grid-area: footer;
}

.grid {
    display: grid;
    min-height: 100vh;
    height: 100vh;
    grid-template-areas:
        "header"
        "article"
        "left-sidebar"
        "right-sidebar"
        "footer"
    ;
    grid-template-columns: 1fr;
}

@media (min-width: 540px) {
  .grid {
        grid-template-areas: 
            "header header"
            "left-sidebar article"
            "right-sidebar right-sidebar"
            "footer footer"
        ;
        grid-template-columns: 1fr 2fr;
  }
}

@media (min-width: 1200px) {
  .grid {
        grid-template-areas: 
            "header header header"
            "left-sidebar article right-sidebar"
            "footer footer footer"
        ;
        grid-template-columns: 1fr 3fr 1fr;
  }
}

.grid-item {
  padding: 24px;
}

SASS: Mixins, Loops and Functions

Steven Roberts — Mon, 21 Oct 2019 15:49:29 +0000

Originally published in Web Designer Mag: July 2017

Make SASS do the repetitive work for you

SASS is powerful tool which brings many features from other programming languages into CSS — such as functions, variables and loops — as well as bringing its own intuitive features such as mixins, nesting and partials to name a few.

Today we'll be creating social icons using SASS loops, mixins and functions. We'll also be utilising the powerful nesting available in SASS.

We'll be creating a list in SASS to generate our social icons, the list will consist of — at first — the classname, font reference and colour — and later the tooltip. We'll be using mixins to create reusable Media Queries and creating a function to turn a pixel value into an em value, to do this we'll also be creating a variable for our base font-size.

There are a number of ways to install and use SASS depending on your system and your build tooling needs — more details can be found here http://sass-lang.com/install — however we'll be using CodePen to compile our SASS into CSS to keep things as simple as possible.

To truly harness the power of SASS and not get yourself into a mess of specificity and complexity a solid understanding of CSS is required.

The particular flavour of SASS we'll be using is SCSS, meaning we'll still be using the curly braces ({}) in our SASS.

Step One - Codepen Setup

The first thing we'll need to do is create a new pen (https://codepen.io/pen/) and change some of the default settings for the CSS editor in CodePen. We'll change the CSS Preprocessor to SCSS and turn on Normalize and Autoprefixer.

CodePen CSS setup

Step Two - HTML Setup

Now we've set everything up we can start writing some code. Inside the HTML editor we'll create a container and a number of items inside containing the link and icon for each of our icons. The names used here will be used in our SASS list as a reference in CSS. We'll also be using the BEM naming convention for our class names.

<div class="social__container">   
    <div class="social__item">
        <a target="_blank" href="..." 
            class="social__icon--twitter">
            <i class="icon--twitter"></i>
        </a>
    </div>
    ...
</div>

Step Three - Basic Styles

Moving over to the CSS editor we'll start by including font-awesome, setting a variable for our base font-size and some basic styles for the page.

@import url(http://srt.lt/w8yT8);

// Variables
$base-font-size: 16px;

// Basic Styling
body {
    font-size: $base-font-size;
    ...
}

Step Four - Functions

Next we'll create a basic function to turn a pixel value to an em value using our $base-font-size variable. Functions in SASS are created using @function followed by the name of the function and the input used to perform the function. Then inside the declaration we use @return to output the value when using the function. The #{} surrounding the calculation is used for interpolation (http://srt.lt/g9p6Q4).

// Functions
@function px-to-em($pixels) {
    @return #{$pixels/$base-font-size}em;
}

Step Five - Mixins

Continuing on with our set-up we'll create mixins for simple mobile first media-queries utilising our px-to-em function which we will pass in a px value to return an em value.

Mixins are created using @mixin followed by a name for the mixin. Then inside the declaration we use @content to output the code we put inside the mixin when calling it later in our codebase.

@mixin viewport--large {
    @media only screen and 
        (min-width: px-to-em(1680px)) {
        @content;
    }   }
@mixin viewport--medium {
    @media only screen and 
        (min-width: px-to-em(1080px)) {
        @content;
    }   }

Step Six - SASS List

The last step in our setup is to create a list. Lists in SASS are created using a variable, after that the exact syntax is pretty loose, accepting a wide variety of ways to define it (http://srt.lt/aD5e8C). Inside the variable we'll define the class name, unicode value and colour for each icon, separating them with a comma, inside parentheses.

$icon-list: (
    vimeo "\f27d" #1ab7ea,
    twitter "\f099" #1da1f2,
    ...
    github "\f113" #333,
    rss "\f09e" #f26522
);

Blob

Source the icons and colours
In order to find the icons unicode values in font-awesome we can use the FontAwesome cheat sheet (http://fontawesome.io/cheatsheet/) and look for the values next to each icon. In order to find the correct hex code for each button we can use the BrandColors (https://brandcolors.net/) website.

Step Seven - Ducks in a Row

In order for our social icons to display in row we'll add some simple CSS to each of their containers.

.social__item {
    display: inline-block;
    margin-right: 0.05em;
}

Step Eight - Icon Style

To minimise the amount of CSS we output we'll be using a CSS3 selector to find all classes beginning with icon and create a shared style for them.

[class^="icon"] {
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

Step Nine - Style Button Backgrounds

Using the same method we'll do the same for the buttons defining our values in em, allowing us later to resize them using the container.

[class^="social__icon"] {
    font-size: 1em; width: 2em; height: 2em;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;    }

Step Ten - @each Loop for our Icons

Now we have all our base styles we can use our list to generate the CSS specific to each icon. To create a loop in SASS we use @each followed by names for each value of each item — $icon,$unicode and $icon-background — followed by the word in and then the name of the list.

Inside the loop we'll apply the $unicode value to the before pseudo element of each icon we've created in the HTML allowing our shared style we created earlier to take care of all the other styles needed.

@each $icon, $unicode, $icon-background 
in $icon-list {

    .icon--#{$icon} {
        &::before {
            content: $unicode;
        }
    }

}

We've used our loop to generate the icons for each of our social icons.

Step 11 - @each Loop for our Background Colours

The icons are now all working but we still have the fallback background colour. We'll add some more code to our list to fix that. Using the same method as above we'll output the $icon name but this time on the social__icon classes and inside that the $icon-background colour.

@each $icon, $unicode, $icon-background 
in $icon-list {

    ...

    .social__icon--#{$icon} {
        background-color: $icon-background;
    }
}

We've added the background colours as well as the icons to our @each loop.

Step 12 - Using our mixins

Using the mixins we created earlier and because we styled the icons using em values we can apply a font-size to the container and increase it using our media-query mixin using @include and the name of the mixin followed by the code we want to include in the media-query.

.social__container {
    font-size: 1em;

    @include viewport--medium {
        font-size: 1.5em;
    }
    @include viewport--large {
        font-size: 2em;
    }
}

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width.

Tip

Functions
Functions in css are used to return a value, usually after performing a calculation, functions can be used to perform common calculations, they can accept multiple input values to be used as part of the calculation inside the function.

In Depth

Mixins in depth
Mixins can be defined requiring input or not — for example we could create a mixin for a simple clear fix, requiring no input at all which you can simply call is using @include clearfix; — although this could also be achieved using a silent class, created using a % selector and called using @extend.

More complicated mixins can be created requiring some input or content to be passed to them when being called — for example we could create a flexbox mixin to provide a fallback for older browsers. This mixin would take a flex grow, shrink and basis property and called using @include flex(1,1,50%);.

The mixin we've created as part of the tutorial is another way mixins can be used; accepting property value pairs and replicating them inside mixins contents.

This responsive typography or CSS Locking mixin is an example of how much complexity a mixin can handle http://srt.lt/sTp6zP.

Step 13 - Interaction states and built in functions

We can add some interactivity to our buttons by changing the background colour when the button is interacted with either using the mouse or the keyboard. Sass has a number of built in colour functions (http://srt.lt/q9L1z) allowing us to take the background colour we've set in our list and mix it with black to darken the button — when interacted with.

icon--#{$icon} {
    background-color: $icon-background;

    &:hover,
    &:focus,
    &:active {
        background-color: 
            mix(black, $icon-background, 15%);
    }
}

Step 14 - Transition the background colour

We can also utilise the transition property in CSS to animate the differences between the background colours. We could use the all value but that is both expensive in terms of performance and would not allow us to transition different values at different timings and timing-functions.

[class^="social__icon"] {
    ...
    transition: background-color 
        150ms ease-in-out
    ;   
}

Step 15 - Additional transition effects

By adding a relative positioning to the buttons and a top value and adding top to our transition property we can ready the elements for further interaction.

[class^="social__icon"] {
    position: relative;
    top: 0;
    ...
    transition: background-color 
        150ms ease-in-out, 
        top 250ms linear
    ;
}

Step 16 - Move the buttons up upon interaction

For this interaction there's nothing specific needed to create it therefore we can add the code to the shared class. By applying a negative top value and removing the outline we have an even clearer visual cue of interaction.

[class^="social__icon"] {
    ... 
    &:hover,
    &:focus,
    &:active {
        outline: none;
        top: -0.25em;
    }
}

Step 17 - Drop shadow

We can also use the same method to create and animate a box-shadow — adding a little more depth to the interaction — changing the vertical height of the shadow at the same time as the top value.

box-shadow: 
    0 0 0.25em -0.25em rgba(0,0,0,0.2);
&:hover,
&:focus,
&:active {
    ...
    box-shadow: 
        0 0.5em 0.25em -0.25em rgba(0,0,0,0.3);
}

Using transition properties we've animated any interaction with the buttons — moving them up, darkening the background and adding a drop shadow.

Step 18 - Tooltips

We can easily add tooltips with CSS to add further clarity for our users. The first thing we'll do is to add the tooltip value to the list. Making sure to write them in quotes to allow the use of spaces if required.

$icon-list: (
    vimeo "Vimeo" "\f27d" #1ab7ea,
    twitter "Twitter" "\f099" #1da1f2,
    ...
    github "GitHub" "\f113" #333,
    rss "RSS" "\f09e" #f26522,
);

Step 19 - Modify the @each Loop

Due to the addition to our list we'll need to modify our @each loop to include the tooltip value ($name). We can then output that name as the content of the before pseudo element on our buttons.

@each $icon, $name, $unicode, 
    $icon-background in $icon-list {
    ... 

    .social__icon--#{$icon} {
        ...
        &::before {
            content: '#{$name}';
        }
    }
}

Step 20 - Style the before pseudo element

Now we have the name of each element displayed on the screen we need to style the element, adding a background colour, padding and other styling elements — as well as positioning the element and readying it for transitions and modifying the opacity and top values upon interaction.

&::before { ...
    top: -3.5em;
    opacity: 0;
    transition: 
        top 250ms linear, opacity 150ms linear 150ms; 
}
&:hover, ... {  ...
    &::before {
        opacity: 1;
        top: -2.5em;    }   }

We've added some basic styles to the tooltips again adding transitions to animate them into position.

Step 21 - Style the after pseudo element

We will use CSS triangles (http://srt.lt/eS9a) to create the bottom of our tooltips — again positioning the element readying it for transitions — by transitioning the opacity and top values at different timings, and adding a delay we get an animation consisting of the tooltip fading in and moving down into place.

&::after {  ...
    top: -1.9em;
    opacity: 0;
    transition: 
        top 250ms linear, opacity 150ms linear 150ms;
}
&:hover, ... {  ...
    &::after {
        opacity: 1;
        top: -0.9em;    }   }

CodePen Collection of tutorial steps
http://srt.lt/tG2G7Z