Bayse is a straight-forward, ever-evolving, hyphen-loving project starter template. In its most basic form it is an HTML boilerplate with a CSS grid system and Browserify for JavaScript module loading. You've then got the option to add CoffeeScript and/or Myth - with Gulp as the build system. Oh, and Ractive for reactive DOM templating and Mout for modular JS utilities! It also has a built-in, synchronised server with BrowserSync.
- CoffeeScript - language that compiles to JavaScript http://coffeescript.org/
- Myth - CSS preprocessor http://www.myth.io/
- RactiveJS - template-driven UI library http://www.ractivejs.org/
- Browserify - lets you
require('modules')
in the browser http://browserify.org/ - GulpJS - JavaScript task runner http://gulpjs.com/
- BrowserSync - Synchronised browser testing with built-in server http://www.browsersync.io/
-
CoffeScript
- source CoffeeScript: edit
.coffee
files incoffee/
and rungulp
to compile and watch
- source CoffeeScript: edit
-
JS
- compiled CoffeeScript
-
Myth
- source CSS: edit
.css
files inmyth/
and rungulp
to compile and watch - includes responsive grid and other helpers in
myth/lib/
- source CSS: edit
-
CSS
- compiled Myth CSS
-
Template
- Ractive HTML templates
You can create a new Bayse project with VoloJS http://volojs.org/
npm install -g volo
volo create bayse-project lukehedger/bayse
For a custom Bayse, use the Slush generator http://slushjs.github.io/
npm install -g slush slush-bayse
mkdir bayse-project && cd $_
slush bayse <app-name>
If you choose to use Gulp to compile the CoffeeScript and Myth files then run the following commands in the root of your project to get started:
- Install Gulp:
npm install -g gulp
- Install dependencies:
npm install --save-dev
- Run Gulp tasks:
gulp
- Stop watching:
ctrl + c
When using Gulp, the gulp
task will start a BrowserSync server at port 5000 http://localhost:5000. You can configure BrowserSync options within gulpfile.js
.
You can analyse your site with PageSpeed Insights by running gulp analyse
.
Build release files by running gulp release
- Could add Travis CI and Divshot hosting/deployment to stack