LA Layouts

A side project about Los Angeles featuring CSS layouts.

CSS properties in play

  1. Layout 001: Flying into LAX
    • grid-template-columns
    • grid-template-rows
    • z-index
  2. Layout 002: The Park
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
  3. Layout 003: Bonaventure Hotel
    • grid-template-columns
    • min-height
  4. Layout 004: Santa Monica Pier
    • grid-template-columns
    • min-height
    • position (relative, absolute)
  5. Layout 005: Brown Pelican Mural, Venice
    • grid-template-columns
    • media query
    • object fit
  6. Layout 006: Walt Disney Concert Hall #1
    • grid-template-columns
    • auto-fit
    • minmax
    • multi-column
    • media query, orientation landscape
    • object fit
  7. Layout 007: Walt Disney Concert Hall #2
    • grid-template-columns
    • grid-template-areas
    • media query
  8. Layout 008: Walt Disney Concert Hall #3
    • grid-template-columns
    • grid-template-areas
    • object-fit
    • :first-of-type
    • :last-of-type
    • ::first-letter
    • :nth-of-type
  9. Layout 009: Walt Disney Concert Hall #4
    • grid-template-columns
    • grid-template-areas
    • object-fit
    • :first-of-type
    • ::first-letter
    • max-height
    • svg filter
    • transition
  10. Layout 010: Color palettes, Santa Monica mountains
    • grid-template-columns, percentages
    • grid-template-rows
    • object-fit
    • nth-of-type
  11. Layout 011: Swatch color palettes
    • grid-template-columns
    • auto-fit
    • minmax
  12. Layout 012: Interaction of Color, Joseph Albers
    • grid-template-columns
    • grid-template-rows
    • flexbox
    • animate.css
    • filter
    • css animation
    • nth-child
  13. Layout 013: Swiss poster
    • grid-template-columns
    • grid-template-rows
    • max-height
    • transform
    • attribute selector
    • z-index
  14. Layout 014: Disney Hall
    • grid-template-columns
    • grid-template-rows
    • css shapes
    • clip path
  15. Layout 015: LA Audubon Bird palettes
    • grid-template-columns
    • grid-template-rows
    • flexbox
  16. Layout 016: Santa Monica Mountain Colors
    • grid-template-areas
  17. Layout 017: Extinction Rebellion street posters
    • grid-template-columns
    • grid-template-rows
    • minmax
    • max-width
    • multi-column
    • svg fill
  18. Layout 018: Extinction Rebellion essay
    • grid-template-columns
    • grid-template-rows
    • multi-column
    • object-fit
    • svg fill
  19. Layout 019: Liberty and the Heart of LA 2018
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • object-fit
  20. Layout 020: cicLAvia street photographer
    • grid-template-areas
    • object-fit
    • ::first-line
    • :nth-of-type
  21. Layout 021: cicLAvia Families, Heart of LA
    • grid-template-areas
    • grid-template-columns
    • object-fit
    • flexbox
    • minmax
    • multi-column
  22. Layout 022: cicLAvia peace sign, Heart of LA
    • grid-template-areas
    • grid-template-columns
    • linear-gradient
    • picture
    • srcset
  23. Layout 023: Easter Bluejay: How to Draw 28 Birds in Harper's Style
    • grid-template-columns
    • grid-template-areas
    • shape-margin
    • shape-outside
    • :first-of-type
    • ::first-line
    • ::first-letter
  24. Layout 024: ciclavia we love our police
    • grid-template-columns
    • grid-template-rows
    • font-feature-settings
    • :first-of-type
    • ::first-line
    • ::first-letter
  25. Layout 025: Charley Harper, American illustrator
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • shape-margin
    • shape-outside
  26. Layout 026: Flock of Blue Jays, Greensock animation
    • grid-template-columns
    • grid-template-rows
    • max-height
    • max-width
    • object-fit
    • svg
  27. Layout 027: LA Ice Rink
    • grid-template-columns
    • grid-template-areas
    • object-fit
    • svg
    • img srcset
  28. Layout 028: Burrowing Owl: How to Draw 28 Birds in Harper's Style
    • grid-template-rows
    • transition
    • svg
  29. Layout 029: For Lemmy
    • grid-template-columns
    • grid-template-areas
  30. Layout 030: Interaction of Color, ver 2
    • grid-template-columns
    • grid-template-rows
    • z-index
    • filter
    • flexbox
    • animation
    • greensock
  31. Layout 031: Our days begin and end as stories
    • grid-template-columns
    • content
    • ::before
    • ::after
    • chinese, japanese, spanish and english
    • splitting.js
  32. Layout 032: Bumblebeelovesyou Mural
    • grid-template-columns
    • transform
  33. Layout 033: LA Noir, Raymond Chandler
    • grid-template-columns
    • object-fit
    • flexbox
    • multi-column
    • content::before
  34. Layout 034: Palms Street Art. Women reading book.
    • grid-template-columns
    • object-fit
  35. Layout 035: Sidewalk art
    • grid-template-columns
    • grid-template-areas
    • object-fit
    • nth-of-type
  36. Layout 036: Las Virgenes View Trail
    • grid-template-columns
    • font-feature-settings
    • flexbox
    • object-fit
    • nth-of-type
  37. Layout 037: Soul of a Nation
    • grid-template-columns
    • object-fit
    • multi-column
    • text-indent
  38. Layout 038: Men love Annie. coffee shop art.
    • grid-template-columns
    • grid-template-areas
    • object-fit
    • object-position
  39. Layout 039: Extinction Rebellion skull poster
    • grid-template-columns
    • fill
    • z-index
    • svg
  40. Layout 040: Extinction Rebellion butterfly poster
    • grid-template-columns
    • grid-template-rows
    • z-index
    • svg
  41. Layout 041: Extinction Rebellion hourglass poster
    • grid-template-columns
    • grid-template-rows
    • z-index
    • object-fit
    • svg
    • fill
  42. Layout 042: Extinction Rebellion global warming dead plant poster
    • grid-template-columns
    • grid-template-rows
    • z-index
    • object-fit
    • svg
    • stroke
    • mix-blend-mode
  43. Layout 043: Gorillas
    • min-height
    • svg
  44. Layout 044: Union Station
    • compound grid
    • min-height
    • srcset
  45. Layout 045: CC Fest
    • CSS shapes, transforms and animations
    • grid-template-areas uses emoji
    • media query changes grid
  46. Layout 046: fractional unit and image study
    • scaling grid of 1fr, 2fr, 4fr, 6fr. images use vh object-fit and object-position