The Reset: Rethinking Float, Flex, Grid, and Web Layouts
Learn how to take full advantage of all layout modules in CSS including float, flex, and grid to create accessible, modern, responsive, and progressive layouts.
Web layouts have always been broken, we've just been refining how we break them. Ever since the idea of web design took form, we've been finding ways to make a single-column web document appear as if it were a print layout displayed on a fluid viewport by wrapping content in boxes and performing CSS markup alchemy.
CSS Grid changes all that in a fundamental way. Where the web layout tools at our disposal used to be element-out, we now have a tool that works layout-in. That means the tools and techniques we use to create web layouts - from best practices to framework tools to clever tricks - are suddenly obsolete and we can now use our layout tools for their intended purpose: Grid for grid layouts, flex for flexible boxes, and float for floating content within their context.
This workshop is a reset guiding the participants to think of web layouts from the outside in and take advantage of the best features from all available layout tools. Grid, flex, float, etc all have new important roles to play in building modern responsive web experiences. Knowing where they fit in and how to use them is the key to unlocking the true potential of the web viewport as a layout and design surface.
Learning objectives:
- Understand how to think of web layouts from the outside in: Draw a grid, place items on that grid, then use flex, float, and other layout tools to manage the display of those items.
- Understand the role of grid, flex, and float in the new reality of web layouts.
- Extend the premise of Responsive Web Design to progressive enhancement by accepting that websites do not have to look the same across all browsers.
- Learn how to use flex and float for their intended purposes, and how to identify when grid, flex, float, etc are best used.
- Replace CSS frameworks with core CSS layout modules to improve code quality.
- Learn how to put web accessibility first without compromising on UI and UX design.
Requirements:
- Working understanding of HTML, CSS, and some basic JavaScript
- A laptop or other computer
- A basic code editor (Atom, VS Code or similar)
- Firefox Nightly browser (download here)
Thursday, 2017-10-05 @ 14:00
Plaza Event Centar
>
Duration: 4h
>
Ticket price: 200kn
(~€26)
Morten Rand-Hendriksen
Morten Rand-Hendriksen is a senior staff instructor at LinkedIn Learning and Lynda.com with 60+ courses published on WordPress, web standards, design and UX, and future technologies. He also teaches Interaction Design at Emily Carr University of Art and Design, and contributes to WordPress core and community projects.
When he’s not working you’ll find Morten playing with his son, reading philosophy and science fiction, talking to people about the internet and how it shapes our society, and wearing out his shoes on the ballroom dance floor.
The organizer reserves the right to cancel the workshop in case of unforseen circumstances such as speaker illness. In this case the tickets will be fully refunded.
By buying a ticket you agree to follow our Code of Conduct.
