Let’s work on the site navigation in this episode. This modular includes the base styles, primary, secondary, and accessible menus. You will continue migrating and refactoring.
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Migrate Site Header
Did you do your homework? Well, let’s go through it together. I’ll show you how I migrated it and we’ll talk about different refactoring strategies. You can select the technique that works best for you. Then let’s create a new header color variable and then add that to the partial. Little-by-little you are cleaning up the styles. Tip: Think of the variables partials as configuration parameters for your project. You will also learn about why you want to refactor: Don’t repeat yourself. Don’t repeat yourself. Don’t repeat yourself. Write your code to be DRY (don’t repeat yourself). Remember: You don’t […]
Migrate Skip Links
Time to migrate over the skip links. Then your homework is to try to migrate and refactor the site header styles on your own. Then we’ll do it together in the next episode.
Migrate Plugins
As part of migrating the plugins, you will dive deeper into different nesting refactoring strategies and techniques in Sass. You get to see how to use the Sass ampersand &. You will also use the color variables. Little-by-little, you are learning what you can do in Sass to streamline, compress, and clean up the styles to be DRY, modular, and more readable. You are going to enjoy this one. Here are some additional resources to help you out: The Sass Ampersand – CSS Tricks Sass Nesting
Migrate Widgets
Let’s migrate over the widgets into our modular Sass files. You are also taking your first steps to refactor the CSS by learning about removing redundancies and using the power of nesting.
Migrate Common Classes
Let’s migrate over the common classes. Where do we put these into our file structure? Hum, let’s create a spot for now and then when we refactor later, we’ll migrate those sub-modules and partials over to the appropriate buckets.
Migrate Structure and Layout
You will continue migrating the styles to Sass by moving the structure and layout section. In addition, I’ll give you a preview as to the power of Sass by doing a wee bit of refactoring. While native CSS runs in Sass, yes it does, you can streamline your styles and make yourself more efficient once you learn a few little tips and tricks.
Git and Wrap
Let’s commit your changes and then push them to GitHub, GitLab, or Bitbucket. We’ll walk through the current commit in GitHub too to see what it looks like and how to read it. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github.
Refactor
Now let’s finish up the Plugins Sass Module. Tonya will mentor you through the refactoring process.
Start Migrating the Stylesheet to Sass
As I was thinking about the rest of this lab, it dawned on me that starting with the variable declarations is not the best approach to helping you make the leap from working in native CSS to maximizing what you can do in Sass. Therefore, let’s adapt and start migrating the Genesis Sample Theme’s style.css over into the Sass files. The remainder of this lab is walking through step-by-step, copying each section of the styles and moving them over into the Sass files. You and I will walk through the process and actively think about how to divide it up. […]
