Challenges

Build a one-page from scratch

Responsive

Visually attractive

Static, no server-side

No library overhead (jQuery, Bootstrap, etc.)

No build overhead (Jekyll, Gulp, etc.)

Responsive

Secret sauce: inline class

Media queries

Heavy size control (max-width, etc)

the inline class

ul.inline
  margin 0
  padding-left 0
  list-style none

  li
    display inline-block

Visually attractive

CSS transitions ftw

Parallax ftw

Static, no server-side

Where's the data? Not in my HTML!

JSON options file

Pro: Markdown files

Pro++: A lightweight express to serve static files

No library overhead

Use browser DOM API

No build overhead

make

Browserify

Jade

Stylus

Makefile dissection

BIN=./node_modules/.bin/
OUT=./dist

run: build
  $(BIN)ws

build: dist assets browserify jade stylus

browserify: node_modules
  $(BIN)browserify src/index.js -o $(OUT)/app.js

jade:
  $(BIN)jade < src/index.jade -O data/es.json > $(OUT)/index.html

stylus:
  $(BIN)stylus < src/index.styl > $(OUT)/app.css

assets: dist
  cp src/images/* $(OUT)/assets

node_modules:
  npm i

dist:
  mkdir -p dist/assets

clean:
  rm -rf node_modules dist

Building static HTML5 sites: a lightweight approach

By José Fresco

Made with Slides.com

Building static HTML5 sites: a lightweight approach

Showing how I build a static site without using a generator nor DOM manipulations libraries. Just bash and CSS

  • 423

More from José Fresco