Skip to content

Latest commit

 

History

History
100 lines (78 loc) · 3.35 KB

README.md

File metadata and controls

100 lines (78 loc) · 3.35 KB
Raw

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