GreatTHE
Design
S TATE O F
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 ...
I’m excited
to start working 

on this project!
Six more
projects are also
kicking off?
How many
revisions? For 

each screen size

in Photoshop?
Wait, isn’t this
out of scope?
Did you just say
Internet

Explorer 8?
Ping!
Ping!
Ping!
Ping!
8 incoming
meeting 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-ˈp...
‘‘ Douglas Adams
I love the whooshing noise they
make as they go by.
I love deadlines.
Component
Design
Data-informed
vover
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 ...
shape-outside
?
Is web design a
solved problem
Prague’s new coffee scene ◇ Making bikes with bamboo
The enduring craft of screen printing ◇ Discover Riga
Hand-made soap ...
.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-l...
::initial-letter::initial-letter
::initial-letter::initial-letter
CSS Shapes
Shape-inside
CSSBlendMode
CSSBlendMode
Shape-inside
Clip path
Clip path
css filter
http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100
bennettfeely.com/image-effects
layered backgrounds
css “layout” methods
history
tables flexbox
floats grid
flexbox
or
implicit explicit
grid-template-columns
rows
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
span
span 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-te...
header {
grid-area: header;
}
grid-area
name
size
grid-auto-rows:20vh;
grid-auto-columns
rows
dense - fill in holes earlier in the grid
if smaller items come up later
sparse | dense & row | column
grid-auto-flow
minmax
minmax( min size, max size )
grid-auto-rows:
minmax(100px,30vh);
auto-fill
repeat( auto-fill, size )
grid-template-columns:
repeat(auto-fill, 1fr);
all together now
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
start | end | center | stretch | space-around | space-between | space-evenly
justify-content: start;
justify-content
justify-items
start | end | center | stretch
justify-items: start;
justify-self
start | end | center | stretch
justify-self: start;
align-content
start | end | center | stretch | space-around | space-between | space-evenly
align-content: start;
align-items
start | end | center | stretch
align-self: start;
align-self
start | end | center | stretch
align-self: start;
.gallery {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
grid-auto-rows: mi...
display: grid;
grid-gap: 1rem;
grid-template-columns:
repeat(auto-fill,
minmax(200px, 1fr));
grid-auto-rows:
minmax(26vh, 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...
wishlist
CSS 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...
Stacy Kvernmo
@StacyKvernmo
GreatTHE
Design
S TATE O F
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
Nächste SlideShare
Wird geladen in …5
×

The Great State of Design with CSS Grid Layout and Friends

235.179 Aufrufe

Veröffentlicht am

For far too long we've been forced to reuse layout patterns that have worked in the past, creating a web full of sites that all look the same. Narrow timelines, browser support restrictions and lack of a true grid system have led us to create work that is "good enough".

I've spent years exploring how we can make the web a more unique space. With some of the newer CSS techniques available, we can start to make more creative designs. CSS Grid Layout is on the horizon and will play a major role in the design of our sites. Finally having a true, 2 dimensional grid will give our layouts much more flexibility and it is on us to explore the possibilities.

This talk was presented at CSS Day 2016.

Veröffentlicht in: Design
29 Kommentare
2.678 Gefällt mir
Statistik
Notizen
  • nice, Find Latest Presentation on Free at www.ThesisScientist.com
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • This will change your life, be prepared http://bit.ly/2aUTI3N
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • If your spouse cheats contact cyberhackanswers@gmail.com he can help you. very talented and immaculate I call him the genius, we've had a few runnings together and I am always more than satisfied with his services. Some of the tricks he did for me are cloning my girlfriend's phone and topping my credit score to an awesome number. If you need such services drop him a mail at cyberhackanswers@gmail.com
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • nice, find more latest PPTs on www.ThesisScientist.com.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello dear or Madam. I want to tell you that we are a group of individuals who give money to people who are in need. We finance large and small businesses. We also invest in projects around the world. For those who need loan money, we grant it at an interest rate of 3% per annum, and repayment begins 03 months after receiving the loan   . We grant the loan from 3000 euros to 1.000.000 euros. Please contact us if you are in need. groupeinvestors00@gmail.com Thanks for understanding .
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
235.179
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
45.855
Aktionen
Geteilt
0
Downloads
3.792
Kommentare
29
Gefällt mir
2.678
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

The Great State of Design with CSS Grid Layout and Friends

  1. GreatTHE Design S TATE O F
  2. 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. ‘‘
  3. I’m excited to start working on this project!
  4. Six more projects are also kicking off?
  5. How many revisions? For 
 each screen size
 in Photoshop?
  6. Wait, isn’t this out of scope?
  7. Did you just say Internet
 Explorer 8?
  8. Ping! Ping! Ping! Ping!
  9. 8 incoming meeting requests?
  10. Time Excitement
  11. Time Excitement
  12. 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
  13. ‘‘ Douglas Adams I love the whooshing noise they make as they go by. I love deadlines.
  14. Component Design
  15. Data-informed vover analytics | usability testing | a/b testing
  16. If I had asked people what they wanted, they would have said Henry Ford faster horses.‘‘
  17. If I had asked people what they wanted, they would have said Henry Ford faster horses.‘‘
  18. Above the Fold best practices?
  19. 3-Click Rule best practices?
  20. 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 …
  21. shape-outside
  22. ? Is web design a solved problem
  23. 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 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 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 Akers photographs Elliot Jay Stocks Enduring Crafts Screen 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 Co1 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
  24. .intro::first-letter { initial-letter: 7; } initial-letter ::first-letter 7
  25. @supports (property: value) { property: value; } @supports ( property: value ) feature queries
  26. @supports (initial-letter: 7) { .intro::first-letter { initial-letter: 7; } } initial letter
  27. @supports (initial-letter: 7) or (-webkit-initial-letter: 7) { .intro::first-letter { initial-letter: 7; -webkit-initial-letter: 7; } } initial letter
  28. ::initial-letter::initial-letter
  29. ::initial-letter::initial-letter
  30. CSS Shapes
  31. Shape-inside
  32. CSSBlendMode
  33. CSSBlendMode
  34. Shape-inside
  35. Clip path
  36. Clip path
  37. css filter
  38. http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100
  39. bennettfeely.com/image-effects layered backgrounds
  40. css “layout” methods history tables flexbox floats grid
  41. flexbox or
  42. implicit explicit
  43. grid-template-columns rows size, size; grid-template-columns: 1fr 2fr 1fr;
  44. repeat( number of repitions, size ) repeat grid-template-columns: repeat(3, 1fr);
  45. grid-column-start / grid-column-end | grid-column: value; grid-column: 1 / 4; grid-column
  46. span span number ; grid-column: 1 / span 3;
  47. -1 grid-column: 1 / -1; -1 = value used to span the remaining row/column
  48. grid-row-start / grid-row-end | grid-row: value; grid-row grid-row: 1 / 4;
  49. grid-row-start / grid-column-start / grid-row-end / grid-column-end grid-area grid-area: 1/1/3/4;
  50. [ line-name ] size [ line2-name another-name ] size named lines grid-column: line-name;
  51. [ line-name ] size [ line2-name another-name ] size grid-area: row-main / col-large / row-gallery / col-small; grid-area
  52. “header” “byline” “content” “aside” “footer”; grid-template-area
  53. grid-template-area: “header header header” “content content byline” “………………… aside ………………” “footer footer footer”; grid-template-area
  54. header { grid-area: header; } grid-area name
  55. size grid-auto-rows:20vh; grid-auto-columns rows
  56. dense - fill in holes earlier in the grid if smaller items come up later sparse | dense & row | column grid-auto-flow
  57. minmax minmax( min size, max size ) grid-auto-rows: minmax(100px,30vh);
  58. auto-fill repeat( auto-fill, size ) grid-template-columns: repeat(auto-fill, 1fr);
  59. all together now repeat( auto-fill, minmax( min size, max size ) ) grid-template-rows: repeat(auto-fill, minmax(300px,1fr));
  60. grid-gap grid-column-gap | grid-row-gap: size grid-gap:30px; px, rem, em
  61. start | end | center | stretch | space-around | space-between | space-evenly justify-content: start; justify-content
  62. justify-items start | end | center | stretch justify-items: start;
  63. justify-self start | end | center | stretch justify-self: start;
  64. align-content start | end | center | stretch | space-around | space-between | space-evenly align-content: start;
  65. align-items start | end | center | stretch align-self: start;
  66. align-self start | end | center | stretch align-self: start;
  67. .gallery { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(30vh, 190px); }
  68. display: grid;
  69. grid-gap: 1rem;
  70. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  71. grid-auto-rows: minmax(26vh, 190px);
  72. by Rachel Smith, then Miriam, and definitely Stacy
  73. 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
  74. wishlist CSS Regions and Exclusions
  75. 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 …
  76. Stacy Kvernmo @StacyKvernmo GreatTHE Design S TATE O F

×