/flex-starter

Starter-theme and Boilerplate for Static Site Generation

Primary LanguageCSS

Flex Starter

WORK IN PROGRESS

Starter-theme and boilerplate for static site generation

Demo of generated site

This repository is build on top of build-boilerplate which in turn is a fork of static-site-boilerplate by Adam Beres-Deak, with some modifications:

  • Sass instead of Less
  • different Javascript workflow
  • adapted Gruntfile.js file

Extended boilerplate

When a boilerplate is further extended with, let’s say pre-processor modules (Sass), and the generation of gh-pages, then it may still be usefull, but the scope will be more limiting. And it’s not a boilerplate anymore, but more an opinionated starter-theme; so that is what this is. When one likes parts of this thing, but other parts not so much, then maybe have build-boilerplate and this thing side by side, pick and choose, assemble your own starter-theme: make your own Bootstrap.

How to use this?

  1. Clone this repository git clone https://github.com/atelierbram/flex-starter
  2. Install node dependencies npm install
  3. Simply run grunt build to see that everything works
  4. from the commandline run: grunt gh-pages to build the remote gh-pages branch

How to work with this?

You can run grunt --dev while developing. This starts a new web server on port 3000 (http://localhost:3000/). After every change the affected files are regenerated.

Available Grunt tasks

  1. grunt - default task: build everything and then whatches for changes and regenerated the affected files
  2. grunt build - builds everything
  3. grunt clean - cleanup
  4. grunt assemble - generates html with Assemble
  5. grunt sass - generated css file(s) from Sass.scss files
  6. grunt concat - concatenates JavaScript.js files
  7. grunt uglify - minifies JavaScript.js files
  8. grunt cssmin - minifies CSS.css files
  9. grunt hashres - computes hash code for static resources (aka cachebusting)
  10. grunt connect - starts web server and stops it automatically when all the other tasks finished
  11. grunt watch - checks for file modifications and runs the appropriate tasks
  12. grunt gh-pages - to push to your gh-pages branch hosted on GitHub or any other branch anywhere else

All tasks accept a --dev flag, which disables CPU intensive tasks like JS-optimization. This should only be used during development.

What is included?

  1. Static site generation with Assemble
  2. Generating and minifying a single CSS file with Sass
  3. Concatanate and minify JavaScript
  4. Generating hash (cache buster) for JS and CSS files
  5. Automatic regeneration and Liverload during development
  6. grunt-gh-pages to push to your gh-pages branch hosted on GitHub or any other branch anywhere else

Resources

License

Released under MIT Licence