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 support@cssninja.io 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 installed on your machine (minimum node v16.15 required)
4. Intermediate html knowledge
5. Intermediate scss knowledge
6. Intermediate javascript knowledge

TIP

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.

Template folders

release-friendkit-v2.6.3.zip
├── .vscode
├── documentation
├── nginx
├── src
│   ├── assets/
│   ├── data/
│   ├── layouts/
│   ├── pages/
│   └── partials/
├── .babelrc
├── .dockerignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── Dockerfile
├── gulpfile.js
├── LICENSE.md
├── package.json
├── pnpm-lock.yaml
└── README.md

Note that the pre-compiled folder has been removed from the project.

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. However we will explain in details how to get the most from the template, even if you've never worked, with pnpm, 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 Node.js environment. If you already have Node and NPM installed on your machine, you can skip the following sections.

Install Node.js

First, check if you already have Node.js installed. Run this command in your terminal:

node -v

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

TIP

You can also use Node Version Manager, or Volta.sh to manage multiple Node.js versions on your machine.

Enable pnpm with corepack

We recommend pnpm, which can be enabled with:

corepack enable
corepack prepare pnpm@latest --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.

TIP

Corepack is installed with Node.js from v16.9.x.
If your version is below, install it with: npm install -g corepack

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 release-friendkit-v2.6.3.zip 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, that we previously installed. Enter the following command at the root of the my-project folder :

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

Initialize a git repository

We recommend to initialize a new git repository for your project and create your first commit at this point.

# Create a new folder
git init

# Add all files to git
git add .

# Create your first commit
git commit -m "Initial commit"

WARNING

Remember to make your repository private if you fork or create a new git repository, as the template is a paid product.

Start developing

To start developing, you need to run the following command at the root of your project :

pnpm dev

This will run a series of tasks, including the compilation of the Sass files, the concatenation of the Javascript files, the compilation of the Panini templates, and the start of the BrowserSync server. Once the tasks are completed, you can open your browser and go to http://localhost:3000 to see the template in action. BrowserSync will automatically reload the page whenever you make changes to the Sass, Javascript or Panini files.

Build for production

When you are ready to deploy your project, you need to run the following command at the root of your project :

pnpm build

This will run another set of tasks, including the compilation of the Sass files, the concatenation of the Javascript files, the compilation of the Panini templates, the minification of the CSS and Javascript files, and the creation of the dist folder, which contains all the files that you need to upload to your server.

When the build is done, you can deploy the dist folder to your server, or any static hosting service. If you want to test the build locally, you can run the following command at the root of your project :

npx serve -p 5000 dist

TIP

This will run a local server on port 5000, and serve the files inside the dist folder using the serve package.