The stories of Northwestern students who pass as a race they are not, every day.
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
test
.bowerrc
.editorconfig
.gitattributes
.gitignore
.jshintrc
.yo-rc.json
Gruntfile.js
README.md
bower.json
package.json

README.md

Passing

*\ˈpa:siŋ* To be accepted as or believed to be, or to represent oneself successfully as, a member of an ethnic or religious group other than one's own, esp. one having higher social status; spec. (of a person of black ancestry in a racially segregated society) to be accepted as white.

Passing was a project published by North by Northwestern on March 1, 2015. It explores the phenomenon of Racial Passing through the stories of four Northwestern students.

These are the contents of this README:

What's in Here

This app was scaffolded with the generator-webapp Yeoman generator. That generator creates a bunch of files, which can seem daunting and confusing. Hopefully this explains what the important things are and how it fits together.

  • package.json — this tells npm (that's the Node Package Manager) how to manage the project's dependencies. When you run npm install, the dependencies will be downloaded into a folder titled node_modules.
  • bower.json — this is like package.json, but it specifies the Bower dependencies. We use this to install things like Bourbon, Neat, jQuery, and jPlayer.
  • Gruntfile.jsGrunt is a Javascript task runner. This file tells Grunt how to automate the development and production of the project.

Now let's take a look inside of app/:

  • index.html — this is the HTML file that powers the app. For this project, we just used a single HTML page, with no additional templates or frameworks.
  • styles/main.scss — this is the main Sass file that powers the project's stylesheet. It imports all of the other stylesheets in the folder, as well as Bourbon and Neat from the bower_components (this happens because of this part of the Gruntfile). When the project is built, Grunt also compiles the Sass and autoprefixes the CSS.
  • scripts/main.js — the JavaScript file that creates most of the app's interactions.

Getting Started

Please note – this guide assumes you are using OS X. If you aren't, you hopefully know the equivalent commands to make these things happen. If you don't, find someone to help you!

1. Clone this project:

git clone git@github.com:northbynorthwestern/passing.git
cd passing

2. Install Requirements

This project was built using generator-webapp, so it requires you to have Node installed, as well as a few other things. If you already have Node installed, along with Bower, Grunt, Yeoman and Sass you can skip this step. If you don't have those things installed, that's awesome — let's install them!

To install Node, check out these instructions by the NPR Visuals team to get started (it's Chapter 3 of that page, but you should really read the whole thing). Once you have Node installed, you can install the other dependencies by running these commands.

npm install -g bower
npm install -g grunt-cli
npm install -g yo

Note: The -g means you are installing those modules globally on your machine, which means it doesn't matter which directory you are in. Contrast this command with a couple steps from now where we will use npm install without the global flag, because we are installing that project's local dependencies.

You'll also need to have Sass installed. If you don't have it installed, it's as simple as:

sudo gem install sass

3. Install Project Dependencies

Once you have Node (and Bower and Grunt and Yeoman and Sass) installed (phew!), we can install the project's dependencies with this command:

npm install && bower install

You should see two new folders in your project, node_modules and bower_components where these files have been installed.

4. Celebrate!

And that should be it! You're ready to run the app on your local machine.

Running the App

There are a few different terminal commands you can use build the app:

  • grunt serve - preview locally
  • grunt serve:dist - build and preview the distribution, locally
  • grunt build - build the distribution (without tests)
  • grunt - build the distribution (with tests)
  • grunt test - test the app

After running one of the serve commands, the project will open up (automatically) in your browser at http://localhost:9000. If you need to deploy the app, any one of the build commands will create a directory in the project called dist. You can just copy and paste the outputted files onto your webserver. (We uploaded them to an Amazon S3 bucket using Cyberduck).

Grunt compiles the Sass, minifies images, stylesheets and scripts, autoprefix your CSS, along with a host of other nifty little things to make the project load faster and automate development. To learn more about what each of these commands does, check Gruntfile.js, in the project's root directory.

Learning More

If you want to learn more about the tools we used to build this project, here are some good links.

Grunt

Yeoman

Bower

Sass, Bourbon and Neat