Skip to content

Commit f7bff95

Browse files
bradfrostbmuenzenmeyer
bradfrost
authored and
bmuenzenmeyer
committed
Homepage design WIP
1 parent 7269346 commit f7bff95

File tree

13 files changed

+306
-261
lines changed

13 files changed

+306
-261
lines changed

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
<div class="c-hero">
2-
<div class="l-container">
3-
<h1 class="c-hero__title">{{heroTitle}}</h1>
2+
<div class="c-hero__inner l-container">
3+
<div class="c-hero__body">
4+
<h1 data-text="Create atomic design systems with Pattern Lab" class="c-hero__title">Create atomic design systems with Pattern Lab</h1>
45

5-
<div class="c-hero__footer">
6-
6+
<p class="c-hero__description">
7+
Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.
8+
</p>
9+
10+
<p class="c-hero__instructions">
11+
Run the following command in your terminal and <a href="/docs/installing-pattern-lab/">read the installation guide</a> to get started:
12+
</p>
13+
<pre class="c-hero__code"><code>npm create pattern-lab</code></pre>
714
</div>
815
</div>
916
</div>

‎packages/docs/src/_includes/components/page-header.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<p class="c-page-header__kicker">{{ introKicker }}</p>
55
{% endif %}
66

7-
<h1 class="c-page-header__title">{{ introHeading }}</h1>
7+
<h1 class="c-page-header__title" data-text="{{ introHeading }}">{{ introHeading }}</h1>
88

99
{% if introDescription %}
1010
<p class="c-page-header__desc">{{ introDescription }}</p>

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

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,43 @@
11
{% extends 'layouts/base.njk' %}
22
{% set pageType = 'Homepage' %}
33

4-
{# Intro content #}
5-
{% set heroTitle = title %}
6-
74
{% block content %}
85

96
{% include "components/hero.njk" %}
10-
<div class="c-tile">
11-
<div class="l-container">
12-
<h2 class="c-tile__title">
13-
<a class="c-tile__link" href="/docs/installing-pattern-lab/">Get started</a>
14-
</h2>
15-
<div class="c-tile__description">This is a description</div>
16-
<pre><code>npm create pattern-lab</code></pre>
17-
</div>
18-
</div>
19-
<ul class="c-tile-list">
20-
<li class="c-tile-list__item"><div class="c-tile c-tile--gray-13">
21-
<div class="l-container">
22-
<h2 class="c-tile__title">
23-
<a class="c-tile__link" href="/docs/installing-pattern-lab">Read the docs</a>
24-
</h2>
25-
<div class="c-tile__description">This is a description</div>
26-
</div>
27-
</div>
28-
<li class="c-tile-list__item">
29-
<div class="c-tile c-tile--gray-27">
30-
<div class="l-container">
7+
8+
<div class="l-container">
9+
<ul class="c-tile-list">
10+
<li class="c-tile-list__item"><div class="c-tile c-tile--gray-13">
11+
<div class="l-container">
3112
<h2 class="c-tile__title">
32-
<a class="c-tile__link" href="/demos">Demos</a>
13+
<a class="c-tile__link" href="/docs/installing-pattern-lab">Read the docs</a>
3314
</h2>
34-
<div class="c-tile__description">This is a description</div>
15+
<div class="c-tile__description">Learn how to get up and running with Pattern Lab, work with patterns and dynamic data, and more</div>
3516
</div>
3617
</div>
37-
</li>
38-
<li class="c-tile-list__item">
39-
<div class="c-tile c-tile--gray-50">
40-
<div class="l-container">
41-
<h2 class="c-tile__title">
42-
<a class="c-tile__link" href="/resources">Resources</a>
43-
</h2>
44-
<div class="c-tile__description">This is a description</div>
18+
<li class="c-tile-list__item">
19+
<div class="c-tile c-tile--gray-27">
20+
<div class="l-container">
21+
<h2 class="c-tile__title">
22+
<a class="c-tile__link" href="/demos">Demos</a>
23+
</h2>
24+
<div class="c-tile__description">Gallery of Pattern Lab starterkits and in the wild</div>
25+
</div>
26+
</div>
27+
</li>
28+
<li class="c-tile-list__item">
29+
<div class="c-tile c-tile--gray-50">
30+
<div class="l-container">
31+
<h2 class="c-tile__title">
32+
<a class="c-tile__link" href="/resources">Resources</a>
33+
</h2>
34+
<div class="c-tile__description">This is a description</div>
4535

36+
</div>
4637
</div>
47-
</div>
48-
</li>
49-
</ul>
38+
</li>
39+
</ul>
40+
</div>
5041

5142
<div class="l-container">
5243

‎packages/docs/src/index.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,16 @@ archiveButtonText: See all posts
66
socialImage: ''
77
---
88

9-
**Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.**
10-
119
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!
1210

13-
- **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!
14-
- **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.
15-
- **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.
16-
- **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.
17-
- **Pattern Documentation** - Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.
18-
- **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.
19-
- **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.
20-
- **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.
21-
- **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.
22-
- **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!
23-
- **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.
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/abstracts/_mixins.scss

Lines changed: 60 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,79 +7,111 @@
77
* 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
88
*/
99
@mixin typographyBody() {
10-
font-family: $font-primary;
11-
font-size: $font-size-med-2;
12-
font-weight: 500;
13-
line-height: 1.6;
14-
-webkit-text-size-adjust: 100%; /* 1 */
10+
font-family: $font-primary;
11+
font-size: $font-size-med-2;
12+
font-weight: 500;
13+
line-height: 1.6;
14+
-webkit-text-size-adjust: 100%; /* 1 */
1515
}
1616

1717
/**
1818
* XL Type Styles
1919
*/
2020
@mixin typographyBodyLarge() {
21-
font-size: $font-size-med-2;
22-
line-height: $line-height-large;
21+
font-size: $font-size-med-2;
22+
line-height: $line-height-large;
2323
}
2424

2525
/**
2626
* XL Heading Styles
2727
*/
2828
@mixin typographyHeadingXl() {
29-
font-weight: $font-weight-bold;
30-
font-size: $font-size-large-2;
31-
line-height: $line-height-med-2;
29+
font-weight: $font-weight-bold;
30+
font-size: $font-size-large-2;
31+
line-height: $line-height-med-2;
3232

33-
@media all and (min-width: $bp-med) {
34-
font-size: $font-size-xl;
35-
}
33+
@media all and (min-width: $bp-med) {
34+
font-size: $font-size-xl;
35+
}
3636
}
3737

3838
/**
3939
* Large Heading Styles
4040
*/
4141
@mixin typographyHeadingLarge() {
42-
font-size: $font-size-large;
43-
font-weight: 700;
44-
line-height: 1.6;
42+
font-size: $font-size-large;
43+
font-weight: 700;
44+
line-height: 1.6;
4545
}
4646

4747
/**
4848
* Medium 2 Heading Styles
4949
*/
5050
@mixin typographyHeadingMed2() {
51-
font-size: $font-size-med-2;
52-
font-weight: 700;
53-
line-height: 1.2;
51+
font-size: $font-size-med-2;
52+
font-weight: 700;
53+
line-height: 1.2;
5454
}
5555

5656
/**
5757
* Medium Heading Styles
5858
*/
5959
@mixin typographyHeadingMed() {
60-
font-size: $font-size-med;
61-
font-weight: 700;
62-
line-height: 1.2;
60+
font-size: $font-size-med;
61+
font-weight: 700;
62+
line-height: 1.2;
6363
}
6464

6565
/*------------------------------------*\
6666
#FOCUS
6767
\*------------------------------------*/
6868

6969
@mixin focus() {
70-
outline: 2px dotted $color-black;
71-
outline-offset: 4px;
70+
outline: 2px dotted $color-black;
71+
outline-offset: 4px;
7272
}
7373

7474
@mixin focusInverted() {
75-
outline: 1px dotted $color-white;
76-
outline-offset: 4px;
75+
outline: 1px dotted $color-white;
76+
outline-offset: 4px;
7777
}
7878

7979
/*------------------------------------*\
8080
    #DECORATIVE
8181
\*------------------------------------*/
8282

83-
@mixin highlightEffect() {
84-
box-shadow: 20px 0 0 $color-white, -20px 0 0 $color-white;
83+
@mixin textShadowEffect() {
84+
position: relative;
85+
z-index: 1;
86+
87+
&:after {
88+
position: absolute;
89+
left: 4px;
90+
top: 4px;
91+
z-index: 0;
92+
content: attr(data-text);
93+
94+
background-image: radial-gradient(
95+
$color-brand-purple 0%,
96+
$color-brand-purple 60%,
97+
transparent 60%
98+
);
99+
background-size: 4px 4px;
100+
-webkit-background-clip: text;
101+
-webkit-text-fill-color: transparent;
102+
z-index: -5;
103+
display: block;
104+
text-shadow: none;
105+
}
106+
}
107+
108+
@mixin boxShadowEffect($color: 'green') {
109+
@if $color == 'green' {
110+
box-shadow: 6px 6px 0 $color-brand-green, 12px 12px 0 $color-brand-green-transparent;
111+
}
112+
@elseif $color == 'orange' {
113+
box-shadow: 6px 6px 0 $color-brand-orange, 12px 12px 0 $color-brand-orange-transparent;
114+
} @else {
115+
box-shadow: 6px 6px 0 $color-brand-purple, 12px 12px 0 $color-brand-purple-transparent;
116+
}
85117
}

‎packages/docs/src/scss/abstracts/_variables.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,13 @@
4141
* Brand Colors
4242
* 1) Brand=specific colors
4343
*/
44+
$color-brand-purple: #aa85ba;
45+
$color-brand-purple-dark: #22062e;
46+
$color-brand-purple-transparent: rgba(220, 193, 232, 0.2);
4447
$color-brand-green: #7ec699;
4548
$color-brand-green-transparent: rgba(8, 206, 55, 0.05);
46-
$color-brand-purple-transparent: rgba(220, 193, 232, 0.2);
49+
$color-brand-orange: #eeb31b;
50+
$color-brand-orange-transparent: rgba(238, 179, 27, 0.1);
4751

4852
/**
4953
* Neutral Colors
@@ -94,7 +98,7 @@ $font-size-med: 1rem;
9498
$font-size-med-2: 1.2rem;
9599
$font-size-large: 2rem;
96100
$font-size-large-2: 2.6rem;
97-
$font-size-xl: 3.8rem;
101+
$font-size-xl: 5rem;
98102

99103
$font-weight-bold: 700;
100104

@@ -132,6 +136,7 @@ $l-sidebar-width: 18.75rem;
132136
$spacing: 1rem;
133137
$spacing-small: round(0.5 * $spacing);
134138
$spacing-large: round(2 * $spacing);
139+
$spacing-xl: round(4 * $spacing);
135140

136141
/*------------------------------------*\
137142
#BORDERS
@@ -175,3 +180,11 @@ $bp-small: 28em;
175180
$bp-med: 47em;
176181
$bp-large: 60em;
177182
$bp-xl: 70em;
183+
184+
:root {
185+
--scrollbar-track-color: transparent;
186+
--scrollbar-color: rgba(0, 0, 0, 0.2);
187+
188+
--scrollbar-size: 0.375rem;
189+
--scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
190+
}

‎packages/docs/src/scss/base/_body.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* This is used to achieve a sticky footer
99
*/
1010
html {
11-
min-height: 100vh; /* 1 */
11+
min-height: 100vh; /* 1 */
1212
}
1313

1414
/**
@@ -18,11 +18,11 @@ html {
1818
* 2) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
1919
*/
2020
body {
21-
display: flex; /* 1 */
22-
flex-direction: column; /* 1 */
23-
min-height: 100vh; /* 1 */
24-
@include typographyBody;
25-
-webkit-text-size-adjust: 100%; /* 2 */
26-
background-color: $color-gray-02;
27-
color: $color-gray-88;
21+
display: flex; /* 1 */
22+
flex-direction: column; /* 1 */
23+
min-height: 100vh; /* 1 */
24+
@include typographyBody;
25+
-webkit-text-size-adjust: 100%; /* 2 */
26+
background-color: $color-white;
27+
color: $color-gray-88;
2828
}

0 commit comments

Comments
 (0)