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 Archive or helpers.sass helps with developing their stylesheets

Resources

• Learn CSS from web.dev Archive : Tutorial
  Concentrate on the following chapters:
  • Box Model
  • Selectors
  • The cascade
  • Inheritance
  • Color
  • Sizing Units
  • Layout
  • Spacing
  • Borders
• View and change CSS Archive : 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 Archive and here Archive
• CSS Alamanac: position Archive
  • Understand that position: relative creates a new origin for properties like top, left etc.
• cssreference.io Archive : A visual guide to the most important CSS properties, with illustrations and animated examples.
• Sass Basics Archive : Guide for our favorite CSS preprocessor
• Reset style sheet Archive : Wikipedia article

Note

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

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.         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
+------------+-----------------------------------------+

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/ Archive .

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.