Jekyll Version of Pattern Primer

What is a pattern primer?

This is an easy method to test your own CSS on standard HTML elements. Test some styles for an existing site. Make some boilerplate to kick off a project. Fork or clone this repo for Jekyll on GitHub if you want to try it out yourself with different styles or additional HTML elements or patterns.

Why a Jekyll fork?

Why not? Jekyll is a useful way to build static sites, and it is well-suited for quick prototyping. This is intended as a version of Adactio’s Pattern Primer but without PHP dependencies. It can be built locally with a Jekyll/Ruby environment or uploaded as a static directory on a remote server.

Credits

Get Jekyll, a brilliant static site generator which this was built with.

The original Pattern Primer project is by adactio (Jeremy Keith) and can be forked/cloned on GitHub if you prefer PHP or aren’t already using Jekyll. Many thanks to Jeremy for this great tool!

Pattern samples follow.

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.

blockquote.html

feedback-error.html

feedback.html

form-buttons.html

form-checkbox.html

form-email.html

form-number.html

form-select.html

form-text.html

form-textarea.html

form-url.html

Level one heading

heading-1.html

Level two heading

heading-2.html

Level three heading

heading-3.html

Level four heading

heading-4.html

Level five heading

heading-5.html

Level six heading

heading-6.html

  1. First list item
  2. Second item in a list of ordered items
  3. Third item in the list

list-ordered.html

list-unordered.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

pagination-first.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

pagination-last.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

pagination.html

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

text.html