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

Designing Imaginative Layouts (workshop)

Andy Clarke
October 26, 2016

Designing Imaginative Layouts (workshop)

With more and more websites following the same tired layout patterns, it’s time be bring imagination back to our digital products and websites. This workshop will teach you how to design inspired layouts, without compromising accessibility, responsiveness or user experience.

Andy Clarke

October 26, 2016
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Create units in multiples of three or four, with twelve

    as an ideal, because it is a multiple of three and four. ” Khoi Vinh in ‘Ordering Disorder,’ New Riders 2010
  2. Grids help to bring order, but suprise and delight are

    key to maintaining interest. #inspireddesign
  3. Drawbacks Complicated maths Vertical centering Float drops Float clearing Same

    height columns Shrink-to-fit containers Source order dependence
  4. Presentational HTML <div class="col"> <p>Johannes Gensfleisch zur Laden zum Gutenberg

    was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.</p> </div> <div class="col"> <p>His introduction of mechanical movable type printing to Europe started the Printing Revolution and is widely regarded as the most important invention of the second millennium.</p> </div>
  5. Markup <section> <p>Johannes Gensfleisch zur Laden zum Gutenberg was a

    German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.</p> <p>His introduction of mechanical movable type printing to Europe started the Printing Revolution and is widely regarded as the most important invention of the second millennium.</p> </section>
  6. section { column-width : 32em; } Column width -moz- and

    -webkit- prefixes may also be required
  7. section { column-count : 2; } Column count -moz- and

    -webkit- prefixes may also be required
  8. @media (min-width: 48rem) { section {
 column-count : 2; }


    } @media (min-width: 64rem) { section {
 column-count : 3; }
 } Column count -moz- and -webkit- prefixes may also be required
  9. section { columns : 2 24em; } Columns -moz- and

    -webkit- prefixes may also be required
  10. section { column-gap : 2vw; } Column gap -moz- and

    -webkit- prefixes may also be required
  11. section { column-rule-width : 2px; column-rule-style : solid; 
 column-rule-color

    : #000; } Column rule -moz- and -webkit- prefixes may also be required
  12. @media (min-width : 37.5em) { .sidebar ul { column-count :

    2; column-gap : 4vw; } } @media (min-width : 48em) { .sidebar ul { column-count : 1; } } Columnised lists -moz- and -webkit- prefixes may also be required
  13. @media (min-width : 37.5em) { .cols-figure figcaption { column-count :

    2; column-gap : 4vw; } } Columnised captions -moz- and -webkit- prefixes may also be required
  14. h2 { break-before : column; break-after : avoid-column; 
 }

    Breaks -moz- and -webkit- prefixes may also be required
  15. Support 1 Supported with -webkit- prefix 2 Supported with -moz-

    prefix 13 (IE 10) 52 (2 2 ) 51 (4 1 ) 37 (15 1 ) 9 (3.1 1 ) 2.1 1 9.2 (3.2 1 ) 53
  16. Feature query @supports (column-span:all) { section {
 column-count : 2;

    }
 } @supports not (column-span:all) { section {
 padding : 0 4vw; }
 }
  17. circle () ellipse () box-values inset () polygon () Shapes

    Each shape is defined by a set of points.
  18. Floated left or right 
 A shapes element must be

    floated to enable content to wrap around it. 
 Intrinsic size
 Intrinsic size (height and width dimensions) needed to establish a coordinate system on the element; the system will be used to position the shape functions’ points on the element. The intrinsic size doesn’t have to be set using absolute values (e.g pixels), you can use percentages, which means that the shaped element can be fully responsive. Conditions
  19. img { float : left;
 background : url(gutenberg-press.png) 100% 100%;

    clip-path : polygon(…);
 shape-outside : polygon(…); } Polygon
  20. Applying flex .container { display : flex; } Turns container

    into a flex-container and doesn’t remove its block attributes
  21. Flex direction .item { flex-direction : row; /* default */

    } // row, row-reverse, column, column-reverse
  22. Unless we’ve set the dir attribute to rtl, for right-to-left

    languages, 
 this flex starts on the left and ends on the right.
  23. The ability for a flex item to grow if necessary

    and dictates the amount 
 of available space an item should take.
  24. The ability for a flex item to grow if necessary

    and dictates the amount 
 of available space an item should take.
  25. Flex-grow .box--one { flex-grow : 1; 
 } .box--two {

    flex-grow : 2; // Twice available space as siblings
 } .box--three { flex-grow : 1;
 }
  26. The ability for a flex item to grow if necessary

    and dictates the amount 
 of available space an item should take.
  27. Flex @media (min-width: 48rem) { .figure--horizontal { display : flex;

    } .figure--horizontal img { 
 flex : 4; } .figure--horizontal figcaption { 
 flex : 1; }
 
 }
  28. Order Controls the order in which items appear visually in

    a flex container. <section>
 <article>…</article> 
 <article>…</article> <article>…</article> </section>
  29. Order .item:nth-of-type(1) { 
 order : 3; } .item:nth-of-type(2) {

    
 order : 4; } .item:nth-of-type(3) { 
 order : 1; } .item:nth-of-type(4) { 
 order : 2; }
  30. Align-items flex-start: Items placed on the cross axis start line

    .content {
 align-items : flex-start; 
 }
  31. Align-items flex-end: Items placed on the cross axis end line

    .content {
 align-items : flex-end; 
 }
  32. Align-items @media (orientation:landscape) { figure {
 display : flex;
 align-items

    : flex-end; } img {
 flex : 2 0 360px; } figcaption {
 flex : 1; }
 }
  33. Justify-content flex-start: Items placed on the main axis start line

    .content {
 justify-content : flex-start;
 }
  34. Justify-content flex-end: Items placed on the main axis end line

    .content {
 justify-content : flex-end;
 }
  35. Justify-content space-between: Items distributed in the line; first item on

    the start line, last on the end .content {
 justify-content : space-between;
 }
  36. Justify-content space-around: Items distributed in the line with equal space

    around them .content {
 justify-content : space-around;
 }
  37. Align-content flex-start: lines placed at the start of the container

    .content {
 align-content : flex-start;
 }
  38. Align-content flex-end: lines placed at the end of the container

    .content {
 align-content : flex-end;
 }
  39. Align-content center: lines placed at the center of the container

    .content {
 align-content : center;
 }
  40. Align-content space-between: Lines distributed in the container; first item on

    the start line, last on the end .content {
 align-content : space-between; 
 }
  41. Align-content space-around: Lines distributed in the container with equal space

    around them .content {
 align-content : space-around; 
 }
  42. Align-self align-self: Overrides for individual flex items .content {
 align-self

    : flex-end; 
 } /* auto|flex-start|flex-end|center|baseline|stretch */
  43. article { display : flex; flex-direction : column; } article

    > a { margin-top : auto; } Pinning elements
  44. Legacy 10 2012 syntax with -ms- prefix 5.1 Old syntax

    with -webkit- prefix 414 Old syntax with -webkit- prefix 7 Old syntax with -webkit- prefix
  45. .container { display : -webkit-box; display : -moz-box; display :

    -ms-flexbox; display : -webkit-flex; display : flex; 
 } Legacy syntax
  46. @mixin flexbox() { display : -webkit-box; display : -moz-box; display

    : -ms-flexbox; display : -webkit-flex; display : flex; } .container { @include flexbox(); 
 } Flexbox Sass mixin @mixin flex($values) { -webkit-box-flex : $values; -moz-box-flex : $values; -webkit-flex : $values; -ms-flex : $values; flex : $values; } .box { @include flex(1 200px); 
 }
  47. Modernizr Isolate Flexbox compatible and non-compatible files Modernizr adds flexbox,

    no-flexbox, and flexboxlegacy classes .no-flexbox .container { /* styles */ }
  48. vw
 Equal to 1% of the width of the viewport

    
 vh
 Equal to 1% of the height of the viewport 
 vmin/vmax
 Equal to vw or vh, whichever is smaller/larger Viewport units
  49. Turn on features chrome://flags/#enable-experimental-web- platform-features or opera://flags/#enable- experimental-web-platform-features and press

    “Enable” Grid works in Firefox Nightly. In Firefox Developer Edition go to about:config and enable layout.css.grid.enabled flag Turn on Grid support in the Develop Menu under Experimental Features
  50. Markup <div class="row"> <div class="one column">…</div> <div class="eleven columns">…</div> </div>

    <div class="row"> <div class="one-half column">…</div> <div class="one-half column">…</div> </div>
  51. Markup <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">…</div> <div class="col-xs-6 col-md-4">…</div>

    </div> <div class="row"> <div class="col-xs-6 col-sm-4">…</div> <div class="col-xs-6 col-sm-4">…</div> </div>
  52. Applying grid section { display : grid; } Turns container

    into a grid container and doesn’t remove its block attributes
  53. Spanning .span--2 { grid-column-end : span 2; grid-row-end : span

    2; } .span--3 { grid-column-end : span 3; grid-row-end : span 3; }
  54. Grid section { display : grid; grid-template-columns : repeat(6, 1fr);

    grid-template-rows : repeat(3, 300px); grid-gap : 2vw; }
  55. article:nth-child(4) { grid-column : 1 / 4; grid-row : 3;

    
 } article:nth-child(6) { grid-column : 5 / 7; grid-row : 3; 
 }
  56. body { display : grid; grid-template-columns : 2fr [content-start] 


    4fr [content-end]; grid-gap : 2vw; 
 } Named lines
  57. body { display : grid; grid-template-columns : 2fr [content-start] 


    4fr [content-end]; grid-template-rows : auto [content-start] 
 auto [content-end]; grid-gap : 2vw; 
 } Named lines
  58. main { grid-column : 2; grid-row : 2; } main

    { grid-column : content-start; grid-row : content-start; } Named lines
  59. body { display : grid; grid-template-columns : [content-start] 1fr [content-end];

    grid-template-rows : auto [content-start] 
 auto [content-end]; grid-gap : 2vw; 
 } @media (min-width: 48em) { grid-template-columns : 2fr [content-start] 
 4fr [content-end]; } Breakpoints