Presenting the Adventist Living Pattern System

ALPS

After so much planning, research, anticipation and work, I’m excited to get to show off the new Adventist Living Pattern System (ALPS). While it’s not perfectly finished (it probably never will be), it’s time to turn the lights on and let the world take a look at the Adventist Church’s shiny new pattern system.

Over the last six months, we have been working hard to get this project product off the ground. There has been hours of meetings with our team at the General Conference, consultations with communicators and web developers from the larger church community, and countless hours of work put in by Dan Mall, and his team from Superfriendly: TJ Pitre, Crystal Vitelli, Rob Adams, and Seth Hannah.

In the last 6+ weeks, I’ve been traveling to various regional meetings to present ALPS to communicators in the North American Division, Euro-Asia Division, Inter-European Division and several different meetings within the General Conference. After every meeting, people have come away excited about what we have created, and ready to deploy on their projects.

I’m guessing you are ready to see this too, so lets get on with it!

A few things you should know

Navigating

alps-menuThe first thing you should know about the ALPS site is how to get around. When you visit the site, you’ll see the molecule icon in the upper right corner. That’s the navigation for ALPS that will help you find the atoms, molecules, organisms, templates and pages.

Each pattern is surrounded by an iframe (in teal) that allows you to resize the width of each window to experience it at different viewports. Using the controls in the menu, you can set the viewport to a preset size (Small, Medium, Large and Full) a precise size, or even open to original window outside of iframe.

Getting the Code

alps-codeWhile you can always view source, at the bottom of each pattern you will find two tabs, “HTML” and “Mustache”. If you are creating or editing a page, the HTML section is what you will want. This gives the exact HTML in the example you are looking at. The Mustache tab is what ALPS uses in the background to generate the pattern displayed.

Annotations

As you browse through the ALPS site, you will find, on some patterns, an annotation. While currently not complete, these allow us to describe a little more about the thinking behind the pattern, and link to background information.

Pattern Status and Meta Information

alps-metaOn each pattern page, there is a section of pattern meta information that includes pattern status, as well as a “Contains” and “Included In” section.

The status is one of 3 states: In Progress, In Review, and Complete. These status’ are denoted in the menu as Red, Yellow and Green dots as well.

Since patterns can be nested, the “Contains” and “Included In” sections list the names of patterns that make up the current pattern, as well as the patterns this one is a part of.

The Theme Switcher

alps-chooserWhile you are browsing the Templates and Pages, give the Theme Switcher a try. You can see how the 7 primary and 2 secondary colors interact, as well as how the Dark mode works. (Note: Not all the color combinations work well in Dark mode.)

The Good Stuff

I bet you are ready to see ALPS, so I’ll wrap this up. Our next step is setup the CDN that will provide access to the CSS and Javascript that you can include in your pages to create an ALPS theme implementation.

Just this last week I started working on a simple 1-3 page site for a project using a static page generator. It only took me an hour or so to get the basic shape of the code worked out, and then I was copying and pasting code out of the library for patterns I wanted to use.

We Are Just Getting Started

While lots of work has been done, we are only just getting started. This library, and the code behind it, is just the beginning. We built it based on the design of Adventist.org, but with the intention of adding more as we go. So if you don’t see something that you need, ask. File an issue on GitHub. The more information you provide (image, example, code) the easier it will be to create the pattern and the sooner we can incorporate it for everyone.

The Goods

Here is what you really want:

What do you think? Share your comments below, we’d love to hear from you!

Leave a CommentSubmit

Your email address will not be published. Required fields are marked *