Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Neat Breakpoints
Lab: Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme
Video Runtime: 16:10
There are various strategies available to you for handling the media query breakpoints including these options, which all do the same thing:
| $breakpoint__screen-size--medium: new-breakpoint(max-width $screen-size--medium 6); |
| // Native CSS breakpoint | |
| @media screen and (max-width: 1023px) { | |
| // styles | |
| } | |
| // Device size breakpoint | |
| @media screen and (max-width: $screen-size--medium) { | |
| // styles | |
| } | |
| // Device size with Neat function `media` | |
| @include media($breakpoint__screen-size--medium) { | |
| // styles | |
| } |
The advantage to setting a new breakpoint in the _breakpoints.scss file is you make all changes to your breakpoints in one place. Now that we’ve integrated media queries into the styles at the component level, this technique means you are not searching through all of the partials to find where to change what you need. Therefore, using the Neat function new-breakpoint() allows you to be more efficient which will save you time in working with your new codebase.
Let’s talk about the different strategies and then add these to your codebase. You’ll look at how WebDevStudios does it in their wd_s theme and in Tonya’s Hello theme.
Your best friend is code, Tonya is making the introductions.
Episodes
Total Lab Runtime: 01:19:50
- 1 Introducing BEMpro 07:28
- 2 Apply BEM to Typography Variablespro 10:50
- 3 Apply BEM to Color Variablespro 10:57
- 4 Refactor Colorspro 04:00
- 5 Apply BEM to Dimensions Variablespro 07:47
- 6 Apply BEM to Screen Sizes Variablespro 02:26
- 7 Neat Breakpointspro 16:10
- 8 Main Stylespro 13:54
- 9 Git Commit and Congratulationspro 06:18
