Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Handling Media Queries
Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
Video Runtime: 05:01
The prevalent design pattern at the moment is to move the media queries into the partials and right where the components and styling attributes are. Why? It makes much more sense to have all of your styles in one place for each attribute/component.
Think about it. Instead of having all of your media queries (responsive) styles at the bottom of the stylesheet, now it’s nested right with the attributes/components. No more having to jump around to find stuff. It’s all together within the module itself. That makes so much sense. Doesn’t it?
| /* ## Site Containers | |
| --------------------------------------------- */ | |
| .site-inner, | |
| .wrap { | |
| margin: 0 auto; | |
| max-width: 1280px; | |
| @media only screen and (max-width: 1340px) { | |
| max-width: 1140px; | |
| } | |
| @media only screen and (max-width: 1200px) { | |
| max-width: 960px; | |
| } | |
| @media only screen and (max-width: 1023px) { | |
| max-width: 800px; | |
| } | |
| } | |
| .site-inner { | |
| clear: both; | |
| padding-top: 40px; | |
| word-wrap: break-word; | |
| @media only screen and (max-width: 860px) { | |
| padding: 5% 5% 0; | |
| } | |
| } | |
| .landing-page .site-inner { | |
| max-width: 800px; | |
| } |
You will grow in this profession when you incrementally and systematically stretch yourself....bit-by-bit.
Episodes
Total Lab Runtime: 02:16:49
- 1 Lab Introductionfree 02:17
- 2 The Why of Modular CSSfree 11:50
- 3 The How - Meet Sassfree 08:15
- 4 Overview of the Theme's Sass Architecturepro 08:39
- 5 Layout the Sass File Structurepro 17:14
- 6 Color Variablespro 10:11
- 7 Start Migrating the Stylesheet to Sasspro 11:43
- 8 Migrate Structure and Layoutpro 10:18
- 9 Migrate Common Classespro 04:34
- 10 Migrate Widgetspro 08:43
- 11 Migrate Pluginspro 08:12
- 12 Migrate Skip Linkspro 02:24
- 13 Migrate Site Headerpro 10:09
- 14 Migrate Site Navigationpro 07:34
- 15 Migrate Content & Sidebarspro 06:37
- 16 Migrate Site Footer & Widgetspro 03:08
- 17 Handling Media Queriespro 05:01
- 18 Wrap it Upfree 00:00
