Rendering tonight's moon phase in CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Front-end boilerplate


  • Ruby 2.1+
  • Node 5.0+


  • npm install -g frot
  • frot [path]

Folder Structure

The demo project homepage contains a detailed project structure explanation. See development section to learn how to build and see the homepage.


  • Run gulp watch
  • Open in your browser.
  • Livereload is enabled by default.
  • Make sure your code editor / IDE has ESLint support.


  • gulp clean to cleanup the output folder.
  • gulp build to build and optimize / minify assets.
  • See build settings in _config dir.


  • gulp surge for Surge deployment.
  • gulp rsync for SSH deployment via RSync.
  • See deployment settings in _config dir.


  • Try to follow the concept of components when developing the front-end.
  • Types of Components
  • Page Blocks are components that are not related to the actual content (eg. header and footer).
  • Regular Components are elementary blocks, used to build the content.
  • Regular components should be flexible enough to be reused on any other page.
  • Each component should have a dedicated partial in _source/_includes/components (Unless it's a ReactJS Component).
  • Each component should have a dedicated stylesheet in _assets/scss/components
  • If the component requires JS or is a ReactJS component, it should have a dedicated JS in _assets/js/components