Template Highlights
This template supports Alpine JS v3.x
, Bootsrap 5.x
and gulp 4
. Currently available features :
- ES6 imports with
Browserify
andBabelify
- Bootsrap 5.x source integration
- Flat file templating with
Panini
- Modular SCSS
Using Gulp
Using Gulp gives you total control over the template. All the important tasks are fully automated, you don't have to do anything. However we will explain in details how to get the most from the template, even if you've never worked, with npm
, gulp
or panini
.
To avoid repeating same chunks of code, this template also uses zurb-panini, a very lightweight html templating engine. You can quikly create easily reusable chunks of code. But before diving into the template itself, We need to setup a nodejs environment. If you already have Node and Npm installed on your machine, you can skip the following sections.
Npm / Yarn
To start working with the project, we are going to need the Node Package Manager
, commonly known as npm
. npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things. (If you're a more advanced user and you prefer using yarn
, feel free to do so). We personally recommend yarn
as we simply think it is a better package manager.
Install nodejs
npm is distributed with Node.js, which means that when you download Node.js, you automatically get npm installed on your computer. First, check if you already have node and npm installed. To check if you have Node.js installed, run this command in your terminal:
node -v
To confirm that you have npm installed you can run this command in your terminal:
npm -v
TIP
This template needs a minimum version number for Node.js. We made sure that the project works properly with Node.js 16.x LTS. You can use NVM to easily manage multiple nodejs versions on the same machine. It should also run properly on Node.js 14.x.
If node is not installed on your machine, follow the steps described in one of the following guides, depending on your operating system:
- Install node.js and npm on Windows
- Install node.js and npm on Linux
- Install node.js and npm on Mac OSX
Installing the project
Before starting editing the Wire B template, we need to install the project and go through a little setup to make it functional and running. Create a new directory for your project. For the sake of the example, we will call it my-project
. Unzip the contents of the template you downloaded (inside the zip, find the template-Wire B-x.x folder) folder inside it. We will talk about the project structure in the upcoming section :
cd path/to/my/project
Once done, you need to install the project dependencies with pnpm
, yarn
or npm
, that we previously installed. Enter the following command at the root of the my-project
folder :
pnpm install
This will automatically fecth all the dependencies listed in your package.json
file and install them in your project. Once the installation process is done, you are ready to start the development server and begin making your changes. However, before you start we are going to take a closer look to the template structure, and to how things are organized.