History of Layout on the Web from Tables to Grids
•
0 likes•96 views
Presentation to Cape Town Dribbble meetup on CSS layout
Recommended
More Related Content
Similar to History of Layout on the Web from Tables to Grids
Similar to History of Layout on the Web from Tables to Grids (20)
Recently uploaded
Recently uploaded (20)
History of Layout on the Web from Tables to Grids
- 1. JustinSlack,NML 1 Farewell Bootstrap and other tales from the web layout revolution
- 2. JustinSlack,NML 2 Layout on the web A history
- 3. JustinSlack,NML 3 There was one website In 1991 At CERN Built by Tim Berners-Lee
- 5. JustinSlack,NML 5 Flow layout HTML Block level content in HTML flows from top to bottom Block and inline level HTML content
- 7. JustinSlack,NML 7 HTML Tables HTML Visual design hacks prioritised over the semantic web Forced sites into perfect configurations using HTML data tables
- 8. JustinSlack,NML 8 <TABLE BGCOLOR="#CCCCFF" BORDER=10 BORDERCOLOR=“#0000FF BORDERCOLORLIGHT="#33CCFF" BORDERCOLORDARK=“#0000CC" WIDTH=“80%" ALIGN="CENTER"> <TR> <TD> <H1 align="center"> <FONT SIZE="3" COLOR="red" FACE=“arial"> Welcome to my home page! </FONT> </H1> </TD> </TR> </TABLE>
- 12. JustinSlack,NML 12 Fluid layout CSS If the screen size changes, the proportion of elements will stay the same Sizing in percentages not pixels Replace table based layouts with floats
- 13. JustinSlack,NML 13 Fixed layout CSS Replace table based layouts with floats Fixed width sizing in pixels Width stays the same independently of which screen size or resolution the viewer has
- 15. JustinSlack,NML 15 Web standards 1998 Web standards project launched Coincided with the launch of CSS Level 2 Designing with Web Standards published in 2003
- 18. JustinSlack,NML 18 Responsive design Ethan Marcotte at An Event Apart in 2010 Flexible grid Flexible images Media queries
- 19. JustinSlack,NML 19 1 2 3 4 5 6 7 8 Simple Layout - Floated
- 20. JustinSlack,NML 20 Simple Layout - Floated 1 2 3 4 5 6 7 8
- 21. JustinSlack,NML 21 .grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
- 22. JustinSlack,NML 22 @media screen and (max-width: 46.25em) { .grid4 .col { width: 31.2%; } .grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; } .grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; } }
- 26. JustinSlack,NML 26 CSS grid Flexbox Writing modes Components of the new layout Object-fit Shapes, maskingAlignment All the other CSS properties we have always used
- 27. JustinSlack,NML 27 Flexbox CSS Flexbox was designed for layout in one dimension, i.e. layout in a row or a column
- 30. JustinSlack,NML 30 Site header CSS Gallery Timeline Exhibition Log in display: flex on container align-items: center on container margin-left: auto on log in link flex-wrap: wrap on container
- 33. JustinSlack,NML 33 Grid CSS Introduces a two dimensional grid system to CSS Grids can be used to lay out major page areas or small user interface elements
- 34. JustinSlack,NML 34 What is a grid CSS A grid is an intersecting set of horizontal and vertical lines – one set defining columns and the other rows Elements can be placed onto the grid respecting these column and row lines
- 35. JustinSlack,NML 35 Grid features CSS Fixed and flexible track sizes Item placement Creation of additional tracks to hold content
- 36. JustinSlack,NML 36 Grid features CSS Alignment control Control of overlapping content
- 37. JustinSlack,NML 37 Creating a grid CSS .container { display: grid; }
- 39. JustinSlack,NML 39 The era of intrinsic design Term coined by Jen Simmons to describe the new era of layout on the web Layout is now an integral part of CSS and no longer a hack
- 40. JustinSlack,NML 40 Three things changing the web Service worker Variable fonts CSS layout
- 41. JustinSlack,NML 41 The web is a fluid medium