Locomotive Boilerplate

Front-end boilerplate for projects by Locomotive.

Features

• Uses a custom task runner for handling assets.
• Uses BrowserSync for fast development and testing in browsers.
• Uses Sass for a feature rich superset of CSS.
• Uses ESBuild for extremely fast processing of JS/ES modules.
• Uses SVG Mixer for processing SVG files and generating spritesheets.
• Uses ITCSS for a sane and scalable CSS architecture.
• Uses Locomotive Scroll for smooth scrolling with parallax effects.
• Uses a custom grid system for layout creation.

Learn more about languages and technologies.

Getting started

Make sure you have the following installed:

• Node — at least 20, the latest LTS is recommended.
• NPM — at least 10, the latest LTS is recommended.

💡 You can use NVM to install and use different versions of Node via the command-line.

# Clone the repository.
git clone https://github.com/locomotivemtl/locomotive-boilerplate.git my-new-project

# Enter the newly-cloned directory.
cd my-new-project

Then replace the original remote repository with your project's repository.

Then update the following files to suit your project:

• README.md: The file you are currently reading.
• package.json:
  • Package name: @locomotivemtl/boilerplate
  • Package title: Locomotive Boilerplate
• package-lock.json:
  • Package name: @locomotivemtl/boilerplate
• loconfig.json:
  • BrowserSync proxy URL: locomotive-boilerplate.test Remove paths.url to use BrowserSync's built-in server which uses paths.dest.
  • View path: ./views/boilerplate/template
• environment.js:
  • Application name: Boilerplate
• site.webmanifest:
  • Manifest name: Locomotive Boilerplate
  • Manifest short name: Boilerplate
• HTML files:
  • Page title: Locomotive Boilerplate

Installation

# Switch to recommended Node version from .nvmrc
nvm use

# Install dependencies from package.json
npm install

Development

# Start development server, watch for changes, and compile assets
npm start

# Compile and minify assets
npm run build

Learn more about development and building.

Documentation

• Development and building
• Languages and technologies
• Grid system