The Great State of Design with CSS Grid Layout and Friends
149
Great THE Design STATE OF
-
Upload
stacy-kvernmo -
Category
Design
-
view
208.367 -
download
0
Transcript of The Great State of Design with CSS Grid Layout and Friends
Great THE
DesignSTATE OF
Steve Jobs
Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do.
‘‘
I’m excitedto start working on this project!
Six moreprojects are also kicking off?
How many revisions? For each screen sizein Photoshop?
Wait, isn’t this out of scope?
Did you just sayInternetExplorer 8?
Ping! Ping!
Ping!
Ping!
8 incomingmeeting requests?
Time
Excitement
Time
Excitement
a feeling of being satisfied with how things are and not wanting
to try to make them better
noun | com·pla·cen·cy | \kəm-ˈplā-sən(t)-sē\
complacency
‘‘Douglas Adams
I love the whooshing noise they make as they go by.
I love deadlines.
Component Design
Data-informedvover
analytics | usability testing | a/b testing
If I had asked people what they wanted, they would have said
Henry Ford
faster horses.‘‘
If I had asked people what they wanted, they would have said
Henry Ford
faster horses.‘‘
Above the Fold
best practices?
3-Click Rule
best practices?
KLPA (Joshua Kulpa)
Andy Clarke, “Counting Stars: Creativity over Predictability”
‘‘I fear that we're creating a web the full of safe designs because we’re driven by the need in some of us for predictability, reliability and for repeatability …
shape-outside
?
Is web design asolved problem
➄
Prague’s new coffee scene ◇ Making bikes with bamboo The enduring craft of screen printing ◇ Discover Riga Hand-made soap ◇ Manhattan’s fashion collaborators The sugar shacks of Quebec ◇ How to taste coffee
Digital Edition, Autumn 2016
craft & create
Artist Spotlight Shyama GoldenShyama 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
95
With its origins seated deeply in the past, the process of screen printing continues to intrigue people, with the craft seeing a revival in modern times. Screen printer Jonny Akers walks us through screen printing’s origins and current incarnation.
craft & create
words Jonny Akersphotographs Elliot Jay Stocks
Enduring CraftsScreen Printing
craft & create E N D U R I N G C R A F T S
S creen printing in its basic form dates back over 2,000 years. Whether it be cutting shapes from banana leaves to make a stencil and forcing ink
made from natural pigments through them, or making frames stretched with human hair to form a mesh, people all over the world have been using screen printing to reproduce imagery for quite some time.
I encountered screen printing for the first time in 2004 while studying a fine art degree in Leeds. After a brief introduction to the printmaking facilities, I used screen printing on and off throughout my degree, but I never realised how involved I’d become with the process in the future.
Today I run a wedding stationery business called The Old Market Printing Co 1 with my wife Charlotte. With her hand-lettering, illustration, and contemp-
orary designs, we use heavyweight paper stock, and metallic and neon inks to make clean, modern, alter-native wedding stationery.
Making and printing by hand is something I’m passionate about, and one reason why I’ve never ventured into automatic printing machines. I feel that once you’re no longer pulling ink through the screen by hand, the process is too commercial and loses part of the magic of printmaking. While I’m printing by hand, I’m still in full control of the finished print, and it contains more of the experience and skill that I’ve obtained over the past 10 years.
And I’m not alone in my passion for screen printing by hand. Recently, there’s been a huge revival for all things artisanal, with screen printing included. Various websites have emerged, selling rudimentary
illustration Ed J Brown
1. theoldmarketprintingco.com
.intro::first-letter { initial-letter: 7; }initial-letter
::first-letter7
@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
CSS Shapes
Shape-inside
Shape-inside
http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100
bennettfeely.com/image-effects
layered backgrounds
css “layout” methods
history
tables flexboxfloats grid
flexbox
or
implicit explicit
grid-template- columnsrows
size, size;
grid-template-columns: 1fr 2fr 1fr;
repeat( number of repitions, size )
repeat
grid-template-columns: repeat(3, 1fr);
grid-column-start / grid-column-end | grid-column: value;
grid-column: 1 / 4;
grid-column
spanspan number ;
grid-column: 1 / span 3;
-1
grid-column: 1 / -1;
-1 = value used to span the remaining row/column
grid-row-start / grid-row-end | grid-row: value;
grid-row
grid-row: 1 / 4;
grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area
grid-area: 1/1/3/4;
[ line-name ] size [ line2-name another-name ] size
named lines
grid-column: line-name;
[ line-name ] size [ line2-name another-name ] size
grid-area: row-main / col-large / row-gallery / col-small;
grid-area
“header” “byline” “content” “aside” “footer”;
grid-template-area
grid-template-area: “header header header” “content content byline” “………………… aside ………………” “footer footer footer”;
grid-template-area
header { grid-area: header; }
grid-areaname
size
grid-auto-rows: 20vh;
grid-auto-columnsrows
dense - fill in holes earlier in the grid if smaller items come up later
sparse | dense & row | column
grid-auto-flow
minmaxminmax( min size, max size )
grid-auto-rows: minmax(100px, 30vh);
auto-fillrepeat( auto-fill, size )
grid-template-columns: repeat(auto-fill, 1fr);
all together nowrepeat( auto-fill, minmax( min size, max size ) )
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
grid-gapgrid-column-gap | grid-row-gap: size
grid-gap:30px; px, rem, em
start | end | center | stretch | space-around | space-between | space-evenly
justify-content: start;
justify-content
justify-itemsstart | end | center | stretch
justify-items: start;
justify-selfstart | end | center | stretch
justify-self: start;
align-contentstart | end | center | stretch | space-around | space-between | space-evenly
align-content: start;
align-itemsstart | end | center | stretch
align-self: start;
align-selfstart | end | center | stretch
align-self: start;
.gallery { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(30vh, 190px); }
by Rachel Smith, then Miriam, and definitely Stacy
igalia.github.io/css-grid-layout/gridbyexample.com
labs.jensimmons.com
codepen.io/stacy
resources
css-tricks guide to grid
drafts.csswg.org/css-grid/
codepen.io/collection/XbwVGL
wishlistCSS Regions and 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 …
Stacy Kvernmo@StacyKvernmo
Great THE
DesignSTATE OF
