Getting started #

Support #

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

Prerequisites #

You will need the following tools to customize this template.

1. A good code editor of your choice
2. A supported web browser
3. node.js and npm installed on your machine (minimum node v16.15 required)
4. Intermediate html knowledge
5. Intermediate scss knowledge
6. Intermediate javascript knowledge

Template folders #

You will find 3 root folders inside your Friendkit downloaded zip file :

• Documentation : The local documentation version shipped with Friendkit
• Friendkit-x.x : The project folder containing all the template parts
• demo : The project precompiled source for any usage (Use at your own risk as the recommended AND supported way is using the gulp package).

The Friendkit Package #

Using this bundle will give you total control over the template. All the important tasks are fully automated, you don't have to do anything. Howevern 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, Friendkit 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. Be sure to you are not using a nodejs version higher than 8.

Yarn / Npm #

To start working with Friendkit, we are going to need a Package Manager, like yarn or npm. yarn and npm make 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.

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

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

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 --global [email protected]

Installing Yarn #

We personally recommend Yarn as we think it is a better package manager than npm. If you want to use Yarn, keep in mind that you should not mix the 2. You either use Yarn or Npm in a project, never both.

npm install --global yarn

Installing gulp.js #

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 :

• Simple operations like CSS and Javascript minification / concatenation
• 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 node and npm are installed, you can start instaling Gulp. In your terminal window, enter the following command :

# If you use Npm
npm install --global gulp

# If you use Yarn
yarn global add gulp

# If you use Npm
sudo npm install gulp -g

# If you use Yarn
sudo yarn global add gulp

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
• gulpfile.js

The 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 Friendkit #

Before we dive more into the template files, you need to learn how 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-projects. Unzip the contents of the friendkit-x.x 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 npm, that we previously installed. Enter the following command at the root of the my-project folder :

# If you use Npm
npm install

# If you use Yarn
yarn install

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.