145 CSS basics [3d]

Goals

• Understand at least the following CSS concepts:
  • Classes
  • Selecting elements for styling
  • Basic styling (color, typography, spacing)
  • The box model
  • Inline elements vs. block elements
  • Ways to layout elements
• Learn how to use your browser's "inspect" feature and how you can see which CSS styles are applied to an element
• Learn what a "reset stylesheet" is.
• Learn what "CSS precompilers" are. Examples are "Sass" and "Less" (we use "Sass").
• Learn some basic Sass syntax:
  • Variables
  • Nesting
  • Partials
  • Mixins
• Look at a few projects and understand how a mixins.sass Show archive.org snapshot or helpers.sass helps with developing their stylesheets

Resources

• Learn CSS from web.dev Show archive.org snapshot : Tutorial
  Concentrate on the following chapters:
  • Box Model
  • Selectors
  • The cascade
  • Inheritance
  • Color
  • Sizing Units
  • Layout
  • Spacing
  • Borders
• View and change CSS Show archive.org snapshot : How to use Chrome's DevTools to inspect the CSS of the current page. This is great for checking how another page has achieved a particular visual effect.
  • For inspecting and debugging Flexbox and Grid in more detail, see here Show archive.org snapshot and here Show archive.org snapshot
• CSS Alamanac: position Show archive.org snapshot
  • Understand that position: relative creates a new origin for properties like top, left etc.
• cssreference.io Show archive.org snapshot : A visual guide to the most important CSS properties, with illustrations and animated examples.
• Sass Basics Show archive.org snapshot : Guide for our favorite CSS preprocessor
• Reset style sheet Show archive.org snapshot : Wikipedia article
• The Skinny on CSS Attribute Selectors Show archive.org snapshot : Practical examples for attribute selectors like a[href]
• The Rules of Margin Collapse Show archive.org snapshot

Note

Sass has two different syntaxes, .scss and .sass.
We use the indented syntax (.sass).

Tip

You can use tools like CSS explain Show archive.org snapshot or this calculator Show archive.org snapshot to specificity of two CSS selectors.

Exercises

Basic layouting

We want to layout a classic website with a header, a sidebar with navigation links, a big content area and a footer:

Copy+------------------------------------------------------+
|                                                      |
|  BIG LOGO                                            |
|                                                      |
+------------+-----------------------------------------+
|            |                                         |
|  Link 1    |  HEADLINE                               |
|            |                                         |
|  Link 2    |  Lorem ipsum dolor amit.                |
|            |  At vero eos et accusam et justo.       |
|  Link 3    |  Stet clita kasd gubergren, no sea.     |
|            |  Sed diam nonumy eirmod tempor.         |
|            |  Lorem ipsum dolor amit.                |
|            |  At vero eos et accusam et justo.       |
|            |  Stet clita kasd gubergren, no sea.     |
|            |  Sed diam nonumy eirmod tempor.         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
+------------+-----------------------------------------+
|  Footer                                              |
+------------------------------------------------------+

Here are some more details how the layout should behave:

• Give each element (header, sidebar, etc.) a distinct background color to see where boxes start and end.
• The layout should fill the entire width and height of the screen.
• The sidebar should have a fixed width. The content area takes up the remaining width of the screen.
• The header should have a fixed height. The sidebar and content area takes up the remaining height of the screen.
• The layout should work on a variety of screen resolutions, not just your particular monitor. You can assume a minimum resolution of 800×600 pixels.
• The footer is always at the bottom edge. The sidebar and content area stretches to fill all available height.
• The screen should only show scrollbars if the text in the main content area exceeds the available viewport height.

Build multiple versions of this layout in separate files. Each file should use a different CSS layout technique:

• Use a single CSS grid to layout header, sidebar and content area.
• Use a Flexbox to divide the space between header, sidebar and content area.

Tip

You can implement this exercise in plain CSS, you don't need to use Sass.

Give each layout element a CSS class so you can apply styles. Some layout techniques may require more HTML elements than others, or a different nesting.

You can generate paragraphs of random text on https://loremipsum.de/ Show archive.org snapshot .

A coat of paint for MovieDB

Apply some basic styles to MovieDB. You should author your styles in Sass, using the indented syntax (.sass).

Here are some hints for this exercise:

• The UI does not need to be a master piece, but it should be tidy and clear.
• If you have generated styles from Rails scaffolding, delete them all. They don't look nice and we do not use them.
• Pay attention to the margins in your styles. Elements that belong together logically (e.g. two navigation sections) should be closer to each other than elements that have no relation.
  • Try to limit your margins to very few (e.g. 6) distinct values across the entire application to achieve a consistent look & feel.
• Your MovieDB should have a navigation bar that lets the user switch between the different model screens (E.g. Movies | Actors | Roles).
• Please don't use Bootstrap or another CSS framework. If your MovieDB is currently using a CSS framework, remove it and build your own styles from scratch.

Tip

Up until version 6, Rails understands Sass out of the box. No need to install additional software.
Your MovieDB uses Rails 7 with Esbuild, Sass support is included using the esbuild-sass-plugin library.

Tip

Every time you add a new SASS or JS file to your application (e.g. app/assets/application/navbar.sass), you need to restart your development server for it to show up in your browser.
This is caused by a limitation of the esbuild-plugin-import-glob Show archive.org snapshot , which we use to import all assets in this directory: See import './application/**/*.sass' in your application.js. Direct import statements like import 'app/assets/application/navbar.sass' would work without restarting the server.
You'll learn the details of esbuild and the frontend build pipelines in a later card, for now it's enough to know why new files might be missing.