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.
Next, you want to add the Gulp Task Runner to your plugin. Why? Because we want to minify the jQuery script to optimize it. I use UpGulp on all of my projects. UpGulp is a configurable Gulp starter module that you can add into any plugin or theme. It’s based on the wd_s gulpfile.js from WebDevStudios. In this episode, you and I will add UpGulp to our plugin. I’ll walk you through the installation process. Then we’ll do a gulp watch and test it on a test script file.
A task watcher automatically runs gulp tasks when you save a Sass partial. You can wire it up to any of your gulp tasks to automatically watch for the events which trigger each one. Turn on the watch and let it run as you work.
Let’s push our final sample theme to your git hosting. Then let’s talk about the more advanced stuff you can do including additional PostCSS, cssnext, and more gulp tasks like SVG, image optimization, and scripts. You can look at what WebDevStudios is doing in their wd_s. You now have a completed Genesis starter theme. Yes, there are more things you can do with it, such as moving to a configuration architecture, more gulp tasks, and so on. But you can add those as you get working with your new theme. Congratulations! Start using your new codebase and it will save […]
A linter validates your Sass to coding standards. You will install the gulp node module: gulp-sass-lint. In this episode, you will install and code it into your gulp file. Then let’s run it to see what happens. Psst here is the link to the Sass Rem module.
Notifications send out a desktop message to alert you to errors and whatever message you want, such as “WooHoo your styles are done.” In this episode, you will install the following gulp packages: plumber and notify.
When you deliver your theme to your client for their live site, you will want to enqueue and use a minified stylesheet. Why? To speed up the web page’s loading, as the browser requests and downloads a smaller file. You will use a module called CSS Nano. There are a couple of different ones to use. In this episode, you will install and use the gulp-cssnano. Let’s walk through adding minification to our gulp tasks. You’ll also learn about the gulp sequencing order. And you will need the rename module too, to rename the minified file to style.min.css. Note: PostCSS […]
Did you notice the media queries are dispersed throughout your stylesheet? If you are using min-width (not max-width) media queries, then you can use the Media Query Packer node module.
Now that your styles are in Sass modules, when you are building, tweaking, and debugging your styles in the browser, it shows the stylesheet and not the respective Sass partial file. It becomes cumbersome to find where your styles are when you want to make a change. Sourcemap solves that problem for you. In the browser, it will show you the Sass partial file associated with the element instead of style.css. It will save you a lot of time and frustration as you are building. You are going to love this module. To install it locally into your theme, type […]
Next, you want to install and setup the autoprefixer package. The autoprefixer automatically handles the browser prefixing for you. No more having to specify all of the different prefixes for the browsers. Imagine the time that will save you. Seriously, you can just specify border-radius, for example, and the autoprefixer node plugin will take care of prefixing all the different browsers. In this video, I have you installing the wrong package, as I had you put this one in. Whoopsie. You don’t want gulp-autoprefixer. Why? Because in the next episode, we are installing PostCSS. You need the one that works […]
Bourbon will be depreciating the rem() function. Therefore, let’s replace it out. I show you in their code where it’s noted for removal, even though it’s not mentioned in the documentation. This is a good thing. Why? Because code changes and evolves. You need to be adaptable to adjust your codebase for changes. For example, if WordPress makes a change, you need to change your code too. Instead, we’ll use the sass-rem module. This video will walk you through the process as you will need to change the code too. Update – July 20, 2018 To get the pixel fallback […]
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.