Atlas

A modern front-end framework to start a new project; minimal and easy customisation.

Prerequisites

In order to use the toolkit there are a couple of items to install first.

• Node.js
• Gulp

To install the Gulp CLI simply run the following command within the command prompt:

npm install --global gulp-cli

Installation

Install the Node modules:

npm install

Running Gulp

To run Gulp enter the single command which will trigger the default task:

gulp

The tasks can be triggered individually:

gulp <task-name>

gulp sass
gulp js
gulp svg
gulp serve

Tools

• Livereload of the browser window when .scss, .js, .jsx and template files are edited
• Error logging through the command prompt and notifications through your platform
• JavaScript error checking and code quality control using ESLint with .eslintrc configuration file
• Concatenate and minify JavaScript
• Provides sourcemaps for both CSS and JavaScript files
• Minifies SVG files and removes any inline fill attributes to allow full CSS control
• Browsersync provides easy access to view your project on different devices by providing you with a dynamic URL

JavaScript

Add your JavaScript third party libraries into the src/js/libs directory to prevent the files from being linted by ESLint.

• jQuery
• Modernizr
• ESLint configuration file for setting up error checking .eslintrc
• Polyfill for REM unit
• Polyfill for min/max-width media queries

Sass

• Normalize.css
• 12 column grid
• MQ breakpoint mixin

SVGs

Add your SVGs into the src/images/icons directory and then use the SVG <use> element within your template that will reference the sprite at the top of the page.

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-{file-name}">
  <use xlink:href="#icon-{file-name}"></use>
</svg>

Templates

• Home
• Grid demo
• Visibility demo
• Utility demo