Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Carlos Cuesta Starter Kit

Build Status Dependency Status GitHub release XO code style

Carlos Cuesta Starterkit

A simple starterkit boilerplate that I use to realize my front end static development projects. If you have comments or suggestions feel free to give me a shout on Twitter! Also checkout the yeoman generator-startekit.


  • Gulp - Automate and enhance your workflow
  • Pug - Terse language for writing HTML templates.
  • SASS - CSS with superpowers.
  • Babel - Use next generation JavaScript, today (ES5 => ES6).
  • Flexboxgrid - A grid system based on the flex display property.
  • NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine.

Requirements and Use


$ npm install -g gulp


$ git clone
$ cd starterkit/ && npm install
$ gulp


gulp: Runs the default task (dev) including the following ones :

  • styles: SCSS compiling to CSS, css minification and autoprefixing.
  • templates: Pug compiling and rendering to HTML.
  • scripts: ES6 to ES5 with babel, scripts minification and concatenation into a single file.
  • images: Image compression.
  • beautify: Beautify your preproduction files at ./dist/.
  • serve: Starts a server at ./dist/ with all your compiled files, looking for file changes and injecting them into your browser.

gulp build: Builds your project. runs the following tasks:

  • styles
  • templates
  • scripts
  • images
  • beautify

gulp optimize: Optimizes your project (to improve the pagespeed) runs:

  • uncss: Removes unused CSS from your styles file using uncss.
  • critical: Extract and inline critical-path (above-the-fold) CSS from HTML using critical
  • images

gulp deploy: Deploy your dist folder into your server or surge cloud runs:

If you want to use the deploy task, you will have to edit the gulpfile.js lines between 65-69 with your ftp connection info: host | user | password. If you want to use Surge instead of FTP, just setup a domain name in the surgeInfo.domain

Once you setup ftpCredentials, you will have to choose a directory of your server where the deploy will go: ftpUploadsDir

Now you will be able to use gulp deploy and your /dist/ folder will go up to your ftp server!

Use npm run to list the gulp tasks available. You can run the tasks too using the npm run scriptname that is on the list.

Project Structure

β”œβ”€β”€ /dist/                   # Minified, optimized and compiled files.
β”‚   β”œβ”€β”€ /assets/             # Assets folder.
β”‚   β”‚   β”œβ”€β”€ /css/            # CSS style files.
β”‚   β”‚   β”œβ”€β”€ /files/          # Static files.
β”‚   β”‚   β”‚   └── img/         # Images folder.
β”‚   β”‚   └── /js/             # JS files.
β”‚   └── *.html               # Rendered and compiled HTMLs from Pug.
β”œβ”€β”€ /node_modules/           # Node modules dependencies and packages.
β”œβ”€β”€ /src/                    # Source files.
β”‚   β”œβ”€β”€ /images/             # Images non compressed.
β”‚   β”œβ”€β”€ /scripts/            # JavaScript files.
β”‚   β”œβ”€β”€ /styles/             # SCSS style files.
β”‚   β”‚   └── _includes/       # Styles SCSS partials.
β”‚   β”œβ”€β”€ /templates/          # Templating Pug files.
β”‚   β”‚   └── _includes/       # Templating Pug partials.
└── gulpfile.js              # Gulp automatization file.




The code is available under the MIT license.