After a few years of freelance as a 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 on 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 basic HTML5 template, jQuery, Slick slider, Material Icons, and much more which you can use to 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.

What gives us this clarity is BEM (Block-Element-Modifier) technology. BEM is designed to help modularise frontend development by breaking everything into blocks containing
elements, and then using modifiers to tweak them.

Material Icons – most people use font-awesome, so I picked this iconset 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 subfolder: ‘css’, ‘images’ and ‘js’.

File structure:

SASS

Install – installation methods differ, depending on which system you use. You can find all the necessary information on this web site http://sass-lang.com/install . There are many good applications that will get you up and 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 basic configuration of browser. In typography we defined font size to 10px, so in project we use REMs for easier responsive development. There you can choose the font
you want 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.

Provided you have experience with CSS, you can master SASS quickly and easily by reading http://sass-lang.com/guide .

BEM

Install – No installation is needed since it is just a methodology that helps you create reusable components as well as share code 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.