Mike DeWitt: Developing WordPress Themes Using Modular Sass

Continue the discussion

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Published

January 11, 2016

CSS preprocessors make developing clean and semantic stylesheets effortless. My talk will take someone through a basic structure for organizing Sass within a WordPress theme, using the Bones theme framework as an example.

I will go through some of the benefits and cool tricks you can implement with this structure including breakpoint includes, variables, functions, nesting, and mixins.

Finally I will address perhaps the greatest hurdle to immediately implementing Sass in your WordPress theme — compiling. I will take people through the common methods of doing this including Grunt, Compass, and WordPress plugins like WP-SCSS.

Learning Outcomes:

– Look at their current workflow and ask the question: Why am I repeating myself? And how can I automate it?
– Embrace a CSS workflow that is made up many small components instead of one large component.
– Gain familiarity we core features of Sass like nesting, variables, mixins, functions, and imports.
– Feel confident in using a library like Bourbon to write stylesheets that have better browser compatibility, all while writing less lines of code.
– Be aware of build tools like Grunt/Gulp, which can be used to compile Sass in addition to many other front end tasks.
– Feel confident in implementing Sass in a WordPress theme immediately.

Presentation Slides »

Rate this:

Event

WordCamp Toronto 2015 37

Speakers

Mike DeWitt 1

Tags

CSS 104
modular 2
Sass 21
Themes 269

Language

English 7686

Download
MP4: Low, Med, High
OGG: Low
Subtitles
Subtitle this video →
Producer
%d bloggers like this: