Los Angeles Layouts

100 LA Layouts is an off the grid look at Los Angeles.

It is a side project to create 100 designs about Los Angeles to study layouts and typography. Most pages use photos of Los Angeles and include some of my favorite locations. It's an ethnographic love story for LA. All the layouts will use CSS grid. I'll also bring in cool CSS properities like flexbox, shapes, transforms, animations and multi-column. Font selections come from Google and Adobe collections. I want to use variable fonts and web fonts served here. I'll keep a list of type specimens for review. If you'd like to view code or contact me find links in the footer.

Scott Gruber
Los Angeles. 2018-19

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