Rachel Andrew is editor-in-chief of Smashing Magazine, a front and back-end web developer, author and speaker. She has written several web development books, including chapters for two Smashing Books and is an A List Apart columnist, writing about the business of web development. She also writes about business and technology on her own site at rachelandrew.co.uk. In addition to offering consultancy services through the company she founded in 2001 – edgeofmyseat.com – Rachel is also one of the developers of the content management system, Perch.
Organising CSS in a project can be tricky, especially if you want to create fallbacks for newer CSS such as Grid Layout, fallbacks which can rely on your CSS being in a particular order to take advantage of the cascade.
The solution is to develop a pattern library first, to create structured components which can then be compiled into a stylesheet before deployment. And, by making the Pattern Library your build environment — it remains the source of truth, never becoming separate from the CSS deployed on the site.
In this talk, Rachel will be looking at some interesting Grid Layout tricks, in the context of a real-life pattern library built using Fractal. She’ll show you how I structure components, in order to create robust fallbacks for older browsers while fully taking advantage of things that would be impossible without Grid.
CSS Layout Grid is a game-changer. But what strategy makes most sense when building layouts today? Grid-first? Flexbox-first? Fallback-first? Following along with practical examples, you’ll learn how Grid works, and how it can be used to implement modern layouts and responsive designs.
Since the early days of the web, designers have been trying to lay out web pages using grid systems. Likewise, almost every CSS framework attempts to implement some kind of grid system, using floats and often leaning on preprocessors.
The CSS Grid Layout module brings us a native CSS Grid system for the first time—a grid system that does not rely on document source order, and can create complex layouts which are easily redefined with media queries.
Following along with practical examples, you’ll learn how Grid works, and how it can be used to implement modern layouts and responsive designs.
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
There are lots of reasons to get excited about new layout methods in CSS, but what impact does moving to Flexbox and Grid have on performance? And once you have decided to adopt new layout methods, are some techniques more performant than others?
In this talk we’ll take a serious look at the algorithms your browser is using in order to lay things out using Flexbox and Grid. By understanding how these algorithms work, you’ll be in a better position to make good decisions around layout, and fully take advantage of the possible performance gains of new CSS layout.