Static HTML Starter

Starter kit for prototyping and building static HTML sites with Gulp, PostCSS, Babel, and Browsersync

Gulp Tasks

• default: Run css, js, and html tasks, start browsersync and watch tasks
• html: Copy HTML files to destination folder
• css: Process CSS files with PostCSS and save output files that don’t match cssPaths.exclude to stylesheet destination folder
• js: Process JS files with Babel and save output files that don’t match jsPaths.exclude to script destination folder
• browsersync: Start serving destination folder with Browsersync
• watch: Watch HTML, CSS and JS files. When a file gets added or changes, process it and reload Browsersync.
• clean: Delete destination directory
• build: Compile all source files once to a clean destination directory

What’s in the box?

Gulp is a task runner that allows you to tie multiple build operations together. If you haven’t used it before, you might want to read a beginner’s guide to Gulp first. The gulpfile.js in this project makes sure all other build tools work together at the right time. There are many Gulp plugins for lots of different tasks, like analyzing file size, compiling code, or optimizing images. You can add Gulp plugins by npm install-ing them in your project and following their instructions for including them in gulpfile.js.

PostCSS is a modular CSS transformer. This project uses plugins for automatic vendor prefixing, inlining @imported files, and resolving W3C CSS Custom Properties. This is just a starting point; there are many more PostCSS plugins to choose from.

Babel is a compiler for next generation JavaScript. It is extendable through Babel plugins, for example for compiling JSX. This project uses babel-presets-latest to compile next generation JavaScript for older browsers.

Browsersync is a live-reloading server that allows you to test your site in multiple synchronized browsers. It can automatically update all browsers whenever you change a file.

Static HTML Starter ♥️ Functional CSS

The combination of PostCSS and Browsersync makes Static HTML Starter a great starting point for rapid prototyping with Functional CSS frameworks like Tachyons or BassCSS.

You can install any stylesheet from npm and @import it in your CSS by adding @import "my-module";. For example running the command npm install --save tachyons-flexbox in your project directory would enable you to use @import "tachyons-flexbox"; in your CSS.

Code of Conduct

This project operates under the Contributor Covenant 1.4.0, and its text can be found under CONDUCT.md in the project root.

Styleguide

This project uses the JavaScript Standard Styleguide.

Getting in touch

The best way is via email [email protected], on Twitter via @fredericmarx, or GitHub Issues on this repo.