Skip to content

Commit 75ce2e5

Browse files
bradfrostbmuenzenmeyer
bradfrost
authored and
bmuenzenmeyer
committed
Homepage design
1 parent 6b0a655 commit 75ce2e5

File tree

8 files changed

+116
-51
lines changed

8 files changed

+116
-51
lines changed

‎packages/docs/src/_includes/components/stacked-block.njk

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="c-stacked-block {{ styleModifier }}">
2+
<h3 class="c-stacked-block__title">
3+
{{ title }}
4+
</h3>
5+
<p class="c-stacked-block__description">{{ description }}</p>
6+
</div>

‎packages/docs/src/_includes/components/tile.njk

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="c-tile {{ styleModifier }}">
2+
<div class="c-tile__body">
3+
<h2 class="c-tile__title">
4+
<a class="c-tile__link" href="{{ link }}">{{ title }}</a>
5+
</h2>
6+
<div class="c-tile__description">{{ description | safe }}</div>
7+
</div>
8+
<div class="c-tile__shadow" />
9+
</div>

‎packages/docs/src/_includes/layouts/home.njk

Lines changed: 71 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,46 +8,86 @@
88
<div class="l-container">
99
<ul class="c-tile-list">
1010
<li class="c-tile-list__item">
11-
<div class="c-tile c-tile--green">
12-
<div class="c-tile__body">
13-
<h2 class="c-tile__title">
14-
<a class="c-tile__link" href="/docs/installing-pattern-lab">Read the docs</a>
15-
</h2>
16-
<div class="c-tile__description">Learn how to get up and running with Pattern Lab, work with patterns, design with dynamic data, and use Pattern Lab's advanced features.</div>
17-
</div>
18-
<div class="c-tile__shadow" />
19-
</div>
11+
{% set styleModifier = 'c-tile--green' %}
12+
{% set title = 'Read the docs' %}
13+
{% set link = '/docs/installing-pattern-lab' %}
14+
{% set description = "Learn how to get up and running with Pattern Lab, work with patterns, design with dynamic data, and use Pattern Lab's advanced features." %}
15+
{% include "components/tile.njk" %}
2016
</li>
2117
<li class="c-tile-list__item">
22-
<div class="c-tile c-tile--orange">
23-
<div class="c-tile__body">
24-
<h2 class="c-tile__title">
25-
<a class="c-tile__link" href="/demos">Demos</a>
26-
</h2>
27-
<div class="c-tile__description">Demos of pattern starterkits for your project as well as a gallery of Pattern Lab projects in the wild</div>
28-
</div>
29-
<div class="c-tile__shadow" />
30-
</div>
18+
{% set styleModifier = 'c-tile--orange' %}
19+
{% set title = 'Demos' %}
20+
{% set link = '/demos' %}
21+
{% set description = "Demos of pattern starterkits for your project as well as a gallery of Pattern Lab projects in the wild" %}
22+
{% include "components/tile.njk" %}
3123
</li>
3224
<li class="c-tile-list__item">
33-
<div class="c-tile c-tile--purple">
34-
<div class="c-tile__body">
35-
<h2 class="c-tile__title">
36-
<a class="c-tile__link" href="/resources">Resources</a>
37-
</h2>
38-
<div class="c-tile__description">Links about Pattern Lab, design systems, and style guides</div>
39-
</div>
40-
<div class="c-tile__shadow" />
41-
</div>
25+
{% set styleModifier = 'c-tile--purple' %}
26+
{% set title = 'Resources' %}
27+
{% set link = '/resources' %}
28+
{% set description = "Links to articles and resources around Pattern Lab and design systems" %}
29+
{% include "components/tile.njk" %}
4230
</li>
4331
</ul>
4432
</div>
4533

4634
<div class="l-container">
47-
48-
<div class="c-text-passage">
49-
{{ content | safe }}
50-
</div>
35+
<h2>Pattern Lab features</h2>
36+
<p>At its core, Pattern Lab is a Node-powered static site generator that stitches together UI components. But there's a whole lot more to it than that!</p>
37+
<ul class="c-block-grid">
38+
<li class="c-block-grid__item">
39+
{% set title="Nested Patterns" %}
40+
{% set description="Include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern and immediately see those changes reflected anywhere it is included." %}
41+
{% include "components/stacked-block.njk" %}
42+
</li>
43+
<li class="c-block-grid__item">
44+
{% set title="Design With Dynamic Data" %}
45+
{% set description="Create living UI prototypes using dynamic data to ensure your components can handle the dynamic nature of your content." %}
46+
{% include "components/stacked-block.njk" %}
47+
</li>
48+
<li class="c-block-grid__item">
49+
{% set title="Tool Agnostic" %}
50+
{% set description="Pattern Lab doesn't impose any tools or libraries on you, which means you have full control over how author your project." %}
51+
{% include "components/stacked-block.njk" %}
52+
</li>
53+
<li class="c-block-grid__item">
54+
{% set title="Language Agnostic" %}
55+
{% set description="Use atomic design language, or don't! it's totally up to you how you name, structure, and organize your Pattern Lab project." %}
56+
{% include "components/stacked-block.njk" %}
57+
</li>
58+
<li class="c-block-grid__item">
59+
{% set title="Pattern Documentation" %}
60+
{% set description="Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively." %}
61+
{% include "components/stacked-block.njk" %}
62+
</li>
63+
<li class="c-block-grid__item">
64+
{% set title="Viewport Resizer Tools" %}
65+
{% set description="Pattern Lab includes viewport resizing tools to ensure your design system's components and pages are fully responsive." %}
66+
{% include "components/stacked-block.njk" %}
67+
</li>
68+
<li class="c-block-grid__item">
69+
{% set title="Pattern Lineage" %}
70+
{% set description="X-ray vision! Quickly view where patterns where components are used, speeding up design, development, and QA time." %}
71+
{% include "components/stacked-block.njk" %}
72+
</li>
73+
<li class="c-block-grid__item">
74+
{% set title="Pattern Starter Kits" %}
75+
{% set description="Start your Pattern Lab project with a blank slate, a few sample components, or a full-on demo project." %}
76+
{% include "components/stacked-block.njk" %}
77+
</li>
78+
<li class="c-block-grid__item">
79+
{% set title="Flexible and Extensible" %}
80+
{% set description="Pattern Lab supports Handlebars and Twig templating engines. Also you can or build a plugin to extend Pattern Lab's capabilities even further." %}
81+
{% include "components/stacked-block.njk" %}
82+
</li>
83+
</ul>
84+
85+
{% set styleModifier = 'c-tile--orange' %}
86+
{% set title = 'Open source and community driven' %}
87+
{% set link = '#' %}
88+
{% set description = "Pattern Lab is (and will always be) an open source project. Check out the project on <a href='https://github.com/pattern-lab/patternlab-node'>GitHub</a> and join the <a href='https://gitter.im/pattern-lab/home'>Pattern Lab Gitter community</a> for conversation and support." %}
89+
{% include "components/tile.njk" %}
90+
5191
</div>
5292

5393
{% endblock %}

‎packages/docs/src/index.md

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,4 @@
11
---
22
layout: home
33
title: Create atomic design systems with Pattern Lab
4-
postsHeading: Latest posts
5-
archiveButtonText: See all posts
6-
socialImage: ''
74
---
8-
9-
At its core, Pattern Lab is a static site generator (powered by either Node or PHP) that stitches together UI components. But there's a whole lot more to it than that!
10-
11-
- **Nested Patterns** - Pattern Lab lets you include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern, and see those changes reflected anywhere the pattern is included!
12-
- **Design With Dynamic Data** - Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components to ensure they can handle the dynamic nature of your content.
13-
- **Tool Agnostic** - Pattern Lab doesn't impose any tools or libraries on you, which means you can choose what's right for your project. Like Sass? Cool, go for it! Don't need it? That's fine too! jQuery? No jQuery? Totally up to you.
14-
- **Language Agnostic** - Atomic design is a helpful mental model, not rigid doctrine. You can rename pattern categories to whatever makes the most sense for your organization and team.
15-
- **Pattern Documentation** - Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.
16-
- **Viewport Resizer Tools** - Pattern Lab has device-agnostic viewport resizing tools to ensure your design system is fully responsive and embraces the intrinsic fluidity of the web.
17-
- **Annotations** - Lose the gigantic static PDFs and annotate your living, breathing UI from within Pattern Lab. Clients and colleagues can review annotations right within the browser.
18-
- **Pattern Lineage** - Speed up your design, development, and QA time by quickly seeing which patterns make up any given component, as well as seeing where each component is employed.
19-
- **Pattern Starter Kits** - Spin up Pattern Lab loaded with frameworks like Bootstrap, Foundation, or Material Design. Or of course start from scratch and build your own custom design system.
20-
- **Versatile** - Pattern Lab can be used for simple rapid prototyping or for developing production-level frontend code. Some teams have even modified it to power their live sites!
21-
- **Extensible** - Choose your own templating engine to better match your production environment. Also you can or build a plugin to extend Pattern Lab's capabilities even further.

‎packages/docs/src/scss/components/_block-grid.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.c-block-grid {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fill, 250px);
4+
grid-gap: $spacing-large;
5+
margin-bottom: $spacing-large;
6+
}
7+
8+
.c-stacked-block {
9+
// background: orange;
10+
}
11+
12+
.c-stacked-block__description {
13+
font-size: $font-size-med;
14+
}

‎packages/docs/src/scss/components/_stacked-block.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@
66
* Stacked block list item
77
*/
88
.c-stacked-block__title {
9-
line-height: 1.2;
9+
line-height: 1.2;
10+
margin-bottom: 0.25rem;
1011
}
1112

1213
/**
1314
* Stacked block list item
1415
*/
1516
.c-stacked-block__kicker {
16-
font-size: $font-size-sm-2;
17-
color: $color-gray-50;
17+
font-size: $font-size-sm-2;
18+
color: $color-gray-50;
1819
}

‎packages/docs/src/scss/components/_tile.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,14 @@
6363
text-decoration: underline;
6464
}
6565
}
66+
67+
.c-tile__description a {
68+
color: inherit;
69+
text-decoration: underline;
70+
71+
&:hover,
72+
&:focus {
73+
color: inherit;
74+
text-decoration: none;
75+
}
76+
}

‎packages/docs/src/scss/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
@import 'components/stacked-block';
5959
@import 'components/stacked-block-list';
6060
@import 'components/demo-list';
61+
@import 'components/block-grid';
6162

6263
/*------------------------------------*\
6364
#UTILITIES

0 commit comments

Comments
 (0)