alpineio/quixote

Alpine.IO Theme Builder

Quixote

, _(*1)

Installing a new theme requires Composer, _(*2)

Setup new theme

1. composer create-project alpineio/quixote theme-name creates a new copy of the Quixote composer project with base boilerplate.
2. cd theme-name
3. vendor/bin/rocinante theme:regen "Super Awesome Theme" ./ renames Alpine.IO's base Underscores theme in the current directory.

Compiling CSS and JavaScript

Bootstrap uses gulp with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some gulp commands., _(*3)

Install Gulp

From the command line:, _(*4)

1. Install gulp-cli globally with npm install -g gulp-cli.
2. Navigate to the root, then run npm install. npm will look at package.json and automatically install the necessary local dependencies listed there.

When completed, you'll be able to run the various gulp commands provided from the command line., _(*5)

Unfamiliar with npm? Don't have node installed? That's a-okay. npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding., _(*6)

Available gulp commands

Build - gulp

Run gulp to compile static assets and local web server for theme preview. CSS, Images and JavaScript compile into /assets. Uses Sass and UglifyJS., _(*7)

Only compile CSS and JavaScript - gulp assets

gulp assets creates the /assets directory with compiled files. Uses Sass and UglifyJS., _(*8)

Only compile CSS - gulp styles

gulp styles creates the /assets/css directory with compiled css. Uses Sass and Autoprefixer., _(*9)

Only compile JavaScript - gulp scripts

gulp scripts creates the /assets/js directory with compiled javascript. Uses UglifyJS., _(*10)

Only compile Image - gulp images

gulp images creates the /assets/images directory with compiled images. Uses Imagemin., _(*11)

Watch - gulp watch

This is a convenience method for watching images, javascript, sass and font files, automatically building them whenever you save., _(*12)

Docker Components

Quixote ships with a few docker containers to help preview and test your theme, _(*13)

To start docker run the below docker command, _(*14)

• Start docker docker-compose up

Local Docker

You may install a local Docker machine from something like: https://www.docker.com/products/docker-toolbox, _(*15)

WordPress

http://192.168.99.100:3001/, _(*16)

phpMyAdmin

http://192.168.99.100:3100/ username: root password: secret, _(*17)