springload/frontend-starter-kit

Name: frontend-starter-kit

Owner: Springload

Description: The building blocks of front-end development at Springload

Created: 2014-11-05 20:32:10.0

Updated: 2017-09-20 22:32:28.0

Pushed: 2017-09-14 00:00:10.0

Homepage: https://springload.github.io/frontend-starter-kit/

Size: 1435

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Front-end starter kit

Springload?s reference and starter kit for front-end development.

| Important links :book: | |——————————————————–| | Documentation in docs/ | | Pattern library | | Front-end tech stack | | Front-end principles | | Front-end guidelines questionnaire | | Launch QA checklists | | Useful tooling |

Installation

Clone the project on your computer, and install Node. This project also uses nvm.

From the command-line:

/Development/sites/
clone git@github.com:springload/frontend-starter-kit.git
rontend-starter-kit

To install our dependencies:

install
en, install all project dependencies.
install
stall the git hooks.
hooks/deploy
stall global dependencies to integrate tooling with your editor of choice.
install --global sass-lint babel-eslint eslint-config-airbnb eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y

Working on the project

Everything mentioned in the installation process should already be done.

ke sure you use the right node version.
use
art the server and the development tools.
run start
ilds frontend assets.
run build
ns linting.
run lint
ns tests.
run test
ew other available commands with:
run

Tests

We use Jest for unit tests.

n all the tests.
run test
n tests in a watcher.
run test:watch
n test coverage
run test:coverage
en the coverage report with:
run report:coverage
en the build report with:
run report:build
n the CI test suit.
run test:ci

Manual tests

• Cross-platform favicons ? https://realfavicongenerator.net/favicon_checker
• Structured data (schema.org) ? https://search.google.com/structured-data/testing-tool
• Facebook Open Graph metadata ? https://developers.facebook.com/tools/debug/sharing/
• Twitter cards metadata ? https://cards-dev.twitter.com/validator

Pattern library

Our projects come with a pattern library to facilitate development, documentation, and long-term maintenance.

Here are the available commands:

art the pattern library in development mode.
run patterns
port the pattern library.
run patterns:dist

Deployments

 preview.
run deploy:preview
 production.
om your local machine, push to the master branch before pushing to the production branch so they are always both up to date.
run deploy:production

Setting up tests on continuous integration

The CI tests require the following setup. Some of those might already be done within the CD build.

install
install
install -g david hyperlink

Use npm run test:ci as part of the test pipeline.

Deploying the starter kit demo site

The starter kit's demo site is hosted on GitHub Pages.

ke sure to have the styleguide generator installed.
install -g markdown-styleguide-generator
cs/deploy-pages.sh

Documentation

Code styleguide and linting

The project's code is linted with ESLint for JavaScript and Sass Lint for Sass.

For Sublime Text 3 users, install SublimeLinter, SublimeLinter-contrib-eslint, and SublimeLinter-contrib-sass-lint.

Browser support

Copy/paste & adapt Browser & device support template

Polyfills

Basic polyfills are included in the starter kit, and loaded via Webpack.

Analytics

Analytics are set up with Google Analytics.

JavaScript errors are tracked in Google Analytics as “Exceptions”. A custom report needs to be created for this data to be visible inside the GA interface.

Favicons

To generate new favicons,

1. Go to https://realfavicongenerator.net/
2. Upload your favicon source file as an SVG or PNG with a resolution of at least 512x512.
3. Configure the favicon generation. Use specific images for each platform if relevant.
4. Grab the result files, use ImageOptim to losslessly optimize their size them.
5. Grab the result HTML tags, add it to the core/templates/core/includes/favicons.html file.
6. Make sure the files are served by the server as expected.

Debugging

JavaScript

There are a lot of development aids within the code. Use them.