This episode was chock full of sound effects, awkward silences, and all-out sassiness (the CSS kind and the attitude kind). We spent a fair amount of time talking about Sass and setting up your work environment, hearing about Rob’s upcoming plans with Flagship Themes, and learning Jesse’s secret to client and project organization. Catch the show notes and audio/video links below!
If you haven’t yet, be sure to join the Genesis Office Hours community on Google+ so you get notifications of upcoming episodes.
Key Discussion Points
Sass vs LESS… Do tell! In short, both of these CSS pre-processors do the same thing, but go about it in different ways. Sass has gained a lot of popularity over LESS and last year WordPress core adopted Sass as the CSS pre-processor of choice, so if you’re going to invest your time learning one, Sass is the best route to go (IMHO). If you want to learn Sass, here are some resources to get you started. For more info, check out this article on LESS vs Sass.
Working with Sass… So, one of the amazing things about Sass is the ability to use variables and mixins. An example of a variable might be a link color. You could create a variable called
$link-color and assign it a color value, and then anywhere you want to reference that link color in your CSS, you use pop in
$link-color instead of a color value. That’s a simple example, but it’s a sweet way to make global changes super quick. Mixins, however, are chunks of re-usable code. Think of how many times in a theme you might use a border radius (and have to spell out the settings using each browser vendor prefix). Well, stuff those in a mixin and then anytime you want to use a border radius, just include your mixin. Cool. When it comes to mixins, there are several libraries /frameworks out there that include common snippets (think transitions, box-sizing, clear-fix, etc), like Bourbon and Compass (here’s a nice comparison article). Instead of re-writing the wheel, so to speak, you can use one of these tools to speed up your development time.
Get a free 7-day trial with my Lynda link – Hint: There’s a Sass class in there that will get you up and running (and install/setup Grunt). It’s around 3 hours – I’ve taken it and recommend it. 🙂
News & Articles
- Genesis 2.1 Now Available! – Follow @GenesisChanges on Twitter to learn when Gary Jones’ Genesis Updates 2.1 books is available.
- Theme Customizer – Notes from Konstantin Obenland’s WordCamp Las Vegas 2013 Presentation
- Custom Themes vs Customized Themes – some thoughts by Carrie Dils
- We’re Ignoring the WordPress Philosophy – series from Tom McFarlin
Plugins & Code
- Genesis Simple Logo – plugin (still in beta) by Rob Neu for easily uploading a logo on the Genesis site.
- Genesis Style Trump – plugin to make styling for third-party plugins easier
- Members – A user, role, and content management plugin by Justin Tadlock
- iThemes Security Pro – (formerly Better WP Security) plugin by Chris Wiegman
- Code Snippet – Allow HTML tags in content limit
- The Sass and Compass tutorial for absolute beginners
- Quick Start Resources to Learn Sass
- Attention Genesis Sass-perts – intro to Sass by Jason Hobbs
- In the Beginning – A Sass version of the Genesis Sample Theme (and a work in progress)
- Bower – Packet manager (great if you’re using Grunt, Bourbon, etc on Sass projects)
Responsive Testing Tools
Ok, so there are a ton of tools out there, but here are some favorites of Genesis Office Hours listeners:
- Hello Duo – A dual browsing experience
- Viewport Resizer
- Chrome Mobile Emulator – emulate all the major mobile devices (great for testing behaviors, not just breakpoints)