Start your test project fast – NADA Front-end boilreplate
Written by Quantox 12 December 2017

Start your test project fast – NADA Front-end boilerplate

 

NADA Boilerplate post1

 

After a few years of freelance as Front-end developer, I started looking for a job in big companies in order to improve my knowledge by working on big and demanding projects. Whenever I applied for a job, I had been given a test task to ascertain my knowledge and skill level. During that period, I realized I was wasting a lot of time setting up the project and doing some of the most basic things.

In this post, I will show you how to set up your project fast and how to use my Sass/BEM based NADA Boilerplate. This boilerplate also includes a basic HTML5 template, jQuery, Slick slider, Material Icons, and much more… You can use all of this and solve your task faster.

WHY THESE TECHNOLOGIES?

SASS CSS preprocessor enables us to write CSS in small, easy-to-navigate modules. In this boilerplate, you will get a good start with base styles and structure for components.

The BEM methodology gives us this clarity. BEM stands for Block-Element-Modifier and is designed to help modularise frontend development by breaking everything into blocks containing elements, then using modifiers to tweak them.

Material Icons – most people use font-awsome, so I picked this icon set since we want to be different from others.

jQuery – a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Slick carousel – the last carousel you’ll ever need; fully responsive, swipe enabled, desktop mouse dragging, autoplay, dots, arrows, callbacks, etc…

I encourage you to use comments to make your code look more professional and easier to understand as well as follow naming conventions for classes and variables.

 

GET STARTED

Boilerplate usage – When you download it, inside you will find assets folder and index.htmlî file. Inside assets, you will have three subfolders: css, images, and js.

File structure:

 

filestructure NADA Boilerplate

 

SASS

Install – depending on which system you use, there are different installation methods. You can find all the necessary information on their website ( http://sass-lang.com/install ). There are many good applications that will get you up and be running with Sass in a few minutes if you use Windows. Personally, I would recommend you to use Koala and Prepros.

Usage – Inside of css folder you can find sass folder with components and config subfolders.

Components – Here you will insert your components header, footer, banners, grid items etc…

In config folder, you will find two subfolders: global and variables.

Global – general settings will help you with development because CSS reset is included with a basic configuration of the browser. In typography, we defined font size to 10px, so in the project, we use REM-s for easier responsive development. There you can choose a font you wanna to use in project or just add font variable in variables for easier usage.

Variables – inside of this folder you put all variables you need. For starters, there are some media query and color variables.

If you are not familiar with working in Sass and you have experience with CSS, you can quickly and easily master it by reading http://sass-lang.com/guide

 

BEM

Install – You do not need to install it, it’s just a methodology that helps you to create reusable components and code sharing in front-end development.

Usage – It is best to read the documentation on their official website http://getbem.com/naming/ When you do that, you can see an example that will visually illustrate how to use the BEM methodology https://codepen.io/AttilaBre/pen/EbYdNj

 

Other things such as Material icons, jQuery, and Slick are also at your disposal if you need them to complete the task you have received.

If you decide to use some of these technologies, here is the official documentation:

Material Icons – https://material.io/icons/

jQuery – https://api.jquery.com/

Slick Slider – http://kenwheeler.github.io/slick/

I hope this article will help you to get started faster with new projects and tasks, as well as help you to find a job.

Download NADA boilerplate here.

 

All the best,

Attila Pravda Front-end developer @ Quantox

BACK
Tags: , , ,

JOIN THE MAILING LIST