Frontend-Boilerplate

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. License

About The Project

You can save a lot of time by using a set of boilerplate files for your project instead of starting from scrach which can be a massive headache. Instead you can use the boilerplate to get started right away so you can focus on the main things for your project

(back to top)

Built With

In this boilerplate i used both tasks runner GULP version 4 and npm scripts to automated my common tasks. Tasks runner are configured to run the following functions

• Compile SCSS to css
• Beautify css and js
• Autoprefix and minify the CSS file
• Minify Js
• Minify Images
• Watch your SCSS and JS files directory and auto compile on changes
• Browser sync to auto reload browser after any changes

Directory structures for SASS

scss/
├── abstact                   
|   |– function.scss    # Reusable functions
|   |– mixin.scss       # Mixix
|   |– variable.scss    # Variable
|   ...                 # Etc…
|
├── base                   
|   |– animation.scss   # Animation style
|   |– base.scss        # Base
|   |– utilities.scss   # Utilities
|   |– typography.scss  # Typography rules
|   ...                 # Etc…
|
|– components/
|   |– buttons.scss     # Buttons
|   |– carousel.scss    # Carousel
|   |– card.scss        # Card
|   ...                 # Etc…
|
|– layout/
|   |– navigation.scss  # Navigation
|   |– grid.scss        # Grid system
|   |– header.scss      # Header
|   |– footer.scss      # Footer
|   |– sidebar.scss     # Sidebar
|   ...                 # Etc…
|
|– pages/
|   |– home.scss        # Home specific styles
|   ...                 # Etc…
|
|– vector/
|   |– tailwind.css     # third party
|   ...                 # Etc…
|
– main.scss             # Main Sass file

(back to top)

Getting Started

By following the instructions you can run the script on your machine

Prerequisites

Before installing the script you need some external dependencies on your machine

• nodejs

  sudo apt install nodejs

Gulp

• Gulp-cli

  sudo npm install gulp-cli -g

Installation

1. Clone the repo

   git clone https://github.com/S4F4Y4T/Frontend-Boilerplate.git

Npm Script

• Rename npm-package.json to package.json

Gulp

• Rename gulp-package.json to package.json

3. Install the packages

   npm install

Usage

Start the task runner by following commands

Npm Script

 npm run start

Gulp

 gulp

Task runner will auto compile and reload the browser when you make changes on html or dist directory

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)