Let’s talk about how we move from the stylesheet into an architecture, meaning how are we going to break up the styles into modules and a file structure. The structure is defined typically by tasks, features, views, and components. There are no hard and fast rules about how you set up your folder structure. I show you two different projects to show you different alternatives: my Hello theme for my personal blogs wd_s by WebDevStudios In this episode, you walk through a thought process of deciding how to break things up. I share my thought processes with you, as well […]
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.
The How – Meet Sass
So now you know the benefits and how writing your styles in a modular fashion helps you to do more and make more. How are you going to do it? Native CSS doesn’t provide the means for modularity or clean, quality coding. Meet Sass, Syntactically Awesome Stylesheets. Sass adds the powers of functionality and variables to CSS. You now write your styles in a code-based format that is clean, DRY, and modular. Let’s talk about Sass and how it will help you.
The Why of Modular CSS
Just like we discussed in converting to a modular PHP theme architecture, modularity applies to everything you build in code, including your stylesheets and CSS. What are the benefits to you? Why would you want to write your styles in a modular fashion? It does the following for you: Saves you time Increases the quality of your code and product Reduces errors What does that mean for you? Takes you less time to produce solutions, meaning a lower product cost and time to market. Makes you more in demand, marketable, and valuable. That means you can make more moola. Let’s […]
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 […]
Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
Stylesheets by their very nature do not comply with clean, quality principles as everything is one gigantic file that is filled with redundancies. It’s inefficient and error-prone to work with a stylesheet. But just like what you learned in Part 1, the stylesheets can be broken up into modules and partials using Sass. In this lab, you will take your first steps to working with Sass by splitting up the Genesis starter theme’s stylesheet and converting it to Sass.
Custom Utility Bar – Styling – Part 2
Let’s finish up the styling in this episode. You’ll be doing things such as adding a slash between the menu items using the CSS property ::after.
Custom Utility Bar – Styling – Part 1
Before we get to styling, let’s add a menu and then some social links into the new Utility Bar widget area. Then you’ll start styling the Utility Bar and its components. Some of the CSS properties that you are using are: display float ::after You will also add in (enqueue it) the Font Awesome library.
Custom Header Layout 3 – CSS Styling
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. We are going to do something different. Instead of styling in the Genesis Sample child theme, let’s go through the Modern Studio Pro child theme demo that StudioPress provides for you. Don’t worry, as I’ll explain everything. You’ll learn about these CSS properties: background-size background-position background-color margin-top margin Remember with margin and padding, think about the rotation of a clock. You specify the values in a clockwise fashion from the top. Therefore, it’s top to right to bottom to left.
Custom Header Layout 2 – Styling
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. This time, you will style in the browser but then move those changes into the stylesheet. You’ll learn about how to structure your stylesheet to achieve clean, quality code by keeping it lean and DRY (Don’t Repeat Yourself).
Enqueue the Stylesheet Resource
Step 2 is to enqueue the stylesheet resource. Google Fonts gives you what to enqueue. Where do you put this into your WordPress website? You will use the WordPress function wp_enqueue_style. Let’s talk about what this function does. What if you need to load up more than one Google Fonts? What is the syntax? You use the pipe | to separate out each of the font families. Let’s dig into the enqueuing and write the code for it. Don’t worry, as it’s very easy. You are actually writing PHP code here, even though it’s very little. It’s still PHP. Psst….here […]