Hello there!

This is my personal skeleton that I use when I start a new project. I use it mostly for Front-end Web Design making use of SASS and Browser Sync to preview the changes on PC, mobile etc.

Feel free to create requests and improve it. Issues / Pull Request

⚙️ Where to start

Make sure you have Node.js installed, Grunt, Ruby and Sass

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.

Install all the packages and dependencies

~ npm install

Grunt Tasks

For development:

Run Browser-sync and watch SASS files.

~ grunt

For production:

Use the task

~ grunt dist

This will generate content inside dist/ coping the js and img folders from src/, inline HTML/CSS and Autoprefixer.

Grunt taks

• grunt-contrib-cssmin
• grunt-contrib-htmlmin
• grunt-contrib-sass
• grunt-contrib-watch
• grunt-browser-sync

SASS Files

Sass is a preprocessor that adds nested rules, variables, mixins and functions, selector inheritance, and more to CSS. Sass files compile into well-formatted, standard CSS to use in your site or application.

Main SASS File: /sass/style.scss

• Roboto Font
• Material-Icons
• Normalize
• Bootstrap 4 Grid

And other folder structure for components and imports.

UPDATES

• ✖️ Removed Flexbox Mixin, added Autoprfixer instead for better browser support.
• ✔️ Added ESLint with Browser, Vanilla JS, ES6 and jQuery.
• ✔️ Added Bootstrap 4 Grid (Flex, SASS Version).
• ✔️ Added Grunt Copy, copy src/js and img folder to /dist.