Advanced CSS Layouts With Flexbox and CSS Grid

rachel-andrew

Full-day workshop • June 28th
This workshop is designed for designers and developers who already have a good working knowledge of HTML and CSS. We will cover a range of CSS methods for achieving layout, from those you are safe to use right now even if you need to support older version of Internet Explorer through to things that while still classed as experimental, are likely to ship in browsers in the coming months.

CSS Layout has been stuck somewhere around 2006 for several years. We have had to attempt complex layout using tools such as floats and positioning. These methods never designed for complex page and application layout. However things are changing and it’s a great time to take a look at the layout methods that are now part of modern CSS, and those coming in the very near future.

The aim is to teach you some tips that Rachel has learned working on real projects, alongside sharing some of the exciting things that I’ve been experimenting with as I look into emerging specifications. This will be a practical workshop, we will work through code examples together, and you’ll have those worked examples to take away to experiment with further or to share with your team.

What you'll learn:

  • Building multiple-column layouts
  • Building with Flexbox and CSS Grid Layout
  • Other emerging specifications of interest, eg. Exclusions, Regions, Box Alignment
  • Strategy for advanced CSS layouts: when and how to use each specification?
  • Practical suggestions for using these techniques without locking out users of old browsers.

What prerequisites skills do you need?

Basic understanding of CSS and JavaScript.

What hardware/software do you need?

Please bring your own laptop (Mac or Win) with your favorite text editor.

Time & Location

This full-day workshop will be hosted at the Ivey Tangerine Leadership Centre and will take place after the two days of Smashing Conference. The workshop will be running from 9:30am to 5:30pm on Thursday, June 28th.

Schedule for Thursday, June 28th

9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End, Networking

Save $100 when signing up for the conference and a workshop!

On the Web
https://rachelandrew.co.uk/
On Twitter
@rachelandrew
Workshop includes
  • Snacks and drinks during the whole day
  • Tea and coffee
  • Lunch
  • Paper and pen/pencil

Sponsors & Partners