Discover how to rethink responsive in terms of size rather than device. Also, learn about using Sass to create easier-to-maintain media queries.
- [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 query…size you want to target.…
- The pros and cons of design systems
- Open-source frameworks
- Planning a design system
- UI patterns and component libraries
- Style guides
- Building the CSS architecture
- Formatting rules
- Using standardized classes, naming conventions, and templates
Skill Level Beginner
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Getting Started
2. Creating a Design System
3. Building the CSS Architecture
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.