Start your test project fast – NADA Front-end boilerplate
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.
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.
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.
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
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