mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
e7f0455ce4
The code in this commit is not intended for production environments; it requires further testing. Added: - Multiple "Source Sans 3" fonts to test many `FontFace` entries. Changed: - Removed quotes from font family name to avoid them being included in `FontFace.family` value. Notes: - Replaces hidden `<span>` elements with `FaceFace.load()` and `FaceFace.loaded` to eagerly load fonts. - Fonts are eagerly using custom `loadFonts()` (see 'app.js'). - Acting upon loaded fonts is done using `whenReady()` (see 'Example.js').
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 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
# 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.