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.
Permalink
Failed to load latest commit information.
_assets
_config
_source
_tasks
.babelrc
.editorconfig
.eslintrc
.gitignore
Gemfile
Gemfile.lock
README.md
gulpfile.babel.js
package.json

README.md

Front-end boilerplate

Requirements

  • Ruby 2.1+
  • Node 5.0+

Installation

  • 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.

Development

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

Building

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

Deployment

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

Components

  • 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