-
Notifications
You must be signed in to change notification settings - Fork 2
/
getting-started.html
executable file
·51 lines (36 loc) · 2.75 KB
/
getting-started.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
---
layout: page
title: Getting Started
description:
---
## Welcome to the Adventist Living Pattern System
We are glad you found ALPS. Take a look around, and see what you think. There is lots to explore. You can find the code on [Github](https://github.com/adventistchurch/alps), check it out, [file issues](https://github.com/adventistchurch/alps/issues), and create pull requests. This code belongs to the Adventist church. It’s ours!
The Adventist Living Pattern System (ALPS) is a set of design patterns created by the Seventh-day Adventist Church for use around the world by Adventist churches, schools, and organizational units. The purpose of ALPS is to make it easy for our church to create good looking sites that promote the brand of the church, while allowing for individuality and customization of each site.
As you browse through the pages of this site, you will see examples of patterns for different types of pages. From [home pages](/templates/home) to [channel pages](/templates/channel-main), to [basic pages](/templates/basic-page), ALPS is designed to be beautiful, fast and flexible, while maintaining a consistent brand across the sites that use it.
Take a look for yourself!
## Include It in Your Project
Want to include ALPS in your project? The Adventist church is making the CSS and Javascript needed to build an ALPS site available via a public CDN. All you need to do to implement the latest styles is to link the files provides below and you will be up to date.
Here are the links you need to make it happen.
### Header
Include this code in the `<head>` of your page. This include the fonts, ALPS css, and the Javascript needed to start the page.
<div class="pattern-code">
<button class="c-btn pattern-code-copy-btn" data-clipboard-target="#pattern-code-0">Copy</button>
<pre class="highlight pattern-code-block">
<code class="language-html" id="pattern-code-0">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i|Noto+Serif:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.adventist.org/alps/3/latest/css/main.css" media="all">
<script src="//cdn.adventist.org/alps/3/latest/js/head-script.min.js" type="text/javascript"></script>
</code>
</pre>
</div>
### Footer
Include this code in the footer of your page, right before the closing `</body>` tag.
<div class="pattern-code">
<button class="c-btn pattern-code-copy-btn" data-clipboard-target="#pattern-code-1">Copy</button>
<pre class="highlight pattern-code-block">
<code class="language-html" id="pattern-code-1">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdn.adventist.org/alps/3/latest/js/script.min.js" type="text/javascript"></script>
</code>
</pre>
</div>