how to theme: a design workflow for wordpress
TRANSCRIPT
Bravery is a design and web strategy agency based in Austin, TX. We craft memorable experiences
with colleges, universities, & startups.
#wpbootcamp
SKETCH [MAC ONLY]
sketchapp.com
Sketch is built primarily for web and app designers
It takes a web-first approach to interface design
You can copy CSS values right out of the interface
Still doesn’t do everything Photoshop does.
#wpbootcamp
ADOBE PHOTOSHOP
adobe.com/creativecloud
Photoshop in Creative Cloud has gotten a lot better
Art boards for different layouts in the same file
Reusable objects using Libraries
Industry standard
#wpbootcamp
AVOCODE
avocode.com
Avocode does versioning for design files
Generates CSS and Sass rules for easy copy + paste
Supports setting up Sass variables in the interface
Plugins for Photoshop and Sketch
#wpbootcamp
REMOTE DATABASE HOSTING
digitalocean.com/?refcode=7e7a6eabc4cd
I like code editors that think in projects… so I use Sublime Text.
#wpbootcamp
CODE EDITORS
sublimetext.com
#wpbootcamp
CODEKIT [MAC ONLY]
incident57.com/codekit
CodeKit auto-compiles Sass, Javascript, Ruby, etc.
The built-in web server auto-updates your code
changes on-the-fly.
Lots of Sass and JS libraries included
#wpbootcamp
USING SASS
sass-lang.com
Sass lets you set variables and reuse them
Mixins let you automate style patterns
You can use regular CSS with SCSS (Sassy CSS)
Helps keep your code DRY (Don’t Repeat Yourself)
#wpbootcamp
SASS TOOLKITS
bourbon.io
Choose a toolkit or framework that works for you
I use Bourbon + Bourbon Neat from thoughtbot
Others include: Compass, Bootstrap, Foundation, etc.
They take care of lots of presets for you
#wpbootcamp
SASS & WORDPRESS
underscores.me
Most parent themes & frameworks use some sort of
CSS preprocessor (LESS or Sass)
My base theme is based on _s (Underscores)
_s already uses Sass, so it’s a matter of retrofitting &
customizing to my needs.