mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
8b8b267e9d
And split sections from README into dedicated documentation files. Added: - "Features" section to summarize the boilerplate's architecture. - "Getting Started" section to describe how to create a project from the boilerplate. - "Development" documentation to describe how NPM dependencies, configuring assets and tasks. - "Technologies" documentation to describe CSS, JS, Locomotive Scroll, ModularLoad, ModularJS. Changed: - Moved section "Configuration" to 'docs/development.md'. - Moved sections "Styles", "Scripts", "Page transitions", and "Scroll detection" to 'docs/technologies.md'. TODO: - Move "Environment configuration" section from "Development" to 'feature/local-config' branch.
Locomotive Boilerplate
Front-end boilerplate for projects by Locomotive.
Features
- Uses a custom, easily configured, wrapper asset handler.
- Uses Sass for a feature rich extension of CSS.
- Uses ESBuild for extremely fast processing of JS/ES6.
- 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 BrowserSync for fast development and testing in browsers.
Learn more about languages and technologies.
Getting started
Make sure you have the following installed:
- Node — at least 14.17, the latest LTS is recommended.
- NPM — at least 6.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.testRemovepaths.urlto 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
# Install dependencies from package.json
npm install
Development
# Watch for file changes and compile assets
npm start
# Compile and minify assets
npm run build
Learn more about development and building.