Provide a nice boilerplate to quickly start working on html, js, sass/scss projects with tests support, css and js compiling, etc...
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.
.docker
.resources
.scripts
app
data-src
data
dist
pages
src
tests
.babelrc
.changelogrc
.editorconfig
.gitignore
.htaccess
.node-version
.stylelintrc
.travis.yml
CHANGELOG.md
LICENSE.txt
README.md
carpenter.config.js
composer.json
composer.phar
gulpfile.js
human.txt
index.php
package-lock.json
package.json
pages.json
robots.txt
webpack.config.js
webpack.prod.config.js
yarn.lock

README.md

Coffeekraken HTML Boilerplate

Coffeekraken HTML Boilerplate

Base HTML files and folder structure with complete build process (js, sass, image compression, etc...) built in

Features

Table of content

  1. Go to website
  2. Install
  3. Get Started
  4. Scripts
  5. Browsers support
  6. Code linting
  7. Contribute
  8. Who are Coffeekraken?
  9. Licence

Install

yarn install
composer install

If needed, install yarn and composer.

Get Started

Run this command to start working as quickly as possible

yarn start

Scripts

  • yarn run dist : Build the distribution
  • yarn run dist:js : Build the js distribution
  • yarn run dist:css : Build the css distribution
  • yarn run dist:img : Compress the images and copy them into distribution
  • yarn run dist:fonts : Build the fonts distribution
  • yarn run dist:icons : Build the icons font
  • yarn run dist:favicons : Generate all the favicons from a single image file with all the files like manifest.json, etc... for mobile phones
  • yarn run dist:criticalcss : Generate the dist/css/critical.css file from depending on the pages.json defined pages
  • yarn run dist:prod : Build the production version of the distribution
  • yarn run dist:prod:js: Build the production version of the js distribution
  • yarn run dist:prod:css: Build the production version of the css distribution¨
  • yarn run data : Process the files located in the data-src folder to the data folder
  • yarn run data:img : Minify the images of the data-src folder to the data folder
  • yarn run data:img:placeholder : Create a .placeholder.{ext} file by image that represent a mini version of the original one
  • yarn run carpenter : Start the carpenter interface
  • yarn run livereload : Start the livereload server and monitor the dist/js/app.js and dist/css/style.css files
  • yarn run browsersync : Start the browsersync service on port 8181
  • yarn start : Build/monitor src files using coffeekraken-scripts-stack, start the http server as well as the livereload one
  • yarn run server : Start the http (PHP) server accessible on port 8080
  • yarn run test : Run the tests
  • yarn run lint : Run the linters
  • yarn run lint:js : Run the Js linter
  • yarn run lint:css : Run the css linter
  • yarn run changelog : Build the changelog from the git commits (see here for more documentation)

## Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE11+ last 2 versions last 2 versions last 2 versions

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.

Code linting

This boilerplate uses some code linting rules. Here's the list:

  1. StandardJS for javascript files
  2. Stylelint with stylelint-config-standard for scss files

Your commits will not been accepted if the code style is not respected!

License

The code is available under the MIT license.