Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced Design Methods 1, Day 2

Slides for day 2 of my Center Centre workshop.

  • Be the first to comment

  • Be the first to like this

Advanced Design Methods 1, Day 2

  1. 1. Advanced Design Methods Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. Modern
 approaches
 to layout
  3. 3. ADVANCED DESIGN METHODS Remember this? narrow wide
  4. 4. ADVANCED DESIGN METHODS Compare: small screen first @media (min-width:600px) {
 .primary {
 float: left;
 width: 68%;
 }
 .secondary {
 float: right;
 width: 32%;
 }
 }
  5. 5. Floating an element removes it from the normal flow & pushes it to a side
  6. 6. The clear property controls how content flows around a floated element
  7. 7. When all children
 of an element are floated, it has
 no inherent height
  8. 8. This made floated layouts challenging to build
  9. 9. ADVANCED DESIGN METHODS We hacked CSS to make it work .layout-container::after { content: " "; display: block; clear: both; width: 0; height: 0; }
  10. 10. Flexbox: 
 layout control in
 1 dimension
  11. 11. ADVANCED DESIGN METHODS Let’s try this again narrow wide
  12. 12. ADVANCED DESIGN METHODS Same thing, but with flex @media (min-width:600px) {
 .layout-container { display: flex; } .primary {
 width: 68%;
 }
 .secondary {
 width: 32%;
 }
 }
  13. 13. ADVANCED DESIGN METHODS Here’s how it works .listing--events { display: flex; flex-wrap: wrap; align-items: stretch; } .event { flex: 0 0 100%; /* small screen first */ } grow? shrink? size basis
  14. 14. ADVANCED DESIGN METHODS Tweak at specific breakpoints /* 2 column */ @media (min-width: 28.75em) { .event { flex: 0 0 calc(50% - 1.25rem / 2); } } /* 3 column */ @media (min-width: 43.125em) { .event { flex: 0 0 calc(100% / 3 - .875rem); } }
  15. 15. ADVANCED DESIGN METHODS Handle the special cases /* First, if more than 1 */ @media (min-width: 28.75em) { .event--future:nth-last-child(n+1):first-child { flex: 0 0 100%; } }
  16. 16. ADVANCED DESIGN METHODS Handle the special cases /* When more than 2, make the first 2 go 50% */ @media only screen and (min-width: 43.125em) { .event--future:nth-last-child(n+2):first-child, .event—future:nth-last-child(n+2):first-child
 + .event--future { flex: 0 0 calc( 50% - 1.25rem / 2 ); } }
  17. 17. Grid: 
 layout control in
 2 dimensions
  18. 18. ADVANCED DESIGN METHODS Here’s how it works .listing--events { display: grid; grid-template-columns: repeat( 6, 1fr ); grid-gap: 1em; } .event { grid-column: span 6; } each row has
 6 equal columns separated by 1em
 of whitespace stretch full width by default
  19. 19. ADVANCED DESIGN METHODS Here’s how it works @media(min-width: 28.75em) { .event { grid-column: span 3; } /* when more than 1, make the first span both columns */ .event--future:nth-last-child(n+1):first-child { font-size: 1.5em; grid-column: span 6; } } default = 2-up full-width
  20. 20. ADVANCED DESIGN METHODS Here’s how it works @media(min-width: 43.125em) { .event { grid-column: span 2; } /* Quantity Query - when more than 2, make the first 2 go 50% */ .event--future:nth-last-child(n+2):first-child, .event--future:nth-last-child(n+2):first-child
 + .event--future { font-size: 1.5em; grid-column: span 3; } } default = 3-up 2-up
  21. 21. Let’s look at the content teaser
  22. 22. ADVANCED DESIGN METHODS Content Teasers
  23. 23. ADVANCED DESIGN METHODS Content Teasers
  24. 24. ADVANCED DESIGN METHODS Content Teasers 1fr 2fr grid-template-columns: 1rem 1fr 1rem 2fr 1rem;
  25. 25. ADVANCED DESIGN METHODS Content Teasers 1fr 2fr grid-template-columns: 1fr 2fr; grid-gap: 1rem;
  26. 26. ADVANCED DESIGN METHODS Content Teasers 1fr 2fr grid-template-columns: 1fr 2fr; grid-gap: 1rem; grid-template-areas: "image content"; grid-area: image; grid-area: content;
  27. 27. ADVANCED DESIGN METHODS Content Teasers grid-template-areas: "image" "content"; grid-gap: 1rem; grid-area: content; grid-area: image;
  28. 28.
  29. 29. Designing with Frameworks
  30. 30. ADVANCED DESIGN METHODS Pros & Cons ๏ Rapid prototyping ๏ Many common components included ๏ No need to know how to code (cut & paste) ๏ Tested ๏ Proven ๏ Limited to available components ๏ Opinionated ๏ Designed to solve their problems (not yours) ๏ Looks the same as everything else ๏ If not used in production, is entirely throw-away code ๏ If taken to production, could result in bloat 47
  31. 31. Credit: Friday
  32. 32. “Tiny Bootstraps, for every client.” —Dave Rupert
  33. 33. ADVANCED DESIGN METHODS Pros & Cons ๏ Designed around the project’s needs & goals ๏ Once built, you can rapidly prototype ๏ Prototyping code can be production-ready (tested, proven) ๏ Add new components as needed ๏ Update/modify components as needed ๏ You own it
 ๏ Takes time to build ๏ Need everyone on board ๏ You own it 57
  34. 34.
  35. 35. Questions? Tweet me at
 @AaronGustafson
  36. 36. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

    Be the first to comment

Slides for day 2 of my Center Centre workshop.

Views

Total views

18

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×