Is web design a solved problem? Hardly! We explore ways to bring some newer techniques to create more interesting layouts and effects.

1. GreatTHE
Design
STATE O F
with CSS Grid Layout friends
WordCamp Chicago 2018
&
@stacykvernmo

2. ?
is web design a
solved problem

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. 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

7. .intro::first-letter {
initial-letter: 7;
}
initial-letter
::first-letter

8. .intro
initial-letter: 3 3;
}
::first-letter {
2

10. @supports (property: value) {
property: value;
}
@supports ( property: value )
feature queries

11. @supports (-webkit-initial-letter: 7) {
.intro::first-letter {
-webkit-initial-letter: 7;
}
}
initial letter

12. Fallback

13. Supported

14. blend mode
background-blend-mode: value ;
background-blend-mode:
multiply;

16. Shape-inside

19. h1 {
}
background-color: #fff;
mix-blend-mode: screen;

20. .bg {
}
filter: sepia(30%);

21. css filter

22. http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100

27. shape-outside: circle();
geometric shapes that can be applied to floated elements
css shapes

34. prevents a portion of an element from getting displayed
clip-path
clip-path: url(#svgname);
clip-path: polygon();
or

41. open type
font-feature-settings
font-feature-settings: "salt";

42. A

43. 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

44. &&&

47. variable fonts
1-2 font files, almost endless options

48. z

50. css grid
display: grid;
2-dimensional layout system

51. flexbox
or

59. display: grid;

60. grid-template-columns:
repeat(auto-fill,
minmax(300px, 1fr));

61. grid-auto-rows:
minmax(20vh, 200px);

62. grid-auto-rows:
minmax(100px, auto);

63. grid-gap: .02rem;

65. .gallery {
display: grid;
grid-gap: .02rem;
grid-template-columns: repeat(auto-fill,
minmax(300px, 1fr));
grid-auto-rows: minmax(20vh, 200px);
}

66. grid-row: span 2;
li:nth-of-type(2n + 2) {
}

67. flex: 1 0 auto;

68. flex: 0 0 auto;

70. footer
main
logo banner
footer
nav grid-template-areas:
"logo banner"
"nav main"
"footer footer";

71. footer
main
grid-area: main;
direct child of grid container
logo banner
footer
nav

72. grid-area: 2/2/3/3;
direct child of grid container
footer
main
logo banner
footer
nav

73. v

83. GreatTHE
Design
STATE O F
with CSS Grid Layout friends
WordCamp Chicago 2018
&
@stacykvernmo

84. Bonus
Content
WordCamp Chicago 2018
@stacykvernmo

85. gridbyexample.com
labs.jensimmons.com
resources
css-tricks guide to grid
drafts.csswg.org/css-grid/
codepen.io/collection/AYezNp/

86. or rows defined
grid-template-columns:
1fr 50rem 1fr;
grid-template-columns

87. or rows, with named lines defined in [brackets]
grid-template-columns:
[pull] 1fr [content] 50rem [push] 1fr;
grid-template-columns

88. or rows
grid-template-areas
“header header header”
“content content byline”
“………………… aside ………………”
“footer footer footer”;

89. or columns
grid-auto-rows: 30vh;
grid-auto-rows

90. grid-auto-flow
grid-auto-flow: dense;
sparse | dense & row | column

91. grid-gap
grid-column-gap | grid-row-gap
grid-gap: 30px;

92. repeat( number of repetitions, size )
repeat
grid-template-columns:
repeat(3, 1fr);

93. minmax
minmax( min size, max size )
grid-template-columns:
minmax(200px, 40rem);

94. repeat( number of repetitions, size )
auto-fill
grid-template-columns:
repeat(auto-fill, 300px);

95. [ line-name ] size [ naming-is-hard another-name ] size
named lines
grid-column:naming-is-hard;

96. grid-area: header;
grid-area
named area

97. grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area: row-main /
col-large /
row-gallery /
col-small;
grid-area

98. grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area
grid-area: 1 / 1 / 3 / 4;

99. span
span #
grid-column: 1 / span 3;

100. -#
grid-column: 1 / -1;
span # number of tracks counting from opposite end

101. Or column | grid-row-start / grid-row-end
grid-row
grid-row: 1 / 4;