Olivier Bossel Website

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

---

---

Features

• Complete build process
  • Javascript files compiling (ES6, etc...)
  • CSS files compiling (SASS, SCSS) + Autoprefixr
  • Images compression
  • Auto-build through files monitoring
  • Nice notifications feedback on build completion
  • Built-in favicons generator
  • Code splitting ready 🍺
• CSS structure based on atomic design principles
• Base views provided for header and footer
• Code linting through ESLint and Stylelint
• Jest tests stack
• Automatically reject commits if tests and linting fail through pre-commit
• Fractal built-in
• Twig support built-in
• Browsersync built-in
• Docker container configuration built-in
• Base .htaccess file (shamefully taken from HTML5 boilerplate)
• CSSUA built-in
• Babel polyfill built-in
• Coffeekraken scripts stack built-in
• Coffeekraken sugar built-in
• Coffeekraken gridle built-in
• Dwarvesforge Thorin built-in

Table of content

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

Install

npm install
composer install

If needed, install npm and composer.

Get Started

Run this command to start working as quickly as possible

npm start

Scripts

• npm run dist : Build the distribution
• npm run dist:js : Build the js distribution
• npm run dist:css : Build the css distribution
• npm run dist:css:autoprefixr : Auto prefix the css
• npm run dist:img : Compress the images and copy them into distribution
• npm run dist:fonts : Build the fonts distribution
• npm run dist:icons : Build the icons font
• npm run dist:favicons : Generate all the favicons from a single image file with all the files like manifest.json, etc... for mobile phones
• npm run dist:criticalcss : Generate the dist/css/critical.css file from depending on the pages.json defined pages
• npm run dist:views : Process the views from app/views and save them into public/dist/views
• npm run dist:prod : Build the production version of the distribution
• npm run dist:prod:js: Build the production version of the js distribution
• npm run dist:prod:css: Build the production version of the css distribution¨
• npm run data : Process the files located in the data-src folder to the data folder
• npm run data:img : Minify the images of the data-src folder to the data folder
• npm run data:img:placeholder : Create a .placeholder.{ext} file by image that represent a mini version of the original one
• npm run fractal : Start the fractal interface
• npm run browsersync : Start the browsersync service on port 8080
• npm start : Build/monitor src files using coffeekraken-scripts-stack, start the http server as well as the browsersync one
• npm run server : Start the http (PHP) server accessible on port 8181
• npm run pretty-quick : Run prettier on the entire project
• npm run pretty-quick-commit : Run prettier on staged files
• npm run prettier : Run prettier on the source files
• npm run test : Run the tests
• npm run deploy : Deploy the website
• npm run deploy:jerome : Deploy the website on jerome
• npm run lint : Run the linters
• npm run lint:js : Run the Js linter
• npm run lint:css : Run the css linter

Browsers support

IE / Edge	Firefox	Chrome	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 formatting

Your code will automatically be formatted using Prettier when you commmit your files.

Code linting

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

1. ESLint with airbnb and prettier 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.