ALPS – Adventist Living Pattern System

This is the future home of the ALPS codebase. The pattern library is built off of Pattern Lab, and a tool based on atomic design.

Want to make changes?

If you want to make changes, feel free to fork the repository and create a pull request.

Questions or Issues?

Questions or issues can be filed as tickets on this repository and will be handled using the GitHub system.

Seventh-day Adventist Pattern Lab

Overview

This repository contains the front-end code for the Seventh Day Adventist project. Pattern Lab is the tool used for pattern template building and pattern library compilation.

Getting Started

• Set up your local dev url to be alps.dev
• Install node globally
• run npm install (may need to be run as sudo)
• run grunt
• get mamp working and point toward the patternlab/public folder

This creates all patterns, the styleguide, and the pattern lab site as well as a local server for development.

Project Standards

Front-End General Best Practices

1. Separation of presentation, content, and behavior.
2. Markup should be well-formed, semantically correct, and generally valid (if possible).
3. Javascript should progressively enhance the experience.
4. Always keep performance at top of mind when coding.

CSS Coding Standards

The CSS in this project follows Harry Robert's itcss architecture. CSS/SCSS Coding Best Practices should be the referenced standards guide when writing sane, manageable, scalable CSS.

Git Commit Messages

All commit messages should abide by the following criteria:

• Begin with a one line summary. It should be short (50 chars or less).
• This should be followed by a longer description if necessary.
• The first two items should be separated by an empty line.
• All lines should be wrapped at approximately 72 characters.
• Reference an issue in your commits whenever possible. Use the Github standard gh-34 for ticket #34.
• If you forget to reference the issue in your commit, and the commit has already been pushed, reference the commit hash in a comment on the ticket.

Troubleshooting Installs

Make sure you are running your terminal/command line session as administrator. This could mean sudo, or opening the window with a right-click option.

About Pattern Lab

• Pattern Lab Website
• About Pattern Lab
• Documentation
• Demo

The PHP version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns and the JavaScript-based viewer, with a PHP-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, Pattern Lab strongly separates patterns, data, and presentation from build logic.

Demo

You can play with a demo of the front-end of Pattern Lab at demo.patternlab.io.

Getting Started

• Requirements
• Installing the PHP Version of Pattern Lab
• Upgrading the PHP Version of Pattern Lab
• Generating the Pattern Lab Website for the First Time
• Editing the Pattern Lab Website Source Files
• Using the Command-line Options
• Command Prompt on Windows

Working with Patterns

Patterns are the core element of Pattern Lab. Understanding how they work is the key to getting the most out of the system. Patterns use Mustache so please read Mustache's docs as well.

• How Patterns Are Organized
• Adding New Patterns
• Reorganizing Patterns
• Including One Pattern Within Another via Partials
• Managing Assets for a Pattern: JavaScript, images, CSS, etc.
• Modifying the Pattern Header and Footer
• Using Pseudo-Patterns
• Using Pattern Parameters
• Using Pattern State
• "Hiding" Patterns in the Navigation
• Adding Annotations
• Viewing Patterns on a Mobile Device

Creating & Working With Dynamic Data for a Pattern

The PHP version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the inclusion of one pattern within another it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The PHP version of Pattern Lab uses a JSON file, source/_data/data.json, to centralize many of these attributes.

• Introduction to JSON & Mustache Variables
• Overriding the Central data.json Values with Pattern-specific Values
• Linking to Patterns with Pattern Lab's Default link Variable
• Creating Lists with Pattern Lab's Default listItems Variable

Using Pattern Lab's Advanced Features

By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother:

• Watching for Changes and Auto-Regenerating Patterns
• Auto-Reloading the Browser Window When Changes Are Made
• Multi-browser & Multi-device Testing with Page Follow
• Keyboard Shortcuts
• Special Pattern Lab-specific Query String Variables
• Preventing the Cleaning of public/
• Generating CSS
• Modifying the Pattern Lab Nav
• Editing the config.ini Options
• Integration with Compass