slush-stencil

Bootstrapping websites of all shapes and sizes projects. Build tools, and platform selection, supporting static sites with S3 deployment, Webhook CMS- powered sites, and a choice of three client-side JS frameworks (Knockout, Backbone, React/Flux/alt).

Created by Ronik Design and used to speed up internal development.

Features

• Scaffold static sites and Webhook projects
• Deploy easily to S3 (requires a properly configured AWS account. The easiest approach here is probably brew install awscli then aws configure)
• Choose from one of three JS approaches, all using ES6 and webpack
  • Knockout (The most basic setup, for enhancing your static site with some client-side magic)
  • Backbone
  • React w/ alt & React Router
• Choose from one of three CSS approaches, all using Stylus
  • Basic setup, using custom utils, project structure and BEM
  • Bootstrap, using bootstrap-stylus
  • Skeleton.css
• Iconfont folder and auto compilation through Gulp (creates iconfonts automatically from SVG files and generates classes)
• Image optimization
• Gulp-based build tools are fast!
• Other buzzwords and cool technologies...

Getting Started

Install your global dependencies.

$ npm install -g slush slush-stencil

Deployment is optional, you can use Stencil as a simple static site generator and collection of build tools, but hook into your own publishing process

Static platform

$ mkdir [sitename]
$ cd [sitename]
$ slush stencil

To develop:

$ gulp develop

And when you're ready to deploy to S3 (and you have your AWS credentials configured):

$ gulp deploy [--production]

Webhook platform

$ npm install -g wh grunt-cli

If this is a totally new Webhook project, create your Webhook site, then run Stencil:

$ wh create [sitename]
$ cd [sitename]
$ slush stencil

Warning! Stencil uses conflict resolution and allows you to reject overwriting files, BUT you could very easily overwrite something you care about as it spews a bunch of files and folders into your current directory and merges with your package.json. Be careful, try it out first on something you don't care about, commit or backup first. But also, feel free to run it again and again.

To develop:

$ gulp develop

When you're ready to deploy with webhook:

$ gulp deploy

Collaborating with git

Create your git repository in Github. Don't add any default files.

$ git init
$ git remote add origin [email protected]:[repo-name].git
$ git add .
$ git commit -am "Initial commit"
$ git branch --set-upstream-to=origin/master
$ git pull --rebase
$ git push origin master

Getting To Know Slush

Slush is a tool that uses Gulp for project scaffolding.

Slush does not contain anything "out of the box", except the ability to locate installed slush generators and to run them with liftoff.

To find out more about Slush, check out the documentation.

Contributing

See the CONTRIBUTING Guidelines

Support

If you have any problem or suggestion please open an issue here.