GreatTHE
Design
S TATE O F
with CSS Grid Layout and friends
Front-End Camp 2017

display: none !important;
classification
job titles

shape-outside

?
Is web design a
solved problem

‘‘ Douglas Adams
I love the whooshing noise they
make as they go by.
I love deadlines.

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

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

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

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

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

::initial-letter::initial-letter

::initial-letter::initial-letter

blending mode
background-blend-mode: value ;
background-blend-mode:
multiply;

Shape-inside

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

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

css filter

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

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

CSS Shapes

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

clip-path: $path;
shape-outside: $path;

css “layout” methods
history
tables flexbox
floats grid

flexbox
or

grid-template-columns
rows
size, size, … ;
grid-template-columns:
25% 50% 25%;

fraction unit
fr
calculation of the remaining
space after any fixed items have
been accounted for

grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {
1fr 2fr 1fr

grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {

grid-template-columns:
25% 50% 25%;
display: grid;
.grid-parent {

grid-gap: 1rem;
grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {

display: grid;
.grid-parent {
grid-gap: 1rem;
grid-template-columns:
25% 50% 25%;

grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {

grid-template-columns:
1fr 2fr 50vw;
display: grid;
.grid-parent {

grid-template-columns:
1fr 2fr 50vw 100px;
display: grid;
.grid-parent {

display: grid;
.grid-parent {
grid-template-columns:
1fr 2fr 50vw 100px 12rem;

display: grid;
.grid-parent {
grid-template-columns:
1fr 2fr 50vw 100px 9rem 5%;

grid-template-columns:
1fr 1fr 1fr;
display: grid;
.grid-parent {

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

grid-template-columns:
repeat(3, 1fr);
display: grid;
.grid-parent {

grid-column-start / grid-column-end | grid-column: value;
grid-column: 1 / 4;
grid-column

grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column-start: 1;
.grid-cell {
}

grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column-start: 1;
.grid-cell {
grid-column-end: 4;
}

grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / 4;
.grid-cell {
}

grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / span 3;
.grid-cell {
}

span
span number ;
grid-column: 1 / span 3;

grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / -1;
.grid-cell {
}

-x
grid-column: 1 / -1;
-x = span x number of tracks counting from opposite end

3 2 1
grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / -3;
.grid-cell {
}

grid-row-start / grid-row-end | grid-row: value;
grid-row
grid-row: 1 / 4;

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row-start: 1 ;
.grid-cell {
}

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row-start: 1 ;
grid-row-end: 3 ;
.grid-cell {
}

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row: 1 / 3 ;
.grid-cell {
}

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row: 1 / span 2;
.grid-cell {
}

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row: 1 / - 1;
.grid-cell {
}

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

grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-area: 1 / 1 / 4 / 3 ;
.grid-cell {
}

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

grid-template-columns: 1fr [ohyeah] 1fr 1fr [ok] 1fr;
display: grid;
.grid-parent {
}
grid-column: ohyeah / ok;
.grid-cell {
}

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

“header”
“byline”
“content”
“aside”
“footer”;
grid-template-areas:

header {
grid-area: header;
}
grid-area
named area

“header header header”
“content content byline”
“………………… aside ………………”
“footer footer footer”;
grid-template-areas:

size
grid-auto-rows: 30vh;
grid-auto-columns
rows

row - fill in each row in turn, adding new rows as necessary
column - fill in each column in turn, adding new columns as necessary
dense - fill in holes earlier in the grid if smaller items come up later
sparse | dense & row | column
grid-auto-flow

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

grid-template-columns: repeat(3, 1fr);
display: grid;
.grid-parent {
}
grid-auto-flow: dense;

minmax
minmax( min size, max size )
grid-auto-rows:
minmax(100px, 300px);

auto-fill
repeat( auto-fill, size )
grid-template-columns:
repeat(auto-fill, 1fr);

put it all together
repeat( auto-fill, minmax( min size, max size ) )
grid-template-rows:
repeat(auto-fill,
minmax(300px, 1fr));

grid-gap
grid-column-gap | grid-row-gap: size
grid-gap:30px;
px, rem, em, %

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

display: grid;

grid-gap: 1rem;

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

grid-auto-rows:
minmax(26vh, 190px);

flexbox or grid?

css exclusions
arbitrary areas around which inline content can flow

css regions
Allow content from one or more elements to flow
through one or more boxes called CSS Regions.

CSS Regions
CSS Regions and Exclusions

Noooooo!

css regions + exclusions

Wilson Miner
“When We Build”
‘‘We’re actually in the
process of building an
environment where we’ll
spend most of our time for
the rest of our lives …

igalia.github.io/css-grid-layout/gridbyexample.com
labs.jensimmons.com
codepen.io/collection/XRRJGq
resources
css-tricks guide to grid
drafts.csswg.org/css-grid/
codepen.io/collection/DjVBvr

Stacy Kvernmo
@StacyKvernmo
GreatTHE
Design
S TATE O F