Complete CSS

A course by Piccalilli

Complete CSS

Written by: Andy Bell

Intro

  1. Intro
  2. Getting things ready

Principles

  1. The art of concise, effective communication
  2. Giving and receiving feedback
  3. Move slowly and methodically to go fast
  4. Be the browser’s mentor, not its micromanager
  5. Fluid typography and space
  6. Flexible layout compositions
  7. Principles for organising CSS code
  8. Progressive enhancement with CSS

Planning and feedback

  1. Identifying designer oversights
  2. Feeding back designer oversights
  3. Creating a sketch-up plan
  4. Sketch-up: Identifying layouts
  5. Sketch-up: Slicing up the design into reusable components
  6. Feeding back our sketch-up findings to the designer
  7. Identifying a fluid typography and spacing scale
  8. Identifying and planning our build passes

Design prototyping

  1. Disposable prototypes
  2. Prototyping our masthead flexbox layout
  3. Feeding back issues found with prototypes
  4. Rolling out another prototype with the new approach

Core build

  1. Identifying the core build and flair pass
  2. Global CSS part 1
  3. Global CSS part 2
  4. Prose pattern
  5. Labelled icon pattern
  6. Headline pattern
  7. Corner pattern
  8. Button pattern
  9. Card pattern
  10. Hero pattern
  11. Navigation pattern
  12. Site head pattern part 1
  13. Site head pattern part 2
  14. Site footer pattern
  15. Closer pattern
  16. Masthead pattern
  17. Rolodex pattern
  18. Gallery pattern

Flare pass build

  1. Let’s create an indent utility
  2. Integrate docked treatment on Rolodex
  3. Implementing container filling text
  4. Inspo pattern

Page compositions

  1. Composing the home page with our patterns
  2. Dealing with designer snags
  3. Implementing the designer snags
  4. Front-end wrap-up

Wrapping up

  1. The Icebox
  2. Getting our documentation in shape
  3. Wrapping up