Jekyll for HTML Prototyping - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Jekyll for HTML Prototyping

Slide 2

Slide 2 text

HTML Prototyping

Slide 3

Slide 3 text

Why and then the How

Slide 4

Slide 4 text

What is Jekyll?

Slide 5

Slide 5 text

Static Site Generator

Slide 6

Slide 6 text

Why use Jekyll?

Slide 7

Slide 7 text

Why use pre-processors?

Slide 8

Slide 8 text

Why Jekyll for HTML Prototyping?

Slide 9

Slide 9 text

Basics

Slide 10

Slide 10 text

Create New Project jekyll new refresh-jekyll

Slide 11

Slide 11 text

Our Site

Slide 12

Slide 12 text

jekyll serve --watch Run It!

Slide 13

Slide 13 text

Site Pages

Slide 14

Slide 14 text

Templates

Slide 15

Slide 15 text

Layouts

Slide 16

Slide 16 text

Front-matter

Slide 17

Slide 17 text

Conﬁguration

Slide 18

Slide 18 text

Basics

Slide 19

Slide 19 text

Advanced

Slide 20

Slide 20 text

Status Quo

Slide 21

Slide 21 text

Everything Old is New Again

Slide 22

Slide 22 text

Data

Slide 23

Slide 23 text

Includes

Slide 24

Slide 24 text

CSS & Sass

Slide 25

Slide 25 text

Github Pages

Slide 26

Slide 26 text

Tony Pitale @tpitale http://tpitale.com

Slide 27

Slide 27 text

Thanks!

Slide 28

Slide 28 text

Resources https://github.com/tpitale/refresh-jekyll http://jekyllrb.com/ https://github.com/Shopify/liquid/wiki/Liquid-for-Designers http://tpitale.com/refresh-jekyll/ https://pages.github.com/