• Stars
    star
    467
  • Rank 93,935 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🚂 Front-end boilerplate for projects by Locomotive.

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-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

More Repositories

1

locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
JavaScript
7,895
star
2

webgl-images

locomotive javascript module to implement easily images rendered with WebGL
JavaScript
51
star
3

charcoal-cms

Charcoal Content Management System (CMS) Module
PHP
49
star
4

locomotive-react-boilerplate

💨 Boilerplate for React projects by Locomotive.
SCSS
29
star
5

charcoal-project-boilerplate

A skeleton to get started with Charcoal.
PHP
27
star
6

wordpress-boilerplate

Quick setup opinionated WordPress boilerplate
PHP
14
star
7

charcoal-app

Slim-based application (modules, routes / controllers and middlewares)
PHP
13
star
8

charcoal-admin

The admin (Backend Dashboard) for Charcoal
PHP
11
star
9

astro-boilerplate

Astro project boilerplate by Locomotive
TypeScript
7
star
10

charcoal-core

The Charcoal PHP framework
PHP
6
star
11

3d-animation-merger

JavaScript
5
star
12

locomotive-nuxt

🦾 Nuxt front-end boilerplate for projects by Locomotive.
Vue
4
star
13

front-end-helpers

A toolkit for enhancing and optimizing Tailwind CSS workflow.
TypeScript
2
star
14

charcoal-image

Image manipulation library for PHP
PHP
2
star
15

charcoal-ui

Ui tools (Dashboard, Layout, Form and Menu)
PHP
2
star
16

Charcoal-Multi-Input

jQuery plugin to split an input into a rich multi-input UI
JavaScript
2
star
17

charcoal-image-compression

Charcoal module to handle image compression through compression api providers
PHP
2
star
18

workshop-one-page-to-life

SCSS
2
star
19

o6c-client

Client for o6c-api URL shortener.
PHP
1
star
20

charcoal-contrib-notifications

Notifications for objects modifications, through object revisions.
1
star
21

charcoal-contrib-template

Template to help start up a new Charcoal contrib repository
PHP
1
star
22

charcoal-contrib-command

Dynamically queue anything as long as a convenient cronjob is set.
PHP
1
star
23

charcoal-validator

Data validation
PHP
1
star
24

locomotivemtl.github.io

1
star
25

charcoal-presenter

The missing layer between models and views
PHP
1
star
26

locomotive-validate

A small, rules-based, jQuery plugin to validation forms.
JavaScript
1
star
27

charcoal-attachment

Adds support for working with relationships between models.
PHP
1
star
28

wordpress-chimplet

WordPress Plugin : Automatically synchronize Users, Categories, and Posts to MailChimp Lists, Groups, and Campaigns.
PHP
1
star
29

charcoal-view

Charcoal Views (mustache, php, or more)
PHP
1
star
30

o6c-api

"Only 6 Characters". URL-Shortener based on Slim 4.
PHP
1
star
31

wordpress-locomotive

Adds a touch of Locomotive to WordPress
PHP
1
star
32

locomotive-modules

Random Locomotive modules
JavaScript
1
star
33

charcoal-contrib

Community supported 3rd party packages for Charcoal
1
star
34

charcoal-base

1
star
35

charcoal-slim

Bootstrap a Slim App with a Charcoal configuration.
PHP
1
star
36

memo-website

Source of the official Memo website.
CSS
1
star
37

charcoal-contrib-communicator

Charcoal Communicator standardizes email communications destined for users and administors.
PHP
1
star
38

wp-lib-cms

Locomotive's WordPress CMS Library
PHP
1
star
39

wp-lib-theme

Locomotive's WordPress Theme Library
PHP
1
star