/timber-starter-theme-with-tailwindcss

The "_s" for Timber with Tailwind CSS setup: a dead-simple theme that you can build anything from

Primary LanguagePHPMIT LicenseMIT

The Timber Starter Theme with Tailwind CSS

The "_s" for Timber with Tailwind CSS setup: a dead-simple theme that you can build from. The primary purpose of this theme is to provide a file structure rather than a framework for markup or styles.

Build Status

Installing the Theme

Install this theme as you would any other, and be sure the Timber plugin is activated. But hey, let's break it down into some bullets:

  1. Make sure you have installed the plugin for the Timber Library (and Advanced Custom Fields - they play quite nicely together).
  2. Download the zip for this theme (or clone it) and move it to wp-content/themes in your WordPress installation.
  3. Rename the folder to something that makes sense for your website (generally no spaces and all lowercase). You could keep the name timber-starter-theme but the point of a starter theme is to make it your own!
  4. Activate the theme in Appearance > Themes.
  5. Do your thing! And read the docs.

Tailwind CSS Setup

This repo is configured to watch the .twig files in temlates folder. To start coding you need:

  1. Run npm install to download all files needed.
  2. Run npm run dev to build style.css and watch changes.
  3. Start coding!

What's here?

static/ is where you can keep your static front-end scripts, styles, or images. In other words, your Sass files, JS files, fonts, and SVGs would live here.

templates/ contains all of your Twig templates. These pretty much correspond 1 to 1 with the PHP files that respond to the WordPress template hierarchy. At the end of each PHP template, you'll notice a Timber::render() function whose first parameter is the Twig file where that data (or $context) will be used. Just an FYI.

bin/ and tests/ ... basically don't worry about (or remove) these unless you know what they are and want to.

Other Resources