Let’s start by working on the site containers, which includes the styling class attributes of
.wrap. As you begin migrating in the media queries, you’ll see that we need to setup the theme’s max-widths. In this episode, let’s setup the different widths and device screen sizes. You’ll walk through the various strategies including hard coding the widths into a variable to writing a formula to calculate the widths based upon the overall base width.
Running calculations is more advanced, but let’s discuss it. Sass can run all different kinds of mathematical equations including elementary addition, subtraction, multiplication, division. It can do
ceil(), and more.
Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."
Total Lab Runtime: 01:15:35
- 1 Lab Introductionfree 01:14
- 2 Site Containers & Max Widthpro 20:20
- 3 Finish Up Site Inner & Wrappro 04:50
- 4 Content Sidebar Containerspro 11:47
- 5 Calculate Widths with Sasspro 10:21
- 6 Sidebars and Wrapspro 08:30
- 7 Neat Columnspro 07:00
- 8 Finishing the Column Classespro 06:20
- 9 Finish, Git Commit, and Wrappro 05:13