dippas / Frontend-StarterKit

Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]

Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]

This starterkit allows you to have a quickly start in building your website.

Give some love

Table of Contents

• Status
• Changelog
• Setup
• Installation
• Features
• Project Structure
• Notes
• Contributing
• License

Status

ChangeLog

You can check the changelog here

Setup

• Download Node.js from your favorite browser here
• Restart your PC (just in case)

Installation

• Clone this project
• Open the Project with your favorite IDE
• Run the Shell
• In the Shell run the following commands:
  • pnpm i -g pnpm gulp gulp-cli (if is your first project using npm and gulp)
  • pnpm i
  • gulp build to compile files to dist folder

Features

• A live-reloading server with Browsersync
• Automated build process that includes, but is not limited to: SCSS compilation (with Autoprefixer included) and image optimization
• Ability to add 3rd party plugins easily - gulp/_config.js
• Minified CSS & JS in dist folder
• SourceMaps for better debugging
• Core JS files includes (e.g.: URL external fix for security issue)
• Code Formatted with Prettier
• Compiling HTML files from Pug
• Writing Pug with JSON, to separate logic from content
• Favicons Included
• Styleguide with links for templates/modules
• Cookiebar compliant with EU rules, fully customizable

Tasks

• gulp - Create the local server (BrowserSync) and watch for source files
• gulp build - Compiles source files into dist folder, also cleans unused files in dist

Project Structure

|   .prettierrc
|   .gitignore
|   gulpfile.js
|   LICENSE
|   package-lock.json
|   package.json
|   README.md
|
+---dist
|   |   index.html
|   |
|   +---assets
|   |   +---css
|   |   |   |   styleguide.min.css
|   |   |   |   styleguide.min.css.map
|   |   |   |   styles.min.css
|   |   |   |   styles.css.min.map
|   |   |   |
|   |   |   \---vendor
|   |   |           vendor.min.css
|   |   |           vendor.min.css.map
|   |   |
|   |   +---img
|   |   |   \---favicon
|   |   |        apple-touch-icon-57x57.png
|   |   |        apple-touch-icon-72x72.png
|   |   |        apple-touch-icon-114x114.png
|   |   |        apple-touch-icon-120x120.png
|   |   |        apple-touch-icon-144x144.png
|   |   |        apple-touch-icon-152x152.png
|   |   |        favicon-16x16.png
|   |   |        favicon-32x32.png
|   |   |        favicon.ico
|   |   |        mstile-144x144.png
|   |   |
|   |   \---js
|   |       +---app
|   |       |       app.js
|   |       |       app.js.map
|   |       |
|   |       \---vendor
|   |               vendor.js
|   |               vendor.js.map
|   |
|   \---views
|       +---skeleton
|       |   |   layout.html
|       |   |
|       |   +---footer
|       |   |       footer.html
|       |   |       scripts.html
|       |   |
|       |   \---header
|       |           head.html
|       |           header.html
|       |
|       +---styleguide
|       |       footer.html
|       |       header.html
|       |       index.html
|       |       layout.html
|       |
|       \---templates
|               home.html
|
\---src
    |   index.pug
    |
    +---data
    |   |   styleguide.json
    |   |
    |   \---temp
    |           data.json
    |
    +---img
    |   \---favicon
    |   |        apple-touch-icon-57x57.png
    |   |        apple-touch-icon-72x72.png
    |   |        apple-touch-icon-114x114.png
    |   |        apple-touch-icon-120x120.png
    |   |        apple-touch-icon-144x144.png
    |   |        apple-touch-icon-152x152.png
    |   |        favicon-16x16.png
    |   |        favicon-32x32.png
    |   |        favicon.ico
    |   |        mstile-144x144.png
    |
    +---js
    |   \---app
    |       +---core
    |       |       @cookies.js
    |       |       @outlineAccessibility.js
    |       |       @preloader.js
    |       |       @scrollToElement.js
    |       |       @urlExternalSafe.js
    |       |
    |       \---general
    +---scss
    |   |   global.scss
    |   |   styleguide.scss
    |   |
    |   +---abstracts
    |   |       _functions.scss
    |   |       _mixins.scss
    |   |       _placeholders-includes.scss
    |   |       _placeholders.scss
    |   |       _variables.scss
    |   |
    |   +---base
    |   |       _reset.scss
    |   |       _typography.scss
    |   |
    |   +---layout
    |   |       _buttons.scss
    |   |       _fonts.scss
    |   |       _footer.scss
    |   |       _general.scss
    |   |       _header.scss
    |   |       _utils.scss
    |   |
    |   \---styleguide
    |           _styleguide.scss
    |
    \---views
        +---modules
        +---skeleton
        |   |   layout.pug
        |   |
        |   +---footer
        |   |       footer.pug
        |   |       scripts.pug
        |   |
        |   \---header
        |           head.pug
        |           header.pug
        |
        +---styleguide
        |   |   footer.pug
        |   |   header.pug
        |   |   index.pug
        |   |   layout.pug
        |   |
        |   \---modules
        \---templates
                home.pug

Notes

• Doesn't support Internet Explorer
• gulp-cli must be v2.30+

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License