adamhemzal / web-skeleton-starter-kit

A development kit which helps you to build static websites fast.

Web Skeleton Starter Kit

Updates

July 12, 2021

• added PurgeCSS to gulpfile.js
• added bootstrap v 5.0 to the sass folder. Thanks to the PurgeCSS there is no need to comment bootstrap modules
• added folder partials containing footer.html and header.html. You can add other partials as you want by creating new file to the folder partials.
• added tailwind.config.js for future implementation of TailwindCSS

November 16, 2020

• added _wordpress_editor-styles.scss for Gutenberg support.
• added fonts.scss for custom local font support

November 07, 2020

• added folder img where you can put all your images for the website

October 29, 2020

• deleted ! in font-awesome and bootstrap-grid because cssnano in gulp doesn't delete comments with /*!
• added wordpress-core.scss for anyone who is building themes for WordPress
• added markup for menu

October 11, 2020

• added support for PostCSS 8.0 and resolved problems with panini. Added support for mobile-first approach in SASS

April 19, 2020

• added sourcemaps and error handling for sass for better development

February 19, 2020

• changed jQuery container in app.js according to this discussion

February 14, 2020

• added panini package. It helps to build larger site using html templates. For more information check panini website

February 11, 2020

• added bootstrap grid
• font-size has been rewritten
• in index.html preconnect has been added for improving speed of site and basic semantic structure
• .gitignore has been updated

December 10, 2019

• kit has been rewritten to fully support new Gulp 4
• kit has been tested, eveything is working

About

This is a starter kit for creating static websites. It is useful for everyone who creates websites regularly and want to automate some processes for example - minifying images, css, js, etc..

Web starter kit uses a NPM package gulp (version 4) to automate processes and speed up the workflow of static web development.

Structure

|-build
|-dev
  |--css
  |--fonts
  |--html
  |--humans
  |--img
  |--js
  |--sass
|-gulpfile.js
|-.gitignore
|-.browserslistrc

Included packages

This is a list of packages and plugins used in web starter kit. Every package is run by Gulp and help you in web development workflow

Included packages in Gulp.js:

• gulp
• del
• browser-sync
• babel
• sass
• gulp-rename
• gulp-size
• gulp-imagemin
• gulp-uglify
• gulp-newer
• gulp-cleanhtml
• gulp-wait2
• gulp-postcss
• panini
• post-css
  • postcss-preset-env
  • autoprefixer
  • cssnano

Other included packages

• LazySizes
  • for lazy-loading images
• jQuery v3.4.1
  • for making quick changes and improving interactivity on website
• font-awesome
  • it's still functioning and it's free!
• fontello
  • you don't need all icons in font-awesome. This tool allows you to pick and use only icons which you are going to use
• bootstrap 4 grid
• humans.txt
  • we are still humans who build the web, aren't we?

What you need before to run the web starter kit

• node.js
• optional: you can also install yarn for better and easier package management

How to install and run web starter kit

1. Download this kit

   git clone https://github.com/adamhemzal/web-skeleton-starter-kit.git
   

2. Initiate project. It'll create a package.json file. I highly suggest using yarn instead of npm

   yarn

   yarn init
   
   yarn init -y // I recommend using this line, because it'll skip the annoying questions.
   

   npm

   npm init
   
   npm init -y // I recommend using this line, because it'll skip the annoying questions.
   

3. Install all packages. Simply copy and paste the code bellow. The same code can be found in a comment in gulpfile.js

   yarn

   yarn add --dev gulp del postcss browser-sync gulp-babel @babel/core @babel/preset-env gulp-sass gulp-sourcemaps node-sass gulp-rename gulp-size gulp-imagemin gulp-uglify gulp-newer gulp-cleanhtml gulp-wait2 gulp-postcss postcss-preset-env cssnano autoprefixer panini
   
   

   npm

   npm install --save-dev gulp del postcss browser-sync gulp-babel @babel/core @babel/preset-env gulp-sass gulp-sourcemaps node-sass gulp-rename gulp-size gulp-imagemin gulp-uglify gulp-newer gulp-cleanhtml gulp-wait2 gulp-postcss postcss-preset-env cssnano autoprefixer panini
   
   

4. Run the gulpfile.js

   yarn

   yarn gulp
   

   npm

   npm gulp
   

Workflow

TODO

Using Fontello

• visit Fontello site
• select icons which you want and need
• download icons using Download button on the website
• unzip file and open fontello-codes.css
• copy all code from fontello-codes.css to the bottom of the file dev/sass/fontello/_main-fontello.scss and replace the previous icons
• if you want to use fontello, check the line @import "fontello/fontello.scss"; in file style.scss if it is uncommented