Skip to content

dippas/Frontend-StarterKit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

FS

Give some love

Ko-fi BuyMeACoffee Paypal

Table of Contents

Status

stars forks watchers

release (latest by date) issues maintenance release date

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.

Pull requests

License

MIT