What's new in Responsive Design - Rachel Andrew

1. What’s new in
Responsive Design
RACHEL ANDREW AT WEY WEY WEB. DECEMBER 2022

2. How do we support all these
different screen sizes?

4. Responsive Web Design
• Calculating percentages for floated layouts
• Squishing images
• Leaning on Media Queries

5. column-count: 3

6. Flexbox responds to
the content

7. display: flex

8. display: flex

9. What does it mean to respond
to content?

10. flex-basis: auto
max-content

11. flex-basis: auto
Space reduced from max-content until all boxes fit

12. We don’t have to line
everything up.
Sometimes what we need is just to make things fit nicely.

13. CSS Grid
For when you do want to line everything up.

14. .grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

15. repeat(12, 1fr)

16. .grid {
display: grid;
grid-template-columns:
repeat(12, minmax(auto, 1fr));
}

17. repeat(12, 1fr)

18. .grid {
display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));
}

19. repeat(12, minmax(0,1fr))

20. Responding to content in a grid
layout world

21. auto

22. grid-template-columns: repeat(3, auto)

23. justify-content: start

24. repeat(12, 1fr)

25. flex-basis: auto
repeat(3, 1fr)

26. min-content, max-content, fit-
content
Directing content-based sizing

27. repeat(3, min-content)

28. repeat(3, max-content)

29. repeat(3, fit-content(400px))
max-content 400px

30. .media {
display: grid;
grid-template-columns: fit-content(300px) 1fr;
gap: 20px;
}

32. Media Queries

33. column-width: 200px

34. flex-wrap: wrap

35. repeat(auto-fill, minmax(200px, 1fr)

36. The first rule of Media Queries
is …
Do I need a media query?

37. .wrapper {
display: grid;
grid-template-areas:
"hd"
"bd"
"sd"
"ft";
}

39. @media (min-width: 600px) {
.wrapper {
grid-template-columns: 3fr 1fr;
grid-template-areas:
"hd hd"
"bd sd"
"ft ft";
}
}

41. More than just screen size
What else could we respond to?

42. What type of pointer do I have?

43. @media (pointer:coarse) {
.pointer::before {
content: "You have a coarse pointer";
}
}
@media (pointer:fine) {
.pointer::before {
content: "You have a fine pointer";
}
}

44. Can I hover?

45. @media (hover) {
.can-i-hover::after {
content: "You look like you can hover.";
}
}
@media (hover:none) {
.can-i-hover::after {
content: "I don't think you can hover.";
}
}

46. Testing capabilities
Check for screen size, but also pointer type and hover ability to understand the
environment your site is being used in.

47. Responding to the wishes of the
visitor
Media Queries Level 5 and User Preference Media Features

48. prefers-reduced-motion

49. @media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}

50. New syntax for range media
queries

51. @media (min-width: 600px) {
.wrapper {
grid-template-columns: 3fr 1fr;
grid-template-areas:
"hd hd"
"bd sd"
"ft ft";
}
}

52. @media (width > 600px) {
.wrapper {
grid-template-columns: 3fr 1fr;
grid-template-areas:
"hd hd"
"bd sd"
"ft ft";
}
}

53. Container queries

54. .element {
container-type: inline-size;
}

55. .element {
container-type: inline-size;
container-name: sidebar;
}

56. @container (min-width: 500px) {
}

57. @container sidebar (min-width: 500px) {
}

59. Subgrid

60. .child-grid {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}

61. .main-grid {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: repeat(4, minmax(150px, auto));
}
.child-grid {
grid-column: 4 / 8;
grid-row: 2 / 4;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}

64. Subgrid + container queries

65. @container my-grid (min-width: 600px) {
.item {
display: grid;
grid-template-columns: subgrid;
}
}

68. :has()

69. li:has(h2) {
}

70. @container (min-width: 500px) {
.card:has(figure+.content) {
display: grid;
grid-template-columns: .8fr 1fr;
gap: 10px;
}
}

72. What does it mean to do
responsive design today?

73. Respond to content

74. Use new layout and image
features

75. Use media features and
container queries to enhance
your layout.

76. It’s not just about screen, or
even component, size

77. Responding to needs and
environment

78. Don’t expect people to fix
something to use your website.
Respond to meet them where
they are.

79. Thank you!
https://noti.st/rachelandrew