$30 off During Our Annual Pro Sale. View Details »

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. View Slide

  2. Designing and developing imaginative layouts, Australia 2016
    Designing
    imaginative
    layouts
    With Andy Clarke
    @malarkey

    View Slide

  3. View Slide

  4. View Slide

  5. Speakerdeck
    https://speakerdeck.com/malarkey/
    #inspireddesign

    View Slide

  6. Designing and developing imaginative layouts, Australia 2016

    View Slide

  7. Morning
    Designing imaginative layouts
    Systems
    Anatomy
    Types
    Ratios
    Compound
    Practical

    View Slide

  8. Developing imaginative layouts
    Columns
    Shapes
    Practical
    Afternoon
    Flexible boxes
    Grid

    View Slide

  9. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  10. Alexey Brodovitch

    View Slide

  11. Harpers Bazaar magazine 1934–1958

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. Designing and developing imaginative layouts, Australia 2016
    Grid systems

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. 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

    View Slide

  37. Designing and developing imaginative layouts, Australia 2016
    Grid anatomy

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. Designing and developing imaginative layouts, Australia 2016
    Grid types

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. Designing and developing imaginative layouts, Australia 2016
    Ratios

    View Slide

  59. View Slide

  60. Grids are fundamentally
    about proportions, the
    relationship between
    content and viewport.
    #inspireddesign

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. To be ‘rational,’ ratios
    must include whole
    numbers. Irrational ratios
    include fractions.
    #inspireddesign

    View Slide

  81. Designing and developing imaginative layouts, Australia 2016
    Gridset

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. Grids help to bring order,
    but suprise and delight are
    key to maintaining interest.
    #inspireddesign

    View Slide

  107. Designing and developing imaginative layouts, Australia 2016
    Get creative

    View Slide

  108. View Slide

  109. View Slide

  110. Example content
    https://goo.gl/PfyCQC

    View Slide

  111. Designing and developing imaginative layouts, Australia 2016
    Take a break

    View Slide

  112. Designing and developing imaginative layouts, Australia 2016
    Welcome back

    View Slide

  113. View Slide

  114. Designing and developing imaginative layouts, Australia 2016
    Symmetry

    View Slide

  115. View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. View Slide

  124. View Slide

  125. View Slide

  126. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. View Slide

  131. Designing and developing imaginative layouts, Australia 2016
    Compound grid

    View Slide

  132. Pros
    Distinctive
    Flexible
    Compound grid
    Mathematics
    Cons

    View Slide

  133. View Slide

  134. View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  142. View Slide

  143. Designing and developing imaginative layouts, Australia 2016
    Modular grid

    View Slide

  144. View Slide

  145. View Slide

  146. View Slide

  147. View Slide

  148. View Slide

  149. View Slide

  150. View Slide

  151. View Slide

  152. View Slide

  153. You don’t need to fill
    every grid module
    with content
    #inspireddesign

    View Slide

  154. View Slide

  155. View Slide

  156. View Slide

  157. View Slide

  158. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  159. View Slide

  160. View Slide

  161. View Slide

  162. Designing and developing imaginative layouts, Australia 2016
    Get creative

    View Slide

  163. Reading list

    View Slide

  164. Designing and developing imaginative layouts, Australia 2016
    Anything we missed?

    View Slide

  165. View Slide

  166. Designing and developing imaginative layouts, Australia 2016
    Developing
    imaginative
    layouts
    With Andy Clarke
    @malarkey

    View Slide

  167. Designing and developing imaginative layouts, Australia 2016
    Welcome

    View Slide

  168. Developing imaginative layouts
    Columns
    Shapes
    Practical
    Afternoon
    Flexible boxes
    Grid

    View Slide

  169. Speakerdeck
    https://speakerdeck.com/malarkey/
    #inspireddesign

    View Slide

  170. Today’s browsers
    Chrome Canary Firefox Nightly Safari Technology Preview
    https://goo.gl/hEOhjB
    https://goo.gl/MqX7eh https://goo.gl/SAeD4H

    View Slide

  171. View Slide

  172. View Slide

  173. View Slide

  174. Drawbacks
    Complicated maths
    Vertical centering
    Float drops
    Float clearing
    Same height columns
    Shrink-to-fit containers
    Source order dependence

    View Slide

  175. Vertical centring solved

    View Slide

  176. Float drop & clearing solved

    View Slide

  177. Equal height columns solved

    View Slide

  178. Source order dependence helped

    View Slide

  179. Designing and developing imaginative layouts, Australia 2016
    Multiple columns

    View Slide

  180. View Slide

  181. View Slide

  182. View Slide

  183. View Slide

  184. View Slide

  185. Advantages
    Improves readability

    Manages the measure

    Reduces purely presentational markup

    View Slide

  186. View Slide

  187. View Slide

  188. View Slide

  189. Presentational HTML

    Johannes Gensfleisch zur Laden zum Gutenberg was a
    German blacksmith, goldsmith, printer, and publisher
    who introduced printing to Europe.


    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.

    View Slide

  190. Properties
    Column count
    Column width
    Column span
    Break after
    Column gap
    Column rule
    Break before

    View Slide

  191. Markup

    Johannes Gensfleisch zur Laden zum Gutenberg was a
    German blacksmith, goldsmith, printer, and publisher
    who introduced printing to Europe.
    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.

    View Slide

  192. section {
    column-width : 32em;
    }
    Column width
    -moz- and -webkit- prefixes may also be required

    View Slide

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

    View Slide

  194. @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

    View Slide

  195. section {
    columns : 2 24em;
    }
    Columns
    -moz- and -webkit- prefixes may also be required

    View Slide

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

    View Slide

  197. section {
    column-rule-width : 2px;
    column-rule-style : solid; 

    column-rule-color : #000;
    }
    Column rule
    -moz- and -webkit- prefixes may also be required

    View Slide

  198. View Slide

  199. @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

    View Slide

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

    View Slide

  201. View Slide

  202. View Slide








  203. Spanning columns

    View Slide

  204. .cols__span {
    column-span : all;
    }
    Spanning columns
    Column-span is not supported in Firefox

    View Slide

  205. View Slide

  206. View Slide

  207. View Slide

  208. h2 {
    break-before : column;
    break-after : avoid-column; 

    }
    Breaks
    -moz- and -webkit- prefixes may also be required

    View Slide

  209. 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

    View Slide

  210. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  211. View Slide

  212. View Slide

  213. View Slide

  214. Feature query
    @supports (column-span:all) {
    section {

    column-count : 2; }

    }

    View Slide

  215. Feature query
    @supports (column-span:all) {
    section {

    column-count : 2; }

    }
    @supports not (column-span:all) {
    section {

    padding : 0 4vw; }

    }

    View Slide

  216. Feature query
    @supports (column-count:2) or (-webkit-column-count:2) {
    section {

    column-count : 2; }

    }

    View Slide

  217. Feature query
    @supports (column-count:2) and (column-span:all {
    section {

    column-count : 2; }
    }

    View Slide

  218. Designing and developing imaginative layouts, Australia 2016
    Shapes

    View Slide

  219. View Slide

  220. View Slide

  221. View Slide

  222. View Slide

  223. .shapes__circle {
    shape-outside : circle ( );
    // Content will wrap around a shape
    }
    Shapes

    View Slide

  224. circle ()
    ellipse ()
    box-values
    inset ()
    polygon ()
    Shapes
    Each shape is defined by a set of points.

    View Slide

  225. 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

    View Slide

  226. img {
    float : left;
    shape-outside : circle ();
    }
    Circle

    View Slide

  227. img {
    float : left;
    shape-outside : circle ();

    shape-margin : 22px;
    }
    Shape margin

    View Slide

  228. img {
    float : left;
    shape-outside : ellipse ();

    }
    Ellipse

    View Slide

  229. img {
    float : left;
    shape-outside : inset ();

    }
    Inset

    View Slide

  230. img {
    float : left;

    background : url(gutenberg-press.png) 100% 100%;
    clip-path : polygon(…);

    shape-outside : polygon(…);
    }
    Polygon

    View Slide

  231. View Slide

  232. View Slide

  233. View Slide

  234. View Slide

  235. View Slide

  236. View Slide

  237. View Slide

  238. View Slide

  239. Support
    1 Supported with -webkit- prefix
    37 24
    7.1 1
    52 8 1
    53 4

    View Slide

  240. Designing and developing imaginative layouts, Australia 2016
    Get technical

    View Slide

  241. Example content
    https://goo.gl/PfyCQC

    View Slide

  242. Designing and developing imaginative layouts, Australia 2016
    Break

    View Slide

  243. Designing and developing imaginative layouts, Australia 2016
    Welcome back

    View Slide

  244. Designing and developing imaginative layouts, Australia 2016
    Flexible boxes

    View Slide

  245. Advantages
    More flexible layouts
    Visual content reordering
    Column height matching

    View Slide

  246. Main & cross axis
    main axis
    cross axis

    View Slide

  247. Applying flex
    .container {
    display : flex;
    }
    Turns container into a flex-container and doesn’t remove its block attributes

    View Slide

  248. View Slide

  249. Applying flex
    .container {
    display : inline-flex;
    }
    Container will not fill available horizontal space

    View Slide

  250. Applying flex






    View Slide

  251. Flex direction
    .item {
    flex-direction : row; /* default */
    }
    // row, row-reverse, column, column-reverse

    View Slide

  252. 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.

    View Slide

  253. Reverse
    .item {
    flex-direction : row-reverse;
    }

    View Slide

  254. Reversing the flex-direction changes this horizontal layout without altering the markup.

    View Slide

  255. Column




    View Slide

  256. Column
    .figure--classic {
    flex-direction : column;
    }

    View Slide

  257. View Slide

  258. Column




    View Slide

  259. Column-reverse
    .figure--reverse {
    flex-direction : column-reverse;
    }

    View Slide

  260. View Slide

  261. Figcaption
    .figure--reverse figcaption {
    max-width : 50%; 

    }

    View Slide

  262. View Slide

  263. .container {
    flex-wrap : nowrap; /* default */
    }
    Wrapping flex items

    View Slide

  264. .container {
    flex-wrap : wrap;
    }
    Wrapping flex items

    View Slide

  265. View Slide

  266. .container {
    flex-wrap : wrap-reverse;
    }
    Wrap-reverse

    View Slide

  267. View Slide

  268. Flex-flow
    .container {
    flex-flow : row nowrap;
    }

    View Slide

  269. View Slide

  270. Flex-grow
    // Boxes have equal width
    .box {
    flex-grow : 1; 

    }

    View Slide

  271. The ability for a flex item to grow if necessary and dictates the amount 

    of available space an item should take.

    View Slide

  272. The ability for a flex item to grow if necessary and dictates the amount 

    of available space an item should take.

    View Slide

  273. Flex-grow
    .box--one {
    flex-grow : 1; 

    }
    .box--two {
    flex-grow : 2;
    // Twice available space as siblings

    }
    .box--three {
    flex-grow : 1;

    }

    View Slide

  274. The ability for a flex item to grow if necessary and dictates the amount 

    of available space an item should take.

    View Slide

  275. Flex




    View Slide

  276. Flex
    @media (min-width: 48rem) {
    .figure--horizontal {
    display : flex; }
    .figure--horizontal img { 

    flex : 4; }
    .figure--horizontal figcaption { 

    flex : 1; }


    }

    View Slide

  277. View Slide

  278. Flex
    @media (min-width: 48rem) {
    .figure--horizontal-reverse {
    display : flex;

    flex-direction : row-reverse; }
    }

    View Slide

  279. View Slide

  280. Flex-basis

    … 



    View Slide

  281. Flex-basis
    article { 

    flex-basis : 400px; 

    }

    View Slide

  282. View Slide

  283. Flex-basis
    article:first-of-type { 

    flex-grow : 1; 

    }

    View Slide

  284. View Slide

  285. Order
    Controls the order in which items appear visually in a flex container.

    … 




    View Slide

  286. Order
    section { 

    display : flex; 

    flex-direction : column;
    }

    View Slide

  287. View Slide

  288. Order
    article:last-of-type { 

    order : -1; 

    }

    View Slide

  289. View Slide

  290. 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; }

    View Slide

  291. View Slide

  292. Align-items
    flex-start: Items placed on the cross axis start line
    .content {

    align-items : flex-start; 

    }

    View Slide

  293. View Slide

  294. Align-items
    flex-end: Items placed on the cross axis end line
    .content {

    align-items : flex-end; 

    }

    View Slide

  295. View Slide

  296. Align-items
    center: items centered in the cross axis
    .content {

    align-items : center; 

    }

    View Slide

  297. View Slide

  298. Align-items
    stretch (default): items stretch to fill container height
    .content {

    align-items : stretch; /* default */

    }

    View Slide

  299. View Slide

  300. Align-items
    baseline: items aligned so that their baselines match
    .content {

    align-items : baseline;

    }

    View Slide

  301. View Slide

  302. Align-items




    View Slide

  303. Align-items
    @media (orientation:landscape) {
    figure {

    display : flex;

    align-items : flex-end; }
    img {

    flex : 2 0 360px; }
    figcaption {

    flex : 1; }

    }

    View Slide

  304. View Slide

  305. Justify-content
    flex-start: Items placed on the main axis start line
    .content {

    justify-content : flex-start;

    }

    View Slide

  306. View Slide

  307. Justify-content
    flex-end: Items placed on the main axis end line
    .content {

    justify-content : flex-end;

    }

    View Slide

  308. View Slide

  309. Justify-content
    center: Items centered in the main axis
    .content {

    justify-content : center;

    }

    View Slide

  310. View Slide

  311. Justify-content
    space-between: Items distributed in the line; first item on the start line, last on the end
    .content {

    justify-content : space-between;

    }

    View Slide

  312. View Slide

  313. Justify-content
    space-around: Items distributed in the line with equal space around them
    .content {

    justify-content : space-around;

    }

    View Slide

  314. View Slide

  315. Align-content
    flex-start: lines placed at the start of the container
    .content {

    align-content : flex-start;

    }

    View Slide

  316. View Slide

  317. Align-content
    flex-end: lines placed at the end of the container
    .content {

    align-content : flex-end;

    }

    View Slide

  318. View Slide

  319. Align-content
    center: lines placed at the center of the container
    .content {

    align-content : center;

    }

    View Slide

  320. View Slide

  321. Align-content
    stretch (default): lines stretch to fill container height
    .content {

    align-content : stretch; /* default */

    }

    View Slide

  322. View Slide

  323. Align-content
    space-between: Lines distributed in the container; first item on the start line, last on the end
    .content {

    align-content : space-between; 

    }

    View Slide

  324. View Slide

  325. Align-content
    space-around: Lines distributed in the container with equal space around them
    .content {

    align-content : space-around; 

    }

    View Slide

  326. View Slide

  327. Align-self
    align-self: Overrides for individual flex items
    .content {

    align-self : flex-end; 

    }
    /* auto|flex-start|flex-end|center|baseline|stretch */

    View Slide

  328. View Slide

  329. View Slide

  330. Pinning elements


    …

    Find out more

    View Slide

  331. article {
    display : flex;
    flex-direction : column; }
    article > a {
    margin-top : auto; }
    Pinning elements

    View Slide

  332. View Slide

  333. Support
    1 Supported with -webkit- prefix
    11
    30
    27 23
    6.1 1
    4.4 7.1 1
    37

    View Slide

  334. 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

    View Slide

  335. .container {
    display : -webkit-box;
    display : -moz-box;
    display : -ms-flexbox;
    display : -webkit-flex;
    display : flex; 

    }
    Legacy syntax

    View Slide

  336. @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); 

    }

    View Slide

  337. View Slide

  338. Modernizr
    Isolate Flexbox compatible and non-compatible files
    Modernizr adds flexbox, no-flexbox, and flexboxlegacy classes
    .no-flexbox .container {
    /* styles */
    }

    View Slide

  339. Designing and developing imaginative layouts, Australia 2016
    Viewport units

    View Slide

  340. View Slide

  341. View Slide

  342. 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

    View Slide

  343. Viewport units
    .splash {
    min-height : 100vh;
    }

    View Slide

  344. View Slide

  345. View Slide

  346. Designing and developing imaginative layouts, Australia 2016
    Grid

    View Slide

  347. Designing and developing imaginative layouts, Australia 2016
    Inspiration

    View Slide

  348. View Slide

  349. View Slide

  350. View Slide

  351. View Slide

  352. View Slide

  353. 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

    View Slide

  354. View Slide

  355. Markup








    View Slide

  356. Markup








    View Slide

  357. With CSS Grid we can
    finally stop describing
    our layout in markup.
    #inspireddesign

    View Slide

  358. Applying grid
    section {
    display : grid;
    }
    Turns container into a grid container and doesn’t remove its block attributes

    View Slide

  359. Applying grid
    section {
    display : inline-grid;
    }
    Container will not fill available horizontal space

    View Slide

  360. Grid lines

    View Slide

  361. Grid track

    View Slide

  362. Grid track

    View Slide

  363. Grid cell

    View Slide

  364. Grid area

    View Slide

  365. Markup

    … 




    View Slide

  366. View Slide

  367. Columns
    section {
    grid-template-columns : 180px 600px 180px;
    }

    View Slide

  368. View Slide

  369. Columns
    section {
    grid-template-columns : 25% auto 25%;
    }

    View Slide

  370. View Slide

  371. Rows
    section {
    grid-template-rows : 300px 300px;
    }

    View Slide

  372. View Slide

  373. Rows
    section {
    grid-template-rows : 300px;
    }

    View Slide

  374. View Slide

  375. Auto rows
    section {
    grid-auto-rows : 200px;
    }

    View Slide

  376. View Slide

  377. Column gap
    section {
    grid-column-gap : 20px;
    }

    View Slide

  378. View Slide

  379. Row gap
    section {
    grid-row-gap : 20px;
    }

    View Slide

  380. View Slide

  381. Grid gap
    section {
    grid-gap : 2vw 4vw;
    }

    View Slide

  382. Fraction unit
    section {
    grid-template-columns : 1fr 1fr 1fr;
    }

    View Slide

  383. View Slide

  384. Fraction unit
    section {
    grid-template-columns : 2fr 1fr 1fr;
    }

    View Slide

  385. View Slide

  386. Mixed units
    section {
    grid-template-columns : 2fr 1fr 300px;
    }

    View Slide

  387. View Slide

  388. Repeat
    section {
    grid-template-columns : repeat(6, 1fr);
    }

    View Slide

  389. View Slide

  390. Outside repeat
    section {
    grid-template-columns : 60px repeat(6, 1fr);
    }

    View Slide

  391. View Slide

  392. Outside repeat
    section {
    grid-template-columns : repeat(6, 1fr) 60px;
    }

    View Slide

  393. View Slide

  394. Minmax
    section {
    grid-template-columns : minmax(100px,300px) 1fr 1fr;
    }

    View Slide

  395. View Slide

  396. Auto-flow
    section {
    grid-auto-flow : column;
    }
    // column, row, dense, column dense, row dense

    View Slide

  397. View Slide

  398. Order
    article:nth-child(3) {
    order : -1; 

    }
    Grid items have a default order of 0.

    View Slide

  399. View Slide

  400. Order
    article:nth-child(4) {
    order : 1; 

    }
    Grid items have a default order of 0.

    View Slide

  401. View Slide

  402. Auto-fill
    section {
    grid-template-columns : repeat(auto-fill, 100px); 

    }
    Grid items have a default order of 0.

    View Slide

  403. View Slide

  404. Auto-fill
    section {
    grid-template-columns : repeat(auto-fill, minmax(100,1fr); 

    }
    Grid items have a default order of 0.

    View Slide

  405. View Slide

  406. Auto-fit
    section {
    grid-template-columns : repeat(auto-fit, minmax(100,1fr); 

    }
    Grid items have a default order of 0.

    View Slide

  407. Markup

    … 



    … 





    View Slide

  408. Auto-placement
    ul {
    display : grid;
    grid-template-columns : repeat(auto-fill,minmax(100px, 1fr));
    grid-auto-rows : minmax(100px, auto);
    grid-gap : 2px;
    }

    View Slide

  409. View Slide

  410. 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;
    }

    View Slide

  411. View Slide

  412. View Slide

  413. Auto-placement
    ul {
    grid-auto-flow : dense;
    }
    // column, row, dense, column dense, row dense

    View Slide

  414. View Slide

  415. View Slide

  416. Placement
    li:nth-child(1) {
    grid-row : 3;
    }

    View Slide

  417. View Slide

  418. Placement
    li:nth-child(1) {
    grid-row : 3;
    grid-column : 1 / -1;
    }

    View Slide

  419. View Slide

  420. Placement
    li:nth-child(1) {
    grid-row : 5;
    }

    View Slide

  421. View Slide

  422. View Slide

  423. Markup








    View Slide

  424. Grid
    section {
    display : grid;
    grid-template-columns : repeat(6, 1fr);
    grid-template-rows : repeat(3, 300px);
    grid-gap : 2vw;
    }

    View Slide

  425. View Slide

  426. article:nth-child(1) {
    grid-column : 1 / -1; 

    }

    View Slide

  427. View Slide

  428. article:nth-child(2) {
    grid-column : 1 / 3;
    grid-row : 2;

    }

    View Slide

  429. View Slide

  430. article:nth-child(3) {
    grid-column : 3 / 7;
    grid-row : 2;

    }

    View Slide

  431. View Slide

  432. article:nth-child(4) {
    grid-column : 1 / 4;
    grid-row : 3; 

    }
    article:nth-child(6) {
    grid-column : 5 / 7;
    grid-row : 3; 

    }

    View Slide

  433. View Slide

  434. View Slide

  435. Overlapping cells
    article:nth-child(5) {
    grid-column : 4 / 5;
    grid-row : 1 / 3;
    z-index : 2;

    }

    View Slide

  436. View Slide

  437. Markup






    View Slide

  438. body {
    display : grid;
    grid-template-columns : 2fr 4fr;
    grid-gap : 2vw; 

    }
    Named lines

    View Slide

  439. body {
    display : grid;
    grid-template-columns : 2fr [content-start] 

    4fr [content-end];
    grid-gap : 2vw; 

    }
    Named lines

    View Slide

  440. 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

    View Slide

  441. main {
    grid-column : 2;
    grid-row : 2;
    }
    main {
    grid-column : content-start;
    grid-row : content-start;
    }
    Named lines

    View Slide

  442. 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

    View Slide

  443. Nested grids

    … 




    View Slide

  444. Nested grids
    section {
    display : grid; 

    }
    article:last-of-type {
    display : grid; 

    }

    View Slide

  445. Designing and developing imaginative layouts, Australia 2016
    Get technical

    View Slide

  446. View Slide

  447. View Slide

  448. View Slide

  449. View Slide

  450. View Slide

  451. Designing and developing imaginative layouts, Australia 2016
    Resources

    View Slide

  452. View Slide