This is a starter-kit that lets you quickly build websites with Nunjucks and gulp, using TailwindCSS. Nunjucks uses templates for HTML files (change things in 1 place, and all files that use it template/partial will get updated). TailwindCSS is a CSS framework that will only generate CSS code for the classes you've actually used. This keeps the filesize nice and small. Gulp automates everything.
yarn install
or npm install
to install everything listed in package.jsongulp auto
. this will launch browsersync and watch for changes etc.src/pages
& your browser will auto-reload, displaying the change you just made.Change the .njk files in src/templates/partials or add your own. Add them to the {% maincontent %} block where you want them
{% block maincontent %}
{% include 'partials/section1.njk' %}
{% include 'partials/3blocks.njk' %}
{% include 'partials/pricing-table.njk' %}
{% include 'partials/call-to-action.njk' %}
{% endblock maincontent %}
You can set the title (browser tab title) in your src/pages *.njk files
{% set title = 'Home' %}
Page names are used by the nav menu to mark the current menu item
Add the pages you want to appear in the nav menu to the navitems in src/templates/partials/nav.njk
{% set navitems = [
{ title: 'Home', url: 'index.html', pagename: 'home' },
{ title: 'About', url: 'about.html', pagename: 'about' },
{ title: 'Contact us', url: 'contact-us.html', pagename: 'contact' },
{ title: 'in-page JS', url: 'in-page-js.html', pagename: 'inpagejs' }
] %}
src/pages
for page contentsrc/templates
for page layoutdist
directory)gulp minify
Here is the project structure:
dist
: this directory contains real files that will be hosteddist/assets
: all css, js, images, fonts and whatever assets related to app are located heresrc
: raw files used to develop the appsrc/pages
: pages for the app, everything here will be rendered to dist
directorysrc/templates
: layout filessrc/templates/partials
: partial files like nav, user-tabs, menu, etcAuto-render & live-reload (via browsersync)
run gulp auto
http://localhost:3000
in your browsersrc
the dist
files will be updated and your browser (http://localhost:3000
) will be reloaded automatically.(open command line to the folder where gulpfile.js is (root))
Generate minified css files (in dist/assets/css/filename.min.css)
gulp minifycss
Minify HTML
gulp minifyhtml
Minify images ! DO NOT UPDATE gulp-imagemin or imagemin-webp to a later versions, they changed something that completely breaks everything.
gulp minifyimages
Generate images in custom sizes (so you can load smaller images on smaller screens)
Requirements for resizing:
Specify the sizes you want to generate in the gulpfiles.js, default is [325, 500, 768, 1024]
Run
gulp resizeimages
This will generate images (same extension as sourcefile) in all the sizes. (filename-1024.png etc)
Convert PNG/JPG to WebP files
Put all png or jpg source images in dist/images/convert and run
gulp convertimages
this will generate *.webp files and put them in dist/images/webp
gulp minifycss
to minify the css files and generate .min.css files in dist/assets/cssAdd working contact form?
(I don't check github often enough to deal with pull requests. Just download/clone/fork it and then upload it as your own.
Consider whatever I didn't borrow from anyone else - see credits - CreativeCommons CC (no BY needed) )