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
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.
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.
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.
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.
Part 2i – Layouts Sass Module – Developer’s Genesis Starter Child Theme
The layouts specify the overall widths of the site and the main containers such as site inner, wrap, content, and sidebars. In this lab, you will explore strategies to calculate these widths and then have each automatically generate based upon the base width. This step will save you a bunch of manual time as you adjust the widths for each component in the project. Then you continue finishing up the the Layouts Sass module. You’ll also get the opportunity to use the Bourbon Neat framework for calculating your column class widths.
Part 2g – Widgets Sass Module – Developer’s Genesis Starter Child Theme
Let’s first give you a pep talk to reinforce why you are doing this series and how it will make you more moola. Then in Part 2g, you will finish up the Widgets Sass module. by refactoring all of the widgets. Then you’ll commit the changes to your version control repository.
Wrap it Up
NOTE: There’s no video for this episode. Congratulations! Look at what you just did and learned: Created a modular architecture for your styles You broke up the standard style.css into partials and then modules. You actively refactored using the Sass-y way to get rid of the redundancies. You started using variables. Seriously, you did great! Be proud. Own it. Now go take a break and chill out. So what do you have in your hands right now? A working Sass architecture. Yup, right now, you can run a task runner and have it compile to native CSS. Isn’t that awesome! […]
Handling Media Queries
The prevalent design pattern at the moment is to move the media queries into the partials and right where the components and styling attributes are. Why? It makes much more sense to have all of your styles in one place for each attribute/component. Think about it. Instead of having all of your media queries (responsive) styles at the bottom of the stylesheet, now it’s nested right with the attributes/components. No more having to jump around to find stuff. It’s all together within the module itself. That makes so much sense. Doesn’t it?
Migrate Site Footer & Widgets
Let’s continue now by working on the footer widgets and site footer area.
Migrate Content & Sidebars
Let’s migrate the entry content area, comments, pagination (which is really navigation), and sidebars. You will have three separate modules with when you’re done. You will continue improving your refactoring skills.