From the course: CSS: Variables and Fluid Layouts

The evolution of responsive design - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

The evolution of responsive design

“

- What a ride we've been on these last 12 years, front-end web designers. When Ethan Marcotte introduced us to responsive design in 2010, we worked with floats for laying out our grid-based systems, some early technology for loading images of the right size, and badly supported media queries. Nine years later, our tools and techniques have radically evolved. Hacking flexbox to do webpage layouts displaced our hacked-up floats. Fortunately, grid is just about ready for us to use, our first CSS tool for laying out webpages without hacks. The ability to do math directly in CSS via the calc property is available and helpful to our work. But our biggest shift is with CSS custom properties, or variables as they're often called. Unlike SAS variables, CSS custom properties may have their values changed in media queries. This is a huge game changer for us, meaning we can streamline our CSS to new levels rather than having to repeat our styles and media queries with new values. CSS custom properties are impacting type sizing, page layouts, and much more in our work. In this course, I'll walk you through the basics of calc and custom properties, including their positives and negatives. And we'll walk through multiple examples of leveraging these properties, including a type example, an example with flexbox layout, and an example with grid layout. So if you're ready, let's get started with "Responsive Design 2.0".

Contents