CSS Custom Properties (Variables)

CSS Custom Properties, or otherwise known as CSS Variables, allow us to handle dynamic values in our CSS. In the past, we had to use CSS preprocessors like Sass and Less to handle dynamic values or variables in our CSS. Now, CSS Custom Properties give us a native option that doesn’t have to be compiled and we can even access the variables in our JavaScript. You’ll get used to the weird syntax!

The process of defining and using variables is pretty similar no matter what part of the DOM you’re referencing. We will start with the root element, the body.

Define a variable by adding the two lines in front of its name (--). To reference the variable, use var(--style)

:root {
   --main-bg-color: #f4f4f4;

body {
   background-color: var(--main-bg-color);

Defining style variables for a div follows pretty much the same format. When you have a lot of variables, it can be helpful to separate the styles and the variables into two sections both referencing the same element.

.box {
   --box-bg-color: #fff;
   --box-main-color: #0e7;

.box {
   background-color: var(--box-bg-color);
   color: var(--box-main-color);

If you don’t have that many variables, you can define and reference them within the same block.

.grid {
   --gap: 20;
   grid-gap: var(--gap);

We can get access to the style variables we defined in CSS in our JavaScript. In this example, I’m referencing the box div, compiling all of the div‘s applied styles into a variable called boxStyles and getting access to the --box-main-color CSS variable from the boxStyles array.

const box = document.querySelector('.box');
const boxStyles = getComputedStyles(box);
const boxMainColor = boxStyles.getPropertyValue('--box-main-color')

const header = document.querySelector("#main-header");
header.style.setProperty("--header-bg-color", boxMainColor);

I then set the header’s --header-bg-color CSS variable value to that of the boxMainColor that we extracted in the lines above.

CSS Grid Layout

CSS Grid allows us to create 2 dimension layouts and align items in columns and rows.

All browsers support grid layout.

Flexbox vs. Grid

CSS Grid vs Flexbox vs Bootstrap. When it comes to layout using ...
The primary difference between CSS Flexbox and Grids

First, I will create a div with the class grid. In order to use the grid layout, I will set the div’s display to grid in my CSS. Put some child elements within this container div with class grid in order to see its default behavior.

.grid {
   display: grid

After you set display: grid, you notice nothing really changes. We will have to define other CSS properties in order to see the effects of CSS grid.

.grid {
   display: grid
   grid-template-columns: 40% 60%;

This grid-template-columns property will actually cause things to change. If you have two child elements of the grid-display div, the first one will take up 40% of the available space and the second will take 50%. If you have more than two, the third, fourth, fifth, etc. will follow this same pattern, wrapping to the next line as necessary.

grid-template-columns: 40% 30% 30%;

You can add as many percentages as you like, as long as they add up to 100%. For each percentage, a new column will be placed onto the each line.

grid-column-gap: 1em;
grid-row-gap: 1em;

The grid-column-gap property adds spacing between each column (on the same line). The grid-row-gap property adds spacing between each row (between 2 lines). The grid-gap property will add the same amount of spacing to both rows and columns.

The recommended unit when using the grid-template-columns property is fractions.

This line, for example, separates the layout into 3 equal-sized columns– 1/3 each.

grid-template-columns: 1fr 1fr 1fr;

This line separates the layout into 1/4, 1/2, then 1/4 of the available width.

grid-template-columns: 1fr 2fr 1fr;

In order to make the syntax more succinct, you can write repeating template column layouts like this:

grid-template-columns: repeat(3, 1fr);

The above line does the same as 1fr 1fr 1fr. The below line repeats 1fr, 2fr, 1fr, 2fr, etc. four times.

grid-template-columns: repeat(3, 1fr, 2fr);

This line sets the height for every grid cell:

grid-auto-rows: 100px;

This line makes the default cell height 100px but expands a cell (and the other cells on its line) if the cell’s content requires more room:

grid-auto-rows: minmax(100px, auto);

The justify-items property allows you to define the location of grid cells within their defined space along the primary axis. It’s very similar to the justify property in Flexbox.

This is the default value of the justify-items property. It makes cells take up their entire horizontal space (in a horizontal grid).

justify-items: stretch

Some other property value options:

justify-items: start;  
justify-items: end;
justify-items: center;

The align-items property allows you to define the location of grid cells within their defined space along the cross axis. It’s very similar to the align property in Flexbox.

This is the default value of the align-items property. It makes cells take up their entire vertical space (in a horizontal grid).

align-items: stretch

Some other options for the property value:

justify-items: start;
justify-items: end;
justify-items: center;

You can set the justify and align properties of each individual grid element in order to only affect that element.

The grid-column and grid-row properties allow you to expand the amount of cell spaces that an individual cell takes up. These properties do this by using a property called lines.

Lines are the spaces between cells.

Grid Lines - MDN Web Docs Glossary: Definitions of Web-related ...

This line will make Cell 1 expand from row lines 1-3 (vertical expansion).

.cell1 {
   grid-row: 1/3;

How to Use CSS Flexbox

First, set the display of your container div to be flex.

div {
   display: flex;

When you set a container to display: flex, the browser will automatically format the child elements to all be inline with each other. You can use each child’s flex property to define the width that they take up on the line.

The larger the flex value, the more space it will take up compared to the other elements on the line. For example, if there are 2 elements within the flexbox container (an image and a paragraph), if you set the image’s flex property value to 1 and the paragraph’s to 2, the paragraph will take up 2/3 of the space and the image will take up 1/3 of the space.

Horizontally and vertically align child elements within flexbox container

Let’s say I had a header within my flexbox div and I wanted to center it both horizontally and vertically. I would simply set align-items and justify-content to center:

header {
   align-items: center;
   justify-content: center;

The align-items property controls alignment of all items on the cross axis and the justify-content property controls alignment of all items on the main axis.

The align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column.

Main axis: left to right if flex-direction is row; up and down if flex-direction is column

Media Query Breakpoints

Why should you care about making your websites responsive?

Around October 2016, the number of people who browse the web on mobile devices overtook the amount of people who browse the web on computers.

Mobile friendliness affects your Google search rankings. You can use Google’s Mobile-Friendly Test website to check the effectiveness of your responsive web design (https://search.google.com/test/mobile-friendly)

What are your options?

  1. Do Nothing
  2. Make a Separate Mobile Site (ex. Facebook)
  3. Make Your Main Website Responsive (My Suggestion)

Media Queries

We use CSS Media Queries to make our websites responsive. There are many different media queries that only run under specific conditions. For example,

@media print {
   h1 {
      color: red;

If our website is under the condition of being printed, then this condition will be true and it will apply these styles to the h1 elements on our page.

Some other examples:

@media screen (Dependent on the screen size or screen resolution)

@media speech (Will be activated if the website is being read to a person, such as a visually impaired person)

This is the format for media queries:

@media <type><feature>

For example:

@media screen (min-width: 900px) {
   // Change something
Wrapping Flexbox with Media Query
.info {
  display: flex;
  flex-wrap: wrap;

@media (max-width: 560px) {
  .info-img, .info-text {
    min-width: 100%;
    text-align: center;