Big Sea Timber Base Theme
What is Timber?
Timber is a WordPress plugin that lets you write themes with object-oriented markup, and the Twig template engine.
Some Features
- Heavy clean up of the WordPress head (credit to Bones)
- Standard WordPress theme templates are abstracted out into Twig files for easy development
- A template structure based on Underscores
- Small JavaScript features added for things we repeatedly found ourselves doing
- Instead of having everything dumped into
functions.php, we've abstracted everything out into thelibrarydirectory - Baked-in custom post types and custom taxonomies that you can easily modify
- A robust, extremely fast and versatile Gruntfile that features image and SVG optimization (via SVGO), as well as Coffeescripts compilation and even BrowserSync!
- The Bourbon and Neat libraries are baked into the
package.jsonfile so that you have a huge set of mixins and tools immediately at your disposal- While we don't use Neat's grid system, we use some of its mixins, such as
mediaandnew-breakpoint
- While we don't use Neat's grid system, we use some of its mixins, such as
- Instead of using Neat's grids, we are using instead using Flexbox Grid Mixins. We believe it's time to get on board the flexbox grids train
Get Started
- Clone the theme to your
/wp-content/themesdirectory and rename it as you see fit. NOTE: This is made to be used as a standalone theme instead of as a child theme - Assuming you have NPM installed, navigate to your theme's folder in your favorite command line tool and run
npm installto install all of the require Node modules (you may have to usesudo)
Using GruntJS
- I want to start writing sass:
/assets/scss, simply rungrunt watch - I want BrowserSync: run
grunt dev(this also runswatch) - I want to optimize my assets: run
grunt assets - I want to build for production: run
grunt build(remember to switch over to your minified assets! You can do so in/library/bigsea.php.)
Assets
All of your theme's bitmap images go into /assets/images/src and SVGs go into /assets/images/src/svg. Once you've done this, make sure to run grunt assets to compress and optimize them. They will then be available in /assets/images.