Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Event Apart Seattle 2017

Jen Simmons
April 04, 2017

An Event Apart Seattle 2017

Jen Simmons

April 04, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms

    Object Fit Clip-path Masking Shape-outside Initial-letter
  2. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms

    Object Fit Clip-path Masking Shape-outside Initial-letter Flow Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else in CSS
  3. You define "e size and/or number of rows and/or columns

    Let "e browser define number or size of rows (or columns)
  4. Place each #em 
 into a specific 
 cell or

    area Let "e browser place every"ing using auto-placement algor#hm
  5. portion of available 
 space — 2 parts set by

    
 content size fixed portion of available 
 space — 1 part
  6. My deep respect for form and positive and negative space

    comes from studying Frank Lloyd Wright ’s idea of compression and expansion. You walk into a F.L.W. building and the entrance way is so small it makes you almost dip your head. And then as soon as you walk into the main room, he blows up the space, and it makes you feel ‘oh, that ’s so good’. — Platon, photographer “
  7. li:nth-child(1) { grid-row: 1 / 4; grid-column: 1 / 4;

    } li:nth-child(2) { grid-row: 3 / 6; grid-column: 3 / 6; }
  8. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed

    by Stanley Kubrick. Storyboards created by Saul Bass.
  9. what does it mean to have a 
 reading experience

    with 
 a frame, where things move in and out of that frame?
  10. what does it mean to have a 
 interaction experience

    with a frame, where things move in and out of that frame?
  11. “ THE VIGNELLI CANON Great designs can be achieved without

    the use of the grid, but the grid is a very useful tool to guarantee results. Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.
  12. ul { display: grid; grid-template-columns: repeat(4, 1fr); } li:nth-child(1) {

    grid-row: 1; grid-column: 2; } li:nth-child(2) { grid-row: 2; grid-column: 4; } li:nth-child(3) { grid-row: 3; grid-column: 3; }
  13. 1. Control the size of the page? Nope. 2. Line

    things up? Yes. Easy. 3. Create white space? Yes, absolutely. 4. Maintain aspect ratios? Nope. Not yet.
  14. This is a phrase with several words. This is a

    phrase with several words. This is a phrase with several words.
  15. 100% x x x 2em 2em @media (min-width: 600px) {

    .box { width: calc(100-(2*2em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}
  16. What happens when parts of the content / interface are

    ‘missing’? Or are shorter / longer than ‘ideal’?
  17. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

    Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
  18. A basic design is functional. 
 A great one will

    
 say something.” — Tinker Hatfield, shoe designer for Nike “