• Stars
    star
    325
  • Rank 129,350 (Top 3 %)
  • Language
    JavaScript
  • Created over 5 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

front-end boilerplate for Sass and Gulp 4

Front-end Boilerplate using Sass and Gulp 4

Using a set of boilerplate files when you're starting a website project can be a huge time-saver. Instead of having to start from scratch or copy and paste from previous projects, you can get up and running in just a minute or two.

I wanted to share my own boilerplate that I use for simple front-end websites that use HTML, SCSS, and JavaScript. And I'm using Gulp 4 to compile, prefix, and minify my files.

I also wrote a rather detailed walkthrough on how to get up and running with Gulp 4, as well as migration tips from Gulp 3.

You can read that on my blog here.

Quickstart guide

  • Clone or download this Git repo onto your computer.
  • Install Node.js if you don't have it yet.
  • Run npm install
  • Run gulp to run the default Gulp task

In this proejct, Gulp is configured to run the following functions:

  • Compile the SCSS files to CSS
  • Autoprefix and minify the CSS file
  • Concatenate the JS files
  • Uglify the JS files
  • Move final CSS and JS files to the /dist folder

More Repositories

1

fem-easybank

Easybank landing page from Frontend Mentor
HTML
401
star
2

fem-dklt-toggle

HTML
176
star
3

gulp-browsersync

HTML
77
star
4

fem-single-page-developer-portfolio

HTML
64
star
5

generator-gulp-sass-boilerplate

JavaScript
41
star
6

diy-links-page

Custom Instagram links page
CSS
32
star
7

codercoder-dark-theme

The VS Code theme you've seen in all my YouTube videos!
31
star
8

thecodercoder.github.io

HTML
30
star
9

dinosaur-generator

JavaScript
24
star
10

super-mario-google-map

JavaScript
23
star
11

fem-single-price-grid-component

Frontend Mentor challenge
CSS
22
star
12

Simple-Responsive-Layout

HTML
20
star
13

gulp-for-beginners

JavaScript
20
star
14

wordle-clone

JavaScript
18
star
15

space-cats-hamburger-menu

HTML
18
star
16

gulp-sass-boilerplate

SCSS
17
star
17

simple-sticky-header

HTML
16
star
18

cards-flexbox

HTML
15
star
19

sass-modules-demo

SCSS
14
star
20

fem-news-homepage-main

HTML
13
star
21

cards-css-grid

HTML
13
star
22

boilerplate-parcel

Boilerplate website files using Parcel, SCSS, JS
HTML
12
star
23

Super-Simple-Gulp-File

Very basic project to illustrate how Gulp works
JavaScript
12
star
24

rdb-checkpoints

Code checkpoints for each section in Responsive Design for Beginners
HTML
11
star
25

fem-faq-accordion

HTML
10
star
26

rdb-transcripts

10
star
27

fem-typemaster-landing-page

CSS
10
star
28

fem-fylo-dark

Frontend Mentor Fylo dark landing page
CSS
9
star
29

stop-using-pixels

HTML
9
star
30

boilerplate-gulp

Simple front-end boilerplate using Gulp 4
JavaScript
8
star
31

responsive-design-beginners

HTML
7
star
32

central-coffee-demo

Front-end of a fictitious coffee shop
HTML
6
star
33

sass-bem-beginners

SCSS
6
star
34

fem-huddle

Landing page from Frontend Mentor
CSS
5
star
35

fem-workit-landing-page

SCSS
5
star
36

responsive-design-beginners-test

HTML
5
star
37

fem-clipboard

Frontend Mentor Clipboard landing page
CSS
4
star
38

code-of-conduct

2
star
39

fullbleed-grid

HTML
2
star
40

design-for-devs

HTML
1
star