Skip to content
This repository has been archived by the owner on Aug 11, 2022. It is now read-only.

[FED] Onboarding (Best Practices)

Jump to bottom
Josh Beveridge edited this page Apr 4, 2018 · 7 revisions

Front-end Onboarding - Best Practices

Browser Compatibility | Responsive Design & Media Queries | SASS Basics

This document outlines proposals for key areas of front-end development that attempt to enhance and improve efficiency on the project.

Browser Compatibility

Documenting browser support allows team members, users, and stakeholders to expect certain features and bugs. Browser support should be determined by our core user groups and what browsers they use.

Talent Cloud officially supports the following browsers:

  • All Current Modern Browsers (see below)

Browser support for CSS rules can be found here: Can I Use

Current modern browsers that must be supported:

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge
  • Opera

Supported, but being phased out:

  • Internet Explorer 11

Deprecated:

  • Internet Explorer 10
  • Internet Explorer 8

Responsive Design & Media Queries

Units

Due to the nature of responsive design in 2018, certain units have become more valuable and standard than others. For example, pixels are rarely used.

The following units are important to know and understand:

  • Viewport Units (vh, vw)
    • These units are ALWAYS relative to the viewport height (vh) and viewport width (vw). 1vh is equivalent to 1% of the current viewport’s height value. Viewport units change dynamically with the window as it is resized, so this can be useful for assigned responsive values that are tied to the viewport itself.
  • Relative EM Units (rem)
    • These units are ALWAYS relative to the font size assigned to the HTML element. This means that if the font-size is set to 16px, 1rem = 16px, 5rem = 80px. This is useful because we can use them for consistent, user controlled sizing. These units change dynamically as the font size changes, meaning the size of the elements on screen can be directly tied to the browser’s zoom functionality.
  • Percentage Units (%)
    • Percentage units are the foundation of responsive design. Sections, wrappers, and any other element that dynamically needs to respond to the device’s size should be built using percentage units.

Media Queries

All CSS should be written from a mobile-first perspective - this means that we write our code to appear on phones first, and then scale that code as the device grows and the content has more room to breathe. Then by the time the width reaches regular desktop levels, the design should align with pre-established mockups. Media Queries have been pre-built to target typical device sizes - Portrait orientation, Landscape orientation, Portrait orientation Tablets, Landscape orientation Tablets, Desktops, and TVs (Cinema). The choice to use a media query should rest upon the room available for the content, not necessarily because you’ve reached a new device (e.g. landscape tablets and desktops might look the same if the amount of space is sufficient on both devices).

  • Portrait (targets all portrait orientation devices, taller than they are wide)
    • @media #{$portrait} { CSS }
  • Landscape (targets all landscape orientation devices, wider than they are tall)
    • @media #{$landscape} { CSS }
  • Portrait Tablet
    • @media #{$p-tablet} { CSS }
  • Landscape Tablet
    • @media #{$l-tablet} { CSS }
  • Desktop
    • @media #{$desktop} { CSS }
  • Cinema (TVs)
    • @media #{$cinema} { CSS }
  • Cinema XL
    • @media #{$cinema-xl} { CSS }

Flexbox Grid

Grid Wrapper

The grid wrapper is a required div element that enables the flexbox grid. This is done through the use of the .flex-grid class. This class can be paired with the .top, .middle, and .bottom classes to tell the grid how to align content.

Boxes

Boxes are the primary block elements used to determine grid elements. This is accomplished through the .box class and should be paired with at least one of the Responsive Classes outlined below.

Responsive Classes

Boxes must be given a class to tell them how wide they should be. The Flexbox Grid comes with a 12 column grid system - this means that you can specify anything between 1 of 2 columns and 11 of 12 columns. These classes are written responsively to help you restructure the grid based on the device you’re looking at. This means that you can use multiple classes to specify different widths on different devices. These classes are provided out of convenience, meaning custom media queries can be used to specify new flex options whenever necessary.

Responsive classes are written as such:

  • .full (100% width)
  • .small-1of2 (Phones)
  • .med-4of5 (Portrait Tablets)
  • .lg-3of10 (Landscape Tablets)
  • .xl-5of12 (Large Desktops)

SASS Basics

Full SASS Guide

Imports

Imports are used to pull in other .scss files. This is the foundation behind allowing us to use the atom, molecule, and organism structure for our style files. By separating our CSS into smaller, more manageable chunks, we can increase discoverability and minimize ripple effects when changing code.

Imports are performed using the following syntax: @import "RELATIVE PATH TO FILE/sample-atom-01";

Note that you don't need to include the file extension.

Variables

When possible, evaluate whether the value you are using in CSS should be a variable as opposed to an individual value. Is this value consistent elsewhere? Should it be? If yes, add it as a SASS variable so that it can be used and altered quickly.

SASS variables are created using the following syntax: $variable-name: value;

Variables can then be used like this: height: $variable-name;

There are specific cases where variables are required to be parsed differently. This occurs, for example, when using variables within media queries. When a variable needs to be used in this situation, use the following syntax to ensure it's parsed properly: #{$variable}.

Nesting

Nesting provides us with the opportunity to create clean, concise CSS without the need to repeat class names. Selectors can be nested within each other and are then compiled to the CSS you would write normally by SASS.

For example:

CSS

.block__element--modifier {
    height: 100%;
}

.block__element--modifier.active {
    background: red;
}

.block__element--modifier:after {
    display: block;
    content: " ";
    height: 100%;
    position: absolute;
    width: 100%;
}

@media #{$p-tablet} {
    .block__element--modifier {
        height: 50%;
    }
}

... can be written in SASS like this:

SCSS

.block__element--modifier {
    height: 100%;

    @media #{$p-tablet} {
        height: 50%;
    }

    &.active {
        background: red;
    }

    &:after {
        display: block;
        content: " ";
        height: 100%;
        position: absolute;
        width: 100%;
    }

}

Other Fun Features

Mixins

Mixins are used to create a reusable block of CSS attributes. This can be useful for maintaining consistency across various UI elements (e.g. padding, margins, borders, etc.) Mixins are created by specifying @mixin name($variable).

A Mixin looks like:

@mixin spacing($value) {
    margin: $value auto;
    padding: $value 2rem;
}

... and can then be used:

.block__element--modifier {
   @include spacing(5rem);
   height: 100%;
}

Functions

There are a slew of handy functions included in SASS that allow you to modify values in useful ways. A full list of these functions can be found here: SASS Functions.

A few useful functions:

  • lighten($color, $amount) : Makes a color lighter.
  • darken($color, $amount) : Makes a color darker.
  • saturate($color, $amount) : Makes a color more saturated.
  • desaturate($color, $amount) : Makes a color less saturated.
  • opacify($color, $amount) / fade-in($color, $amount) : Makes a color more opaque.
  • transparentize($color, $amount) / fade-out($color, $amount) : Makes a color more transparent.

Autoprefixer Docs

CSSnano Docs

Gulp Docs

SASS Docs

Selenium Docs

Clone this wiki locally