O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

The Great State of Design 2018

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 101 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a The Great State of Design 2018 (20)

Anúncio

Mais recentes (20)

The Great State of Design 2018

  1. 1. GreatTHE Design STATE O F with CSS Grid Layout friends WordCamp Chicago 2018 & @stacykvernmo
  2. 2. ? is web design a solved problem
  3. 3. craft & create Artist Spotlight Shyama Golden Shyama Golden,1 known for her huge, humorous paintings, has transitioned from being a graphic designer to an illustrator and, more recently, from oil paints to the iPad. interview Elliot Jay Stocks artwork courtesy of Shyama Golden D id you always want to be an illustrator? Yes—I’ve been drawing ever since I was really little, but I studied graphic design when I went to col- lege, and pretty much worked solely on graphic design for 10 years after that. However, the school I went to was really focused on studio art; it was more traditional, I think, than most schools. I did a lot of screen printing too, which I love because it uses both the problem- solving skills of a designer and the drawing skill of an illustrator. I stuck with graphic design for a really long time, but there was always a part of me that wanted to draw more. Recently I’ve transitioned into doing that: these days I do branding and identity design as a part-time job, and spend most of my time doing illustration. Even with 80 1. shyamagolden.com
  4. 4. craft & create Artist Spotlight Shyama Golden Shyama Golden,1 known for her huge, humorous paintings, has transitioned from being a graphic designer to an illustrator and, more recently, from oil paints to the iPad. interview Elliot Jay Stocks artwork courtesy of Shyama Golden D id you always want to be an illustrator? Yes—I’ve been drawing ever since I was really little, but I studied graphic design when I went to col- lege, and pretty much worked solely on graphic design for 10 years after that. However, the school I went to was really focused on studio art; it was more traditional, I think, than most schools. I did a lot of screen printing too, which I love because it uses both the problem- solving skills of a designer and the drawing skill of an illustrator. I stuck with graphic design for a really long time, but there was always a part of me that wanted to draw more. Recently I’ve transitioned into doing that: these days I do branding and identity design as a part-time job, and spend most of my time doing illustration. Even with 80 1. shyamagolden.com
  5. 5. .intro::first-letter { initial-letter: 7; } initial-letter ::first-letter
  6. 6. .intro initial-letter: 3 3; } ::first-letter { 2
  7. 7. @supports (property: value) { property: value; } @supports ( property: value ) feature queries
  8. 8. @supports (-webkit-initial-letter: 7) { .intro::first-letter { -webkit-initial-letter: 7; } } initial letter
  9. 9. Fallback
  10. 10. Supported
  11. 11. blend mode background-blend-mode: value ; background-blend-mode: multiply;
  12. 12. Shape-inside
  13. 13. h1 { } background-color: #fff; mix-blend-mode: screen;
  14. 14. .bg { } filter: sepia(30%);
  15. 15. css filter
  16. 16. http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100
  17. 17. shape-outside: circle(); geometric shapes that can be applied to floated elements css shapes
  18. 18. prevents a portion of an element from getting displayed clip-path clip-path: url(#svgname); clip-path: polygon(); or
  19. 19. open type font-feature-settings font-feature-settings: "salt";
  20. 20. A
  21. 21. g g g g g g g g g g g g g g g g gg g g g g g g g g g g g g g g g g g g
  22. 22. &&&
  23. 23. variable fonts 1-2 font files, almost endless options
  24. 24. z
  25. 25. css grid display: grid; 2-dimensional layout system
  26. 26. flexbox or
  27. 27. display: grid;
  28. 28. grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  29. 29. grid-auto-rows: minmax(20vh, 200px);
  30. 30. grid-auto-rows: minmax(100px, auto);
  31. 31. grid-gap: .02rem;
  32. 32. .gallery { display: grid; grid-gap: .02rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(20vh, 200px); }
  33. 33. grid-row: span 2; li:nth-of-type(2n + 2) { }
  34. 34. flex: 1 0 auto;
  35. 35. flex: 0 0 auto;
  36. 36. footer main logo banner footer nav grid-template-areas: "logo banner" "nav main" "footer footer";
  37. 37. footer main grid-area: main; direct child of grid container logo banner footer nav
  38. 38. grid-area: 2/2/3/3; direct child of grid container footer main logo banner footer nav
  39. 39. v
  40. 40. GreatTHE Design STATE O F with CSS Grid Layout friends WordCamp Chicago 2018 & @stacykvernmo
  41. 41. Bonus Content WordCamp Chicago 2018 @stacykvernmo
  42. 42. gridbyexample.com labs.jensimmons.com resources css-tricks guide to grid drafts.csswg.org/css-grid/ codepen.io/collection/AYezNp/
  43. 43. or rows defined grid-template-columns: 1fr 50rem 1fr; grid-template-columns
  44. 44. or rows, with named lines defined in [brackets] grid-template-columns: [pull] 1fr [content] 50rem [push] 1fr; grid-template-columns
  45. 45. or rows grid-template-areas “header header header” “content content byline” “………………… aside ………………” “footer footer footer”;
  46. 46. or columns grid-auto-rows: 30vh; grid-auto-rows
  47. 47. grid-auto-flow grid-auto-flow: dense; sparse | dense & row | column
  48. 48. grid-gap grid-column-gap | grid-row-gap grid-gap: 30px;
  49. 49. repeat( number of repetitions, size ) repeat grid-template-columns: repeat(3, 1fr);
  50. 50. minmax minmax( min size, max size ) grid-template-columns: minmax(200px, 40rem);
  51. 51. repeat( number of repetitions, size ) auto-fill grid-template-columns: repeat(auto-fill, 300px);
  52. 52. [ line-name ] size [ naming-is-hard another-name ] size named lines grid-column:naming-is-hard;
  53. 53. grid-area: header; grid-area named area
  54. 54. grid-row-start / grid-column-start / grid-row-end / grid-column-end grid-area: row-main / col-large / row-gallery / col-small; grid-area
  55. 55. grid-row-start / grid-column-start / grid-row-end / grid-column-end grid-area grid-area: 1 / 1 / 3 / 4;
  56. 56. span span # grid-column: 1 / span 3;
  57. 57. -# grid-column: 1 / -1; span # number of tracks counting from opposite end
  58. 58. Or column | grid-row-start / grid-row-end grid-row grid-row: 1 / 4;

×