Style Guide and Pattern Library Systems

Style Guide and Pattern Library Systems

Introduction

This page lists examples of actual style guides and pattern libraries. It also lists possible pattern library systems for Sakai.

Examples of Actual Style Guides

Possible Pattern Library Systems for Sakai

Pattern Library System

Website

Written In

Description

Capabilities

Pattern Library System

Website

Written In

Description

Capabilities

Pattern Lab

https://patternlab.io/

http://atomicdesign.bradfrost.com/chapter-3/

PHP

or

Node

Pattern-driven using atomic design principles

"provides the ability to view both a pattern’s underlying HTML and the template code used to generate the HTML. It can also be extended to showcase accompanying CSS and JavaScript code."

Knyle Style Sheets (KSS)

https://github.com/kneath/kss

 

 

Document the existing SASS files and this process will generate the documentation

ALA Pattern Library

https://github.com/alistapart/pattern-library

Node

"All the pattern files (snippets of markup) are in their own folder, and adding one in there automatically adds it to the library."

 

Pattern Primer

https://github.com/adactio/Pattern-Primer/

Node

or

Ruby

or

Jekyll

or

Grunt

"Create little snippets of markup and save them to the "patterns folder." The pattern primer will generate a list of all the patterns in that folder. You will see the pattern rendered as HTML. You will also get the source displayed in a textarea."

 

Barebones

https://github.com/paulrobertlloyd/barebones

PHP

"An initial directory setup, style guide and pattern primer. Intended as a starting point for my own projects, available for others to fork and adapt for theirs."

 

Static Site Generator built into Sakai's build

Custom

Java

A program needs to be built that would take templates and pages written with Markdown and generate the complete HTML pages.

Completely customizable for Sakai

Built right into the Sakai build process

No additional languages or frameworks need to be packaged with Sakai