Alright, now you have all the styles broken out into the proper partials based upon the components. Now it’s time to return to refactoring by pulling over the media queries, identifying variables, and getting rid of redundancies.
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.
Lab Introduction
This episode is an introduction to the lab where you are going to convert a typical stylesheet over to a modular architecture. You will use Sass as the means to accomplish this, as native CSS does not provide that functionality. In this lab, you are going to learn about why modular CSS saves you time, makes your code and workflow more efficient, improves maintainability, and advances you forward in building higher quality products. Then you will begin slicing up the style.css file and migrating it over into the Sass partials. This is the first step to the conversion process from […]
Break Out the Styles
Let’s rethink our current module architecture and how we have the partials laid out. The comments have several components and sub-components. Right? It has the following components: comments list comment which includes the header, author, meta, and comment content respond pings Just like we did for the entry header and footer, it’s best to break out components into their own partial. For the comments, it’s up to you how far you want to break things out. Let’s talk about several strategies and think about different alternatives.
Lab Introduction
Let’s look at the components which make the Comments Module by looking at Tonya’s personal blog. You’ll notice that there are multiple components and sub-components. Therefore, in this lab, we will look at various alternatives for breaking up the styles and determining the architecture. Then you’ll finalize this module as you’ve done with the others.
Git Commit
Let’s go through the .gitignore that I use, which you can copy from the GitHub repository. Then you will start filling out your repository’s README.md file. Then the last step is to commit your changes and then push them to GitHub, GitLab, or Bitbucket. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github. We also talk about shortcuts in PhpStorm’s console to help you be more efficient.
Refactor
Alright, now you have all the styles broken out into the proper partials based upon the components. Now it’s time to return to refactoring by pulling over the media queries, identifying variables, and getting rid of redundancies.
Entry Title Styles
Looking at the stylesheet, there are styles for the entry title which are in the common classes module. Let’s discuss what to do with these styles.
Rethinking the Module Architecture
Let’s rethink our current module architecture and how we have the partials laid out. In the entry, is has multiple components. Right? It has the following components: entry header which has the entry title, post meta, and featured image entry content entry footer which has the post meta, typically for categories and tags It seems easier if you have a partial for each of these components. Why? Remember that this is your codebase. Therefore, it is your starting point on all jobs and theme builds. Having a partial for all the components gives you flexibility for all of the needs […]
Lab Introduction
In this lab, you and I are going to finish the entry content module by bringing in the media queries, refactoring, and assigning new variables. Why don’t you try to finish this module on your own using the strategies that you learned so far? Then watch these videos to see how Tonya thinks about refactoring.
Git Commit
Then the last step is to commit your changes and then push them to GitHub, GitLab, or Bitbucket. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github. We also talk about shortcuts in PhpStorm’s console to help you be more efficient.
