From the course: CSS: Design Systems and Architectures

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Responsive

Responsive - CSS Tutorial

From the course: CSS: Design Systems and Architectures

Start my 1-month free trial

Responsive

“

- [Instructor] When building websites for multiple screen sizes, we tend to think about the designs and layouts in three to four categories. Mobile, tablet, laptop, and desktop. But even within these categories, there are a wide variety of device sizes as well. When planning for responsive layouts, I started to think of breakpoints in terms of sizes like extra small, medium, and large, rather than the device sizes. And this is where CSS pre-processors can come in handy. We can create a mix-in for writing media queries. Let's take a look at an example using SassMeister.com, an online tool for testing Sass. You can add the Sass syntax to the left, and on the right, we'll show the compiled CSS. At the top of the screen on the left-hand side are the variables for three breakpoints. The mix-in is named breakpoint. To use the mix-in invoke it in the intended declaration block. In this case, it's line 20, and use @include followed by the mix-in name. In the parentheses, include the media…

Contents