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 17.9, the latest LTS is recommended.
- NPM — at least 8.0, 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 name:
package-lock.json
:- Package name:
@locomotivemtl/boilerplate
- Package name:
loconfig.json
:- BrowserSync proxy URL:
locomotive-boilerplate.test
Removepaths.url
to use BrowserSync's built-in server which usespaths.dest
. - View path:
./views/boilerplate/template
- BrowserSync proxy URL:
environment.js
:- Application name:
Boilerplate
- Application name:
site.webmanifest
:- Manifest name:
Locomotive Boilerplate
- Manifest short name:
Boilerplate
- Manifest name:
- HTML files:
- Page title:
Locomotive Boilerplate
- Page title:
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.