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.

0 Videos Runtime July 20, 2016

Sourcemap and PostCSS

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 […]

0 Videos Runtime July 20, 2016

Autoprefixer

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 […]

0 Videos Runtime July 20, 2016

Sass Pixel to Rem

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 […]

0 Videos Runtime July 20, 2016

Running Sass Task & Fixing Errors

Whoops, I had you install the wrong Bourbon and Neat node modules. Oh poo. No worries this gives us an opportunity to try out the shortcut I shared with you in the previous episode. You will use this shortcut on every project as you copy/clone your starter theme. Also, we will begin fixing any typos and errors. When you run gulp, it will tell you where there are problems. I gave you a few errors, but we’ll correct each of them in this episode.

0 Videos Runtime July 20, 2016

First Gulp Task

Let’s write the first gulp task in gulpfile.js.

0 Videos Runtime July 20, 2016

Package JSON and Dependencies

The first step is to make sure you have gulp installed globally. You need to have both node and npm installed. Then do the following: Open terminal. Type: npm install gulp –g When it’s done installing, type: gulp -v If you get a version number, you are ready to rock and roll. Next let’s create the package.json boilerplate file. To do that, let’s run the init out of npm which will walk you through the options: npm init Just keep pressing the return (enter) key on your keyboard to select the defaults. When done, then open up the file. Now […]

0 Videos Runtime July 20, 2016

The Why of a Task Runner

A task runner does much more than just compile Sass into native CSS. In this video, you will learn about the why of using a task runner, like gulp, to automate redundant tasks. It will improve your productivity. There are plenty of plugins available that you install as a node module which do tasks such as: Sass prefixing, gathering up media queries, error checking, and minifying Load Bourbon and Neat (and others) as a node module instead of using Bower Converting scripts into one minified file plus error checking Optimize images, SVG, and sprites Run translations and more

7 Videos 01:10:42 Runtime July 20, 2016

Part 3b – Doing More with Gulp

It’s time to do more with gulp. While gulp is awesome at processing Sass, you can do more tasks such as sourcemaps, minifying, error handling, notifications, linting (error checking), and even more time-saving shortcut modules within Sass itself. Let’s finish up your gulp setup file and get you cranking out CSS in less time. Let’s do more.

6 Videos 00:48:15 Runtime July 20, 2016

Part 3a – Automating Tasks with Gulp

Sass requires compilation to convert it into native CSS. You use a task runner, such as Grunt or Gulp, to automate the task for you. In this lab, you will learn about and build your task runner using Gulp.

9 Videos 01:19:50 Runtime July 12, 2016

Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme

You will learn about the BEM naming methodology and then you’ll refactor your variables to comply with its naming convention. Then you’ll refactor the colors to remove the redundancies. Then you’ll learn about different media query breakpoint strategies. Lastly, you’ll make sure that all partials are being loaded and finish the style.scss file. At the end of this lab, you will have a complete, modular Sass architecture that will save you time and money on every project.

Labs

Sourcemap and PostCSS

Autoprefixer

Sass Pixel to Rem

Running Sass Task & Fixing Errors

First Gulp Task

Package JSON and Dependencies

The Why of a Task Runner

Part 3b – Doing More with Gulp

Part 3a – Automating Tasks with Gulp

Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme

Learn

Help

General