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.

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