This is where it all begins.
Before you start, please fork both of our repos and use your personal repo URLs to clone from. This guide will walk you through the process of installing the site and adding the original repos as upstream remotes.
- Ruby 2.1.1
If you're using RVM, setting up Ruby 2.1.1 should be easy, but time consuming. Currently, there's a bug that requires that it be compiled from source. So do this:
# A Ruby 2.1.1 bug requires that it be compiled from source $ rvm install ruby-2.1.1 --disable-binary # Make sure you have these important gems installed globally # We'll be using bundler in a minute $ rvm @global do gem install bundler rake
Go to the
ttn-cutnadodirectory in your VVV environment.
$ cd /Users/montchr/dev/vvv/vvv-nginx/www/ttn-cutnado
cutnado-envrepo to a new
$ git clone https://github.com/[you]/cutnado-env.git htdocs
Go to the
htdocsdirectory and run Composer to set up WordPress and its dependencies.
$ cd htdocs $ composer install
.envand update environment variables:
DB_NAME- Database name -
DB_USER- Database user -
DB_PASSWORD- Database password -
DB_HOST- Database host -
WP_ENV- Set to environment -
WP_HOME- Full URL to WordPress home -
WP_SITEURL- Full URL to WordPress including subdirectory -
Or just copy and paste this snippet into the
DB_NAME=ttn_cutnado DB_USER=root DB_PASSWORD=root DB_HOST=localhost WP_ENV=development WP_HOME=http://ttn-cutnado.dev WP_SITEURL=http://ttn-cutnado.dev/wp
Now let's add the original repo as upstream and have it track the
First, make sure you're on the
developbranch (you should be by default). In most cases, you should never be working off of the
masterbranch. For this repo in particular, the
masterbranch likely won't be created at all.
$ git checkout develop $ git branch -u upstream/develop
Clone your fork of the main theme repo into
web/app/themes/cutnadoand switch to that directory.
N.B. We're using two separate Git repos (and not Git submodules) because deployment to the main application will be easier in the end. Remember,
cutnado-env, the single WordPress site, is just a holdover until we get close to official release.
$ git clone https://github.com/[you]/cutnado web/app/themes/cutnado $ cd web/app/themes/cutnado
Now we install our project dependencies.
# Ruby gems (e.g. SASS, Compass, Susy) $ bundle install # Node packages (e.g. Grunt, Grunt plugins) $ npm install # Bower components (e.g. Normalize.scss, SCUT) $ bower install
masterbranch, but don't tell it to track a remote branch.
Make sure you're on the
$ git branch master
When you're working, try to stay off of
master. Just focus on the
developbranch and its tributaries.
Enable Git Flow in this repo.
When prompted, select all the default options (just keep hitting return).
$ git flow init
Most likely, the only two branches you'll have to worry about right now are
feature/branch you may create.
Read up about Git Flow (see above link) and you'll see why this simplifies things a lot.
vagrant up. Enter your password when prompted.
http://ttn-cutnado.devin your browser.
You need Package Control, first of all. ;)
- SASS Snippets
- Susy Snippets
- Trailing Spaces
- Better CoffeeScript
- SASS Snippets
- Solarized Color Scheme
- SublimeLinter (and its linters)
- Wrap Plus
I don't know of a really great way to keep our databases synced, but for now the best option seems to be using VVV's built in capabilites for just that.
N.B. Make sure you run
composer update before loading a new database! If
the database references updated plugins but the files aren't there, there will
[ @TODO more info on db syncing ]
Because the number of variations in type, location, and size, at the very least, we'll need a grid system that can help manage this level of complexity. That's what Susy is here for.
[ @TODO insert sup grid diagram image here ]
Aesop Story Engine requires that items in
.entry-content are able to span
100% of the browser viewport. That means that there can't be any parent
container with a fixed width.
- While sizes share names no matter where they're positioned, the actual sizes differ depending on their position.
When ASE gives you the option, always set
center. If you don't have those options available, don't worry – Cutnado will
compensate for that. And if it doesn't, file an issue on GitHub.
Make sure your shortcodes are always wrapped with
.cutnado-component and the
appropriate classes for the layout you're looking for. Also make sure that
.cutnado-component you use an
<div>. Like so:
<div class="cutnado-component cutnado-component--[position] cutnado-component--[size]"> <div class="inner"> [shortcode] </div> </div>
Requires center position.
Horizontally aligned components, sitting next to each other.
<div class="cutnado-component cutnado-component--[layout]"> <div class="cutnado-component__xup inner"> [shortcode] </div> <div class="cutnado-component__xup inner"> [shortcode] </div> </div>
: Widths only apply to left and right positons - the full position is full width
- Component Width: 100%
- Background Color: Either set this to white, or delete the attribute from the generated shortcode.
- Text Color: Determine this based on the tone of the background image.
- Height of Image Area: 500px-1000px
- Quote Size: 3
- Enable Quote Parallax: Yes, unless you're setting up a left- or right- positioned component.
- Parallax: Starting Offset: ~100px
- Parallax: Speed: 3-5 (it depends on the height of the image area)
- Parallax: Direction of Quote: Always up.
Left and right positioned quotes will fit nicely alongside current typography.
Those are specified using the usual classes,
.cutnado-component--l for left,
Full-width quotes must have a background image and must be configured for
parallax movement. Instead of the usual two classes, the component should have the class
<div class="cutnado-component cutnado-component--f"> <div class="inner"> [shortcode] </div> </div>
If you'd like to have the quote positioned in a place other than the center,
work with me to get that set up but make sure the specific
has an appropriate ID:
<div id="quote-someone-said-this" class="cutnado-component cutnado-component--f"> <div class="inner"> [shortcode] </div> </div>