Merge branch 'master' of github.com:bradfrost/pl-website-eleventy

Author: bradfrost

packages/docs/.prettierrc

@@ -1,5 +1,6 @@
 {
     "printWidth": 90,
+    "useTabs": true,
     "tabWidth": 4,
     "singleQuote": true,
     "bracketSpacing": false

packages/docs/package-lock.json

@@ -1,4 +1,3 @@
-
 {
   "name": "patternlab-website",
   "version": "0.1.0",

packages/docs/package.json

@@ -1,7 +1,9 @@
 <div class="c-hero">
-    <h1 class="c-hero__title">{{heroTitle}}</h1>
+    <div class="l-container">
+        <h1 class="c-hero__title">{{heroTitle}}</h1>
 
-    <div class="c-hero__footer">
-        <pre><code>npm create pattern-lab</code></pre>
+        <div class="c-hero__footer">
+            
+        </div>
     </div>
 </div>

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

@@ -9,9 +9,6 @@
                 {{ item.label }}
                 {% set className = "c-tree-nav__icon" %}
                 {% include "components/icon-chevron-down.njk" %}
-           
-                
-                
             </button>
 
             <ul class="c-tree-nav__subnav">

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

@@ -5,13 +5,55 @@
 {% set heroTitle = title %}
 
 {% block content %}
-    
+
     {% include "components/hero.njk" %}
+     <div class="c-tile">
+        <div class="l-container">
+            <h2 class="c-tile__title">
+                <a class="c-tile__link" href="/docs/installing-pattern-lab/">Get started</a>
+            </h2>
+            <div class="c-tile__description">This is a description</div>
+            <pre><code>npm create pattern-lab</code></pre>
+        </div>
+    </div>
+    <ul class="c-tile-list">
+    <li class="c-tile-list__item"><div class="c-tile c-tile--gray-13">
+        <div class="l-container">
+            <h2 class="c-tile__title">
+                <a class="c-tile__link" href="/docs/installing-pattern-lab">Read the docs</a>
+            </h2>
+            <div class="c-tile__description">This is a description</div>
+        </div>
+    </div>
+    <li class="c-tile-list__item">
+        <div class="c-tile c-tile--gray-27">
+            <div class="l-container"> 
+                <h2 class="c-tile__title">
+                    <a class="c-tile__link" href="/demos">Demos</a>
+                </h2>
+                <div class="c-tile__description">This is a description</div>
+            </div>
+        </div>
+    </li>
+    <li class="c-tile-list__item">
+        <div class="c-tile c-tile--gray-50">
+            <div class="l-container">
+                <h2 class="c-tile__title">
+                    <a class="c-tile__link" href="/resources">Resources</a>
+                </h2>
+                <div class="c-tile__description">This is a description</div>
+
+            </div>
+        </div>
+    </li>
+</ul>
 
     <div class="l-container">
+   
       <div class="c-text-passage">
         {{ content | safe }}
       </div>
     </div>
+     </div>
 
 {% endblock %}

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

@@ -6,22 +6,18 @@ archiveButtonText: See all posts
 socialImage: ''
 ---
 
-<video autoplay="" loop="" playsinline="" muted="">
-    <source src="https://patternlab.io/assets/atomic-design.mp4" type="video/mp4">
-</video>
-
 **Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.**
 
 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!
 
-- **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!
-- **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.
-- **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.
-- **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.
-- **Pattern Documentation** - Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.
-- **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.
-- **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.
-- **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.
-- **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.
-- **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!
-- **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.
+-   **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!
+-   **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.
+-   **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.
+-   **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.
+-   **Pattern Documentation** - Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.
+-   **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.
+-   **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.
+-   **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.
+-   **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.
+-   **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!
+-   **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/index.md

@@ -3,24 +3,37 @@
 \*------------------------------------*/
 
 .c-hero {
-  padding: 2rem;
-  background: url(https://patternlab.io/assets/icon-atom.svg);
-  height: 70vh;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+	background: $color-gray-50;
+	color: $color-white;
+	min-height: 40vh;
+	padding: 2rem 0;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	@media all and (min-width: $bp-large) {
+		min-height: 60vh;
+	}
 }
 
 .c-hero__title {
-  @include highlightEffect();
+	display: inline;
 }
 
 .c-hero__footer {
-  position: absolute;
-  bottom: -55px;
-  left: 50%;
-  width: 320px;
-  margin-left: -160px;
+	position: absolute;
+	bottom: -55px;
+	left: 50%;
+	width: 320px;
+	margin-left: -160px;
+}
+
+.c-hero__icon {
+	display: inline-block;
+	height: 3rem;
+	width: 3rem;
+	margin-right: 2rem;
+	animation: rotate 10s linear infinite;
 }

packages/docs/src/scss/components/_hero.scss

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #TILE
+\*------------------------------------*/
+
+.c-tile-list {
+	margin-bottom: 2rem;
+
+	@media all and (min-width: $bp-xl) {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.c-tile-list__item:nth-child(1) {
+	@media all and (min-width: $bp-xl) {
+		grid-row: span 3;
+	}
+}
+
+.c-tile-list__item:nth-child(2) {
+	@media all and (min-width: $bp-xl) {
+		grid-column: 2/3;
+	}
+}
+.c-tile-list__item:nth-child(3) {
+	@media all and (min-width: $bp-xl) {
+		grid-row: 2;
+		grid-column: 2/3;
+	}
+}