CSS

Sass is an extension of CSS that adds power and elegance to the basic language.

Sass has features that do not currently exist in CSS, such as:

• nesting
• mixins
• inheritance.

Sass basics 2020 explains when you use Sass, it will take your preprocessed Sass file and save it as a standard CSS file that you can use on your website.

Let’s explore what Sass is in 100 seconds with the video below.

To use Sass:

1. Install
2. Compile Sass to CSS using sass command by:
   • Telling Sass where to build from
   • Telling Sass where to output CSS to.

For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.

You can watch individual files or directories with the –watch flag. The watch flag tells Sass to watch your source files for changes and re-compiles CSS:

Nesting

HTML has a clear nested and visual hierarchy. CSS does not.

That is where nesting comes in. Nesting allows you to nest your CSS selectors in the same way HTML follows a visual hierarchy.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav
  ul
    margin: 0
    padding: 0
    list-style: none


  li
    display: inline-block


  a
    display: block
    padding: 6px 12px
    text-decoration: none

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixins

It can be tiresome to write some things in CSS. Mixins allow you to make a group of declarations that you want to reuse throughout your site.

You use the @mixin directive to create a mixin and give it a name. The example below has used theme.

@mixin theme($theme: darkgray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, 0.25);
  color: #fff;
}

.info {
  @include theme;
}

.alert {
  @include theme(darkred);
}

.success {
  @include theme(darkgreen);
}

@mixin theme($theme: darkgray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, 0.25)
  color: #fff

.info
  @include theme

.alert
  @include theme(darkred)

.success
  @include theme(darkgreen)

.info {
  background: darkgray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: darkred;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: darkgreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;

}

Inheritance/extend

@extend allows you to share a set of CSS properties from one selector to another. A placeholder class is a special type of class that only prints when it is extended. It can help keep your CSS neat and clean.

Below is an example of simple series of messaging for errors, warnings and successes using another feature. This feature goes hand in hand with extend, placeholder classes.

/* 
 * This CSS will print because
 * %message-shared is extended.
 */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because
// %equal heights isn't extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

/* 
 * This CSS will print because
 * %message-shared is extended.
 */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

// This CSS won't print because
// %equal heights isn't extended.
%equal-heights
  display: flex
  flex-wrap: wrap

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

.warning
  @extend %message-shared
  border-color: yellow

/* 
 * This CSS will print because
 * %message-shared is extended.
 */
.message,
.success,
.error,
.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Watch the video below to learn how to organise Sass when building a website.

Folder Structure

Use the project you have been working on and in the project’s public directory (the same place you have your css/js/etc. folders):

1. Create an "scss" folder with folders (i.e. scss > abstracts, base, modules, layout, pages, themes, vendors ).
2. Create main Sass file (i.e. scss > main.scss).
3. Add an index partial file to each folder (i.e. _index.scss).
4. Add imports for each index partial file to the scss > main.scss file (i.e. @import "abstracts/index";)
5. Add scss files to each folder.
6. In each folder’s index file, import the other scss files in the folder.

See sass-guidelin.es/#architecture to learn more about the 7 and 1 pattern.

Re-engineering a project to include Sass: Part 1

1. Make sure the name of your main css file has the same name as your main scss file (i.e. "css/main.css" will correspond to the scss > main.scss file).
2. Comment out the includes in scss > main.scss (we’ll use them later) and copy and paste the contents of the freelancer.css file below the comments.
3. Use your transpiler (Koala, Prepros, Codekit, etc) to transpile the main.scss contents into the main.css file. The website should now show the styling.

Re-engineering a project to include Sass: Part 2

1. Modularise the CSS in the scss > main.scss file into the the relevant scss files.
2. Now, use Sass’s features to create a cleaner, more scalable and more maintainable code base (as you go, create variables in abstracts > variables.scss out of any globally used values.):
   1. Extract base styles to base folder.
   2. Extract main modules to the “modules” folder.
   3. Extract page (or main section if one page website) styles into pages folder.
   4. And so on…
   5. Create mixins, use nesting where appropriate, etc.

With CSS3 you can find an element based on (position, attribute, and state):

Position

Relational Selectors:

• Descendant: E F
• Child: E > F
• Adjacent Sibling: E + F
• General Sibling: E ~ F

State

CSS2 and below

:link, :visited, :hover, :active, and :focus.

CSS3

Part of an element

Insert content at a specific location

Pseudo-elements
E::before
E::after

Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. To generate content for a pseudo-element, use the content property: content: "";

To access an attribute of the selected element (CSS2) use attr(). For example:

<!-- HTML -->
<p data-foo="Hello">world!</p>

/* CSS */
p::before {
  content: attr(data-foo) " ";
}

Having easy to use navigation is an aspect that is look at from a UX design perspective. Navigation is about the easy of use and persuading users to go where the business needs them to go.

With CSS, you can transform HTML menus into cool navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
A navigation bar is basically a list of links – using the ul and li elements makes sense.

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Next, the bullets, margins and padding are removed from the list.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

list-style-type: none; - Removes the bullets. A navigation bar does not need list markers.

Set margin: 0; and padding: 0; to remove browser default settings.²

Now that we have covered the standard navigation code, we can be creative with vertical and horizontal navigation.

Vertical Navigation Bar

In addition to the code above, you can style the a elements inside the list to build a vertical navigation bar.

li a {
  display: block;
  width: 60px;
}

display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)

width: 60px; - Block elements take up the full width available by default. We want to specify a 60px; width

You can set the width of <ul>, and remove the width of <a>. They will take up the full width available when displayed as block elements.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

li a {
  display: block;
}

Below is a basic vertical navigation bar with a grey background colour. The links will change colour when the user moves the mouse over.²

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

Horizontal navigation bar

A horizontal navigation bar can be created using inline or floating list items.

Inline List Items

Specify the <li> elements as inline. This in addition to the standard code explained above. display: inline; - By default, <li> elements are block elements. The example below removes the line breaks before and after each list item. This displays them on one line.

li {
  display: inline;
}

Floating List Items

Below is an example of how to float the <li> elements, and specify a layout for the navigation links.²

• float: left; - Use float to get block elements to float next to each other
• display: block; - Allows us to specify padding and height, width, margins.
• padding: 8px; - Specify some padding between each <a> element, to make them look good
• background-color: #ddd; - Add a gray background-color to each <a> element

ul {
  backround-color: #ddd;
}

Watch and try the tutorial below on building a responsive navigation bar.

Chrome Developer Tools – Getting started

This project will be a chance for us to practice our technical skills. Imagine that you are a web designer in an agency and have been handed a project from the UX team.

The earlier stages of the UX process have been completed and you have access to the documentation.

For this documentation, use one of the UX Portfolios from

Behance or UXFolio, etc.

From a technical standpoint, the CSS in your project should:

• have a browser reset and any default styles
• be well commented and structured (generic to specific
• follow a CSS methodology (be modular and reusable)
• have a low specificity
• have no unnecessarily repeated styles
• use CSS3 Flexbox or Grid for layout

The HTML should:

• be initially generated from boilerplate
• be formatted
• use HTML5 semantic tags (like "section", "footer", etc.)

The site/app should:

• be responsive (if it's a mobile app, design for tablets as well)
• contain some micro-interactions

CSS Grid is a two-dimensional layout for the web. It allows you to layout columns and grids by defining their relationships (in terms of size, position, and layer).

The horizontal and vertical lines create a pattern that can align design elements. This means your elements will not move around and change as you move from page to page. 

A grid will have columns, rows, and then gaps between each row and column. These gaps are called gutters.

1. Columns
2. Gutters

Grid Layout

The first step is to decide on the grid that your design needs. The grid is created on 12 columns. To begin, you need to decide how many columns your content will take up (out of 12).

Columns should be nested in a row class, or you may choose to nest rows in a container class. 

Below is an example code of 3, 6 and 9 out of 12 columns.

<div class="container">
  <div class="col-3">
    <!-- This content will take up 3/12 (or 1/4) of the container -->
  </div>
  <div class="col-6">
    <!-- This content will take up 6/12 (or 1/2) of the container -->
  </div>
  <div class="col-9">
    <!-- This content will take up 9/12 (or 3/4) of the container -->
  </div>
</div>

Below is an example of a three-column track grid with new rows created at a minimum of 100px and a maximum of auto. 

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.one {
  grid-column: 1 / 3;
  grid-row: 1;
}

.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.three {
  grid-column: 1;
  grid-row: 2 / 5;
}

.four {
  grid-column: 3;
  grid-row: 3;
}

.five {
  grid-column: 2;
  grid-row: 2;
}

.six {
  grid-column: 3;
  grid-row: 4;
}

All CSS grid properties

Defining a grid

Begin with this code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="uf-8">
  <title>CSS Grid starting point</title>
  <style>
    body {
      width: 90%;
      max-width: 900px;
      margin: 2em auto;
      font: 0.9em / 1.2 Arial, Helvetica, sans-serif;
    }

    .container > div {
      grid-column: 1 / 3;
      border-radius: 5px;
      padding: 10px;
      background-color: rgb(207, 232, 220);
      border: 2px auto rgb(79, 185, 227);
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Simple grid example</h1>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
  </div>
</body>

</html>

The example above has a container, with child items.

By default, these will display the normal flow.

We use the grid value of the display property to define a grid. This enables Grid Layout. Meaning all the direct children of the container become grid items.

Add the CSS file:

.container {
  display: grid;
}

These items will not look different immediately. Declaring display: grid; gives you a one-column grid.

Add more columns to see something resembling the grid. Add the CSS below to create three 200px columns.³

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Flexible Grids

Flexible grids create a responsive site. Previously a site was built to a particular size, such as a desktop. If that site was accessed via a mobile, it would look disorientated and magnified.

That was before Ethan Marcotte invented the term responsive design in 2010.

This term describes a combination of three techniques:

1. Fluid grids
2. Fluid images
3. Media query.

A flexible grid means that you do not need to manually add every screen size your site will be viewed on. Instead you input a percentage.

Marcotte developed the formula to convert the normal pixels layout design, and convert it into a percentage.

For example:

target / context = result
}

If the target column size is 60px, and the container it is in is 960px, you divide 60 by 960 to work out the value that will be used in the CSS.

For example:

.col {
  width: 6.25%; /* 60 / 960 = 0.0625 */
}

Follow along with the video below to try out building a grid. 

There are layout methods that are responsive by default. They create an easier way to make a flexible grid.

There are three modern layout methods that do this:

1. Flexbox
2. Multiple-column layout (multicol)
3. Grid.

Flexbox

The flexbox, or flexible box layout module, allows you to create a responsive layout without using float or positioning.

Flexbox is used to create a row or a column axis layout.

The content will shrink and distribute space between the items according to the space in their container.

You can indicate how you would like the items to behave towards the space around them with the values:

1. flex-grow
2. flex-shrink

To begin, set up a special value of display on the parent element you want to affect.

The example below is set on <section>:

section {
  display: flex;
}

The section element will become a flex container and its children will become flex items.

Multiple-column layout (Multicol)

Multicol allows you to take a lump of content and spread it across multiple columns. Think of it like a newspaper.

A column-count can indicate how many columns you want to spread your content across.

The browser will adjust the size of the column to the user's screen size.

.container {
  column-count: 3;
}

A column-width indicates the minimum width. The browser will automatically create as many columns at your specified width, to comfortably fit into the container. The remaining space will be shared out between all columns. The number of columns will change according to how much space there is.

.container {
  column-width: 10em;
}

Grid

As explained above, grids allow content to be distributed across the grid tracks.  

Jen Simmons

Jen is the creator of an experimental layout lab.

Jen explores what is possible with graphic design on the web.

Explore her channel below for inspiration.