If you have any trouble while editing this template or if you simply want to ask a question about something, feel free to contact us at [email protected] or to post your request on our support forums at cssninja.io
You will need the following tools to customize this template.
- A good code editor of your choice
- A supported web browser
npminstalled on your machine (minimum node v16.15 required)
Be careful before you start working with the template and read the documentation. If not edited properly, layouts may break completely. No support is provided for faulty customization.
There are 3 root folders inside your Bulkit Downloaded Zip file :
- documentation : The local documentation version shipped with Bulkit
- bulkit-v5.6.0 : The project folder containing the project
Note that the distributed (/dist) version results from the build of the project. This documentation mostly focuses on building the project using Gulp. Please also note that no support is provided for the distributed version.
Using this Bulkit bundle will give 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, Bulkit gulp also uses zurb-panini, a very lightweight html templating engine. You can quickly 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.
First, check if you already have Node.js and npm installed. To check if you have Node.js installed, run this command in your terminal:
If Node.js is not installed on your machine, you can go to the official nodejs.org website, and choose the version depending on your operating system:
Install Node.js and npm on Windows, Linux or Mac OSX
Enable pnpm with corepack
We recommend pnpm, which can be enabled with:
corepack enable corepack prepare [email protected] --activate
Corepack is a script that acts as a bridge between Node.js projects and the package managers they are intended to be used with during development.
In practical terms, Corepack will let you use Yarn and pnpm without having to install them - just like what currently happens with npm, which is shipped in Node.js by default.
Corepack is installed with Node.js from v16.9.x.
If your version is below, install it with:
npm install -g corepack
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.
Before we dive more in the Bulkit template, you need to learn how to install it 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 bulkit-template-v5.6.0/bulkit-v5.6.0/ 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 fetch all the dependencies listed in your
package.json file. This will also install them in your project (in a newly created directory named
node_modules). 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.