Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Crusade for the Holy Grail Layout
Adrian Sandu, @adysandu
6 September, 2016, DublinJS
The Holy Grail Layout
Three-column layout, with header and footer:
● Fluid center and fixed sides
● All columns have same ...
Frames and Framesets
Disadvantages of frames:
● Search engines may not index a website made with frames
● Framed websites ...
Tables! Tables everywhere!
Disadvantages of table-based design:
● Search engines have problems indexing the content
● Comp...
Faux-Columns
Based on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumnsBased on Dan Cederholm's idea - http...
Use JavaScript
Demo: http://codepen.io/AdrianSandu/pen/pbOJRv
Fixed / Absolute Positioning
Demo: http://codepen.io/AdrianSandu/pen/YWOXBR
Tables Everywhere Again (CSS display:table)
Demo: http://codepen.io/AdrianSandu/pen/PzdkOO
Flexbox
Demo: http://codepen.io/AdrianSandu/pen/mEGVjB
Other Approaches
Nested Divisions Border Color
Bottom padding and negative margin
Experimental:
Grid Layout Module | Templ...
Questions?
Upcoming SlideShare
Loading in …5
×

The crusade for the Holy Grail layout - DublinJS Lightning Talk

251 views

Published on

The slides for my DublinJS Lightning Talk on September 6, 2016

Published in: Internet
  • Be the first to comment

  • Be the first to like this

The crusade for the Holy Grail layout - DublinJS Lightning Talk

  1. 1. The Crusade for the Holy Grail Layout Adrian Sandu, @adysandu 6 September, 2016, DublinJS
  2. 2. The Holy Grail Layout Three-column layout, with header and footer: ● Fluid center and fixed sides ● All columns have same height ● Footer “sticks” to the bottom on low content* ● Content appears before sides* ● Minimum extra markup* *) These features are “nice-to-have”, but not a requirement
  3. 3. Frames and Framesets Disadvantages of frames: ● Search engines may not index a website made with frames ● Framed websites are not “bookmark friendly” - you can only bookmark the parent page ● Frames have accessibility problems ● Deprecated in modern versions of HTML
  4. 4. Tables! Tables everywhere! Disadvantages of table-based design: ● Search engines have problems indexing the content ● Complex layouts are very difficult to maintain ● Lots of non-semantic markup
  5. 5. Faux-Columns Based on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumnsBased on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumns Demo: http://codepen.io/AdrianSandu/pen/GqXgOr
  6. 6. Use JavaScript Demo: http://codepen.io/AdrianSandu/pen/pbOJRv
  7. 7. Fixed / Absolute Positioning Demo: http://codepen.io/AdrianSandu/pen/YWOXBR
  8. 8. Tables Everywhere Again (CSS display:table) Demo: http://codepen.io/AdrianSandu/pen/PzdkOO
  9. 9. Flexbox Demo: http://codepen.io/AdrianSandu/pen/mEGVjB
  10. 10. Other Approaches Nested Divisions Border Color Bottom padding and negative margin Experimental: Grid Layout Module | Template Layout
  11. 11. Questions?

×