Skip to content

Commit f2f5711

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

11 files changed

Lines changed: 206 additions & 139 deletions

File tree

‎packages/docs/src/_includes/components/tree-nav.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
{% for subnav in item.subnav %}
1616

1717
<li class="c-tree-nav__subnav-item">
18-
<a href="#" class="c-tree-nav__subnav-link">
18+
<span class="c-tree-nav__subnav-title">
1919
{{ subnav.label }}
20-
</a><!--end c-tree-nav__subnav-link-->
20+
</span><!--end c-tree-nav__subnav-link-->
2121
{% set subnavCategory = subnav.category %}
2222
{% include "components/tree-subnav.njk" %}
2323
</li><!--end c-tree-nav__subnav-item-->

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

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,40 @@
77

88
<div class="l-container">
99
<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">
12-
<h2 class="c-tile__title">
13-
<a class="c-tile__link" href="/docs/installing-pattern-lab">Read the docs</a>
14-
</h2>
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>
16-
</div>
17-
</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>
10+
<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" />
2519
</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>
35-
20+
</li>
21+
<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">Gallery of Pattern Lab starterkits and in the wild</div>
28+
</div>
29+
<div class="c-tile__shadow" />
30+
</div>
31+
</li>
32+
<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">This is a description</div>
39+
</div>
40+
<div class="c-tile__shadow" />
3641
</div>
37-
</div>
38-
</li>
39-
</ul>
42+
</li>
43+
</ul>
4044
</div>
4145

4246
<div class="l-container">
@@ -45,6 +49,5 @@
4549
{{ content | safe }}
4650
</div>
4751
</div>
48-
</div>
4952

5053
{% endblock %}

‎packages/docs/src/docs/installation.md‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,38 @@ eleventyNavigation:
99
order: 0
1010
---
1111

12-
## Step 1: Install Requirements
12+
## Step 1: Install requirements
1313

1414
Make sure you have [Node.js](https://nodejs.org/en/download/) installed before setting up Pattern Lab.
1515

16-
## Step 2: Install Pattern Lab
16+
## Step 2: Run the create Pattern Lab command
1717

1818
Open [the command line](https://tutorial.djangogirls.org/en/intro_to_command_line/) and run the following command:
1919

2020
```
2121
npm create pattern-lab
2222
```
2323

24-
!["npm create pattern lab"](/images/1createpl.png)
25-
2624
This will bring up an installation menu that presents the following steps:
2725

28-
1. `Please specify a directory for your Pattern Lab project.` - Choose the directory where you want to install Pattern Lab. The default location is the current directory.
26+
## Step 3: Choose a directory
27+
28+
**`Please specify a directory for your Pattern Lab project.`** Choose the directory where you want to install Pattern Lab. The default location is the current directory.
2929

3030
!["choose directory"](/images/2choosedirectory.png)
3131

32-
2. `Which edition do you want to use (defaults to edition-node)?` - Choose the Pattern Lab edition that you want to install. The options are:
32+
## Step 4: Choose templating language
33+
34+
**`What templating language do you want to use with Pattern Lab?`** Choose the Pattern Lab edition that you want to install. The options are:
3335

3436
!["choose edition"](/images/3chooseedition.png)
3537

3638
- `edition-node (handlebars engine)`
3739
- `edition-node-gulp (legacy)`
3840

39-
3. `Which starterkit do you want to use?` - Choose the <a href="/docs/advanced-starterkits.html">Starterkit</a> you want to begin your project with. Starterkits define the initial components and assets that are included in the initial project. Start from scratch, start from a full demo, or a lightweight boilerplate.
41+
## Step 5: Choose initial patterns
42+
43+
`What initial patterns do you want included in your project?` - Choose the <a href="/docs/advanced-starterkits.html">Starterkit</a> you want to begin your project with. Starterkits define the initial components and assets that are included in the initial project. Start from scratch, start from a full demo, or a lightweight boilerplate.
4044

4145
!["choose edition"](/images/4choosestarterkit.png)
4246

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

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,63 @@
107107

108108
@mixin boxShadowEffect($color: 'green') {
109109
@if $color == 'green' {
110-
box-shadow: 6px 6px 0 $color-brand-green, 12px 12px 0 $color-brand-green-transparent;
110+
box-shadow: 6px 6px 0 $color-brand-green, 12px 12px 0 $color-brand-green-light;
111+
} @else if $color == 'orange' {
112+
box-shadow: 6px 6px 0 $color-brand-orange, 12px 12px 0 $color-brand-orange-light;
113+
} @else {
114+
box-shadow: 6px 6px 0 $color-brand-purple, 12px 12px 0 $color-brand-purple-light;
111115
}
112-
@elseif $color == 'orange' {
113-
box-shadow: 6px 6px 0 $color-brand-orange, 12px 12px 0 $color-brand-orange-transparent;
116+
}
117+
118+
@mixin stripedBoxShadow($color: 'green') {
119+
@if $color == 'green' {
120+
background-image: repeating-linear-gradient(
121+
45deg,
122+
$color-brand-green,
123+
$color-brand-green 1px,
124+
transparent 1px,
125+
transparent 4px
126+
);
127+
} @else if $color == 'orange' {
128+
background-image: repeating-linear-gradient(
129+
45deg,
130+
$color-brand-orange,
131+
$color-brand-orange 1px,
132+
transparent 1px,
133+
transparent 4px
134+
);
114135
} @else {
115-
box-shadow: 6px 6px 0 $color-brand-purple, 12px 12px 0 $color-brand-purple-transparent;
136+
background-image: repeating-linear-gradient(
137+
45deg,
138+
$color-brand-purple,
139+
$color-brand-purple 1px,
140+
transparent 1px,
141+
transparent 4px
142+
);
143+
}
144+
}
145+
146+
@mixin hideScrollbar() {
147+
-webkit-overflow-scrolling: touch;
148+
-ms-overflow-style: -ms-autohiding-scrollbar;
149+
scrollbar-width: none;
150+
scrollbar-color: transparent;
151+
152+
&::-webkit-scrollbar {
153+
height: var(--scrollbar-size);
154+
width: var(--scrollbar-size);
155+
}
156+
&::-webkit-scrollbar-track {
157+
background-color: var(--scrollbar-track-color);
158+
}
159+
&::-webkit-scrollbar-thumb {
160+
background-color: var(--scrollbar-color);
161+
/* Add :hover, :active as needed */
162+
}
163+
&::-webkit-scrollbar-thumb:vertical {
164+
min-height: var(--scrollbar-minlength);
165+
}
166+
&::-webkit-scrollbar-thumb:horizontal {
167+
min-width: var(--scrollbar-minlength);
116168
}
117169
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,12 @@
4343
*/
4444
$color-brand-purple: #aa85ba;
4545
$color-brand-purple-dark: #22062e;
46-
$color-brand-purple-transparent: rgba(220, 193, 232, 0.2);
46+
$color-brand-purple-light: #f9f5fc;
4747
$color-brand-green: #7ec699;
48-
$color-brand-green-transparent: rgba(8, 206, 55, 0.05);
48+
$color-brand-green-dark: #376548;
49+
$color-brand-green-light: #f4fdf6;
4950
$color-brand-orange: #eeb31b;
50-
$color-brand-orange-transparent: rgba(238, 179, 27, 0.1);
51+
$color-brand-orange-light: #fef8ea;
5152

5253
/**
5354
* Neutral Colors

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

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ hr {
4848
*/
4949
code {
5050
display: inline;
51-
background: $color-brand-purple-transparent;
51+
background: $color-brand-purple-light;
5252
padding: 0.2rem;
5353
line-height: 1.2;
5454
}
@@ -62,28 +62,7 @@ pre {
6262
@include boxShadowEffect('green');
6363
color: $color-white;
6464
position: relative;
65-
-webkit-overflow-scrolling: touch;
66-
-ms-overflow-style: -ms-autohiding-scrollbar;
67-
scrollbar-width: none;
68-
scrollbar-color: transparent;
69-
70-
&::-webkit-scrollbar {
71-
height: var(--scrollbar-size);
72-
width: var(--scrollbar-size);
73-
}
74-
&::-webkit-scrollbar-track {
75-
background-color: var(--scrollbar-track-color);
76-
}
77-
&::-webkit-scrollbar-thumb {
78-
background-color: var(--scrollbar-color);
79-
/* Add :hover, :active as needed */
80-
}
81-
&::-webkit-scrollbar-thumb:vertical {
82-
min-height: var(--scrollbar-minlength);
83-
}
84-
&::-webkit-scrollbar-thumb:horizontal {
85-
min-width: var(--scrollbar-minlength);
86-
}
65+
@include hideScrollbar();
8766

8867
/**
8968
* Remove border from code within preformatted text block

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

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,82 +6,82 @@
66
* Global block at the top of each page containing the navigation, logo, and other potential contents
77
*/
88
.c-header {
9-
position: relative;
10-
background: $color-gray-88;
11-
color: $color-gray-50;
12-
padding: $spacing;
9+
position: relative;
10+
background: $color-gray-88;
11+
color: $color-gray-50;
12+
padding: $spacing;
13+
@include hideScrollbar();
1314

14-
@media all and (min-width: $bp-large) {
15-
padding: $spacing-large;
16-
min-height: 100vh;
17-
flex-direction: column;
18-
position: fixed;
19-
top: 0;
20-
left: 0;
21-
height: 100vh;
22-
overflow: auto;
23-
width: $l-sidebar-width; //Because fixed position
24-
}
15+
@media all and (min-width: $bp-large) {
16+
padding: $spacing-large;
17+
min-height: 100vh;
18+
flex-direction: column;
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
height: 100vh;
23+
overflow: auto;
24+
width: $l-sidebar-width; //Because fixed position
25+
}
2526
}
2627

2728
/**
2829
* Header inner
2930
*/
3031
.c-header__inner {
31-
display: flex;
32-
justify-content: space-between;
33-
align-items: center;
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
3435

35-
@media all and (min-width: $bp-large) {
36-
justify-content: flex-start;
37-
align-items: flex-start;
38-
flex-direction: column;
39-
min-height: 100vh;
40-
}
36+
@media all and (min-width: $bp-large) {
37+
justify-content: flex-start;
38+
align-items: flex-start;
39+
flex-direction: column;
40+
}
4141
}
4242

4343
/**
4444
* Header navigation button
4545
* 1) Button used to toggle the navigation on/off on small screens
4646
*/
4747
.c-header__nav-btn {
48-
margin-left: auto;
48+
margin-left: auto;
4949

50-
@media all and (min-width: $bp-large) {
51-
display: none;
52-
}
50+
@media all and (min-width: $bp-large) {
51+
display: none;
52+
}
5353
}
5454

5555
/**
5656
* Header navigation conntainer
5757
* 1) Contains the primary navigation and other possible patterns
5858
*/
5959
.c-header__nav-container {
60-
display: none;
60+
display: none;
6161

62-
@media all and (min-width: $bp-large) {
63-
display: block;
64-
}
62+
@media all and (min-width: $bp-large) {
63+
display: block;
64+
}
6565
}
6666

6767
/**
6868
* Active header nav container
6969
*/
7070
.c-header__nav-container.is-active {
71-
display: block;
72-
position: absolute;
73-
background: $color-gray-88;
74-
top: 100%;
75-
left: 0;
76-
width: 100%;
77-
z-index: 5;
78-
padding: $spacing;
71+
display: block;
72+
position: absolute;
73+
background: $color-gray-88;
74+
top: 100%;
75+
left: 0;
76+
width: 100%;
77+
z-index: 5;
78+
padding: $spacing;
7979

80-
@media all and (min-width: $bp-large) {
81-
display: block;
82-
position: static;
83-
padding: 0;
84-
margin-left: auto;
85-
width: inherit;
86-
}
80+
@media all and (min-width: $bp-large) {
81+
display: block;
82+
position: static;
83+
padding: 0;
84+
margin-left: auto;
85+
width: inherit;
86+
}
8787
}

0 commit comments

Comments
 (0)