Skip to content

Nunjucks (HTML template engine) Bulma (CSS Framework) starter kit

Notifications You must be signed in to change notification settings

benninkcorien/nunjucks-starter-kit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nunjucks Bulma Starter Kit

Requirement

Fork

How to start

  1. download & unzip: https://github.com/benninkcorien/nunjucks-starter-kit/archive/master.zip or

    git clone https://github.com/benninkcorien/nunjucks-starter-kit.git

  • install dependencies: run yarn install to install everything listed in package.json
  • run gulp bulma to compile bulma from node_modules to dist/assets/css/bulma.css
  • run gulp auto . this will launch browsersync and watch for changes etc.
  • try changing one of the pages inside src/pages & your browser will auto-reload, displaying the change you just made.

Run gulp minify if you want to minify your html files inside dist folder


Why?

  • works out of the box!
  • example included (using bulma css):
    • src/pages for page content
    • src/templates for page layout
  • output is plain html (stored in dist directory)
  • serverless
  • can use free service like surge.sh, github pages for hosting
  • minimum knowledge needed: html, css, js – no need for php, ruby, etc.
  • minifier included! use gulp minify

Directory Layout

Here is the project structure:

  • dist : this directory contains real files that will be hosted
  • dist/assets : all css, js, images, fonts and whatever assets related to app are located here
  • src : raw files used to develop the app
  • src/pages : pages for the app, everything here will be rendered to dist directory
  • src/templates : layout files
  • src/templates/partials : partial files like nav, user-tabs, menu, etc

Sample workflow

A. without auto-render

  1. edit pages in src
  • run gulp
  • publish dist to hosting provider

B. with auto-render

  1. run gulp watch
  • as you edit src, dist gulp watch will do the rendering behind the scene n updates dist directory: you need to reload your browser to see the changes
  • publish dist to hosting provider

C. with auto-render & auto-reload (via browsersync)

  1. run gulp auto
  • it will open http://localhost:3000 in your browser
  • using this workflow, when you edit src the dist will be updated (just like workflow B) and your browser (http://localhost:3000) will be reloaded automatically.

Page variables

Set page title

{% set title = 'Page title' %} used in <title> tag

Set active menu item

thenav.active('pagename')

{% block nav %} {% import 'macros/nav-macro.njk' as thenav %} {{ thenav.active('about')}} {% endblock %}


Changelog

Added automated CSS/JS version numbering (via gulp).


Nunjucks official docs: https://mozilla.github.io/nunjucks

About

Nunjucks (HTML template engine) Bulma (CSS Framework) starter kit

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 76.6%
  • JavaScript 22.9%
  • CSS 0.5%