Home

Welcome to the njfrontend wiki!

Intro

Why use this?

Currently, I'm working on a digital marketing agency as a Front-End developer, so I develop various projects with basically the same structure, this tool is a skeleton project to start on new projects that will help you gain some time.

CSS

Framework

By default, I use bootstrap as a CSS framework on most of the projects, but you can easily change doing this:

1. Uninstall bootstrap bower uninstall bootstrap
2. Install your favorite CSS framework bower install foundation-sites

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.

CSS / Sass Styleguide

By default, I use SCSS as CSS pre-processor and BEM as a naming convention for my front-end code be easier to read and understand. Your styles must be inserted on /assets/styles/ directory

SASS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

BEM

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development I've created a mixin that helps you create new elements using BEM through SCSS. You can test doing this code on your .scss files:

Input:

@include block(test) {
   background: red;
   @include element(modifier) {
       color: blue;
       @include modifier(subelement) {
           background: gray;
       }
   }
}

Output:

.test {
  background: red;
}
.test__modifier {
  color: blue;
}
.test__modifier--subelement {
  background: gray;
}

Tools Used

Nunjucks

A rich and powerful templating language for JavaScript.

Gulp

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Bower

A package manager for the web

browsersync

Time-saving synchronized browser testing.

More

And much more tools that certainly will help you.