This template supports
Alpine JS v3.x,
Bulma 0.9.x and
gulp 4. Currently available features :
- ES6 imports with
- Bulma 0.9.3 source integration
- Flat file templating with
- Modular SCSS
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
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
yarn, feel free to do so).
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:
To confirm that you have npm installed you can run this command in your terminal:
Because it is based on Gulp 4, this template needs a minimum version number for node js. We made sure that the project works properly with Nodejs 12 LTS. The preferred version number is node 12.13.0 which we used to develop the project. You can use NVM to easily manage multiple nodejs versions on the same machine. It should also run properly on Node 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
npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm. Luckily, npm knows how to update itself! To update your npm, type this into your terminal:
npm install [email protected] -g
Gulp is a "Task runner" served as a Frontend tool. It is capable of executing chunks of code and save you huge amounts of time. What gulp can do is very vast :
- Directory creation or deletion, project creation from scratch
- Image optimization and compression
- Deploying a local server to run tests
- Ghost browser simulation to test display regressions etc ...
To stay simple, Gulp will help you save tremendous amounts of time by handling recurring and automated tasks. You can then focus on your real work : produce clear and concise code, and get a coffee from time to time ! If you want to install Gulp globally on your machine, meaning that you will have access to its commands everywhere, follow the following steps. Otherwise jump to the next section.
As soon as
npm are installed, you can start instaling Gulp. Sometimes, gulp will cause some problems. In those specific case you can install the CLI gloablly on your machine. In your terminal window, enter the following command :
npm install gulp -g
If you are working in a Linux or a Mac OSX environment, you will probably need to add the
sudo command to have the required rights
sudo npm install gulp -g
Gulp should now be installed and ready to serve.
To work properly, it relies on 2 files that you can find at the root of the project :
package.json file lists all your project's developement and production dependencies installed via
npm, an effective way to manage your project's assets consistently. The
gulpfile.js file contains all the task that Gulp will perform once launched.
Installing the project
Before starting editing the Listkit 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-listkit-1.0 folder) folder inside it. We will talk about the project structure in the upcoming section :
Once done, you need to install the project dependencies with
npm, that we previously installed. Enter the following command at the root of the
my-project folder :
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 Gulp and begin developing. However, before you start we are going to take a closer look to the template structure, and to how things are organized.