Proteus is a collection of useful starter kits to help you prototype faster. It follows the thoughtbot styleguide and includes our favorite front end tools.
- Gulp: Converts files and task running
- HAML: Simple template markup
- Coffeescript: Write javascript with simpler syntax
- Sass: CSS with superpowers
- Bourbon: Sass mixin library
- Neat: Semantic grid for Sass and Bourbon (Replaced with Susy)
- Bitters: Scaffold styles, variables and structure for Bourbon projects.
- Express: Lightweight Node web server
We also recommend Refills for prepackaged interface patterns.
Set up your project in your code directory
git clone git@github.com:thoughtbot/proteus-gulp.git your-project-folder
cd your-project-folder
git remote rm origin
git remote add origin your-repo-url
Install the dependencies
npm install
Run the server
gulp
Deploy to Github Pages
git add . # Add any untracked files
git commit -va # Commit the changes
git push # Push it to Github
You'll also need to make sure you have a gh-pages branch, if you don't already.
git checkout --orphan gh-pages
git rm -rf .
touch README.md
git add README.md
git commit -m "Init gh-pages"
git push --set-upstream origin gh-pages
git checkout master
gulp deploy
See guide on gulp and gh-pages.
Or install the Proteus gem and enjoy some shortcuts.
Stylesheets, images, fonts, and javascript files go in the /source/assets/ directory.
Vendor stylesheets and javascripts should go in each of their /vendor/ directories.
The source folders for images and fonts have a .keep file in them so they can be in the repo, but you can remove those files.