Initial commit

bradfrost · Sep 26, 2016 · 3243f45 · 3243f45
1 parent 905063e
commit 3243f45
Show file tree

Hide file tree

Showing 53 changed files with 589 additions and 376 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,5 +1,5 @@
 <footer role="contentinfo">
     &copy; 2016 Brad Frost
 </footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="/../js/link-headings.js"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -7,7 +7,9 @@
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
   <link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
-
+
+  <link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">
+
 <!-- Schema.org markup for Google+ -->
 <meta itemprop="name" content="{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}">
 <meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,3 +0,0 @@
-<header role="banner">
-    <a href="/" rel="home"><img src="/images/atomic-design.svg" alt="" /></a>
-</header>

diff --git a/_includes/pagination.html b/_includes/pagination.html
@@ -1,5 +1,4 @@
 <nav role="navigaiton" class="pagination">
-    <!-- <a href="#">Next Chapter</a>
-    <a href="#">Previous Chapter</a> -->
+    {% if page.nextChapter %}<a href="{{ page.nextChapter }}">Next Chapter</a>{% endif %}
     <a href="/table-of-contents/">Table of Contents</a>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,7 +2,6 @@
 <html>
   {% include head.html %}
   <body>
-    {% include header.html %}
     <main role="main">
         {{ content }}
         {% include banner.html %}

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -1,9 +1,20 @@
 ---
 layout: default
 ---
+
+<div class="page-header">
+    <div class="page-header-inner">
+        <!-- <a href="/" rel="home" class="atomic-icon-links"><img src="/images/atomic-design.svg" alt="" /></a> -->
+
+        {% if page.chapterTitle %}<h3 class="page-kicker">{{ page.chapterTitle }}</h3>{% endif %}
+        <h1 class="page-title">{{ page.title }}</h1>
+    </div>
+</div>
+
 <div class="text">
-    <h1>{% if page.chapterTitle %}<em>{{ page.chapterTitle }}</em>{% endif %} {{ page.title }}</h1>
+    {% if page.chapterTitle %}
     {% include note.html %}
+    {% endif %}
     {{ content }}
     {% include pagination.html %}
 </div>
diff --git a/_layouts/toc.html b/_layouts/toc.html
@@ -1,37 +1,50 @@
 ---
 layout: default
 ---
-<h1>{{ page.title }}</h1>
+
+<div class="page-header">
+    <div class="page-header-inner">
+        {% if page.chapterTitle %}<h3 class="page-kicker">{{ page.chapterTitle }}</h3>{% endif %}
+        <h1 class="page-title">{{ page.title }}</h1>
+    </div>
+</div>
+
+<div class="text">
+
 <nav role="navigation" class="toc">
     <ol class="toc-list">
         <li>
             <a href="/chapter-1">
-	            <span></span>
-                <h3>1. Designing Systems</h3>
+	            <span>1.</span>
+                <h3>Designing Systems</h3>
                 <p>Create design systems, not pages</p>
             </a>
         </li>
         <li>
             <a href="/chapter-2">
-                <h3>2. Atomic Design Methodology</h3>
+                <span>2.</span>
+                <h3> Atomic Design Methodology</h3>
                 <p>Atoms, Molecules, Organisms, Templates, and Pages</p>
             </a>
         </li>
         <li>
             <a href="/chapter-3">
-                <h3>3. Tools of the Trade</h3>
+                <span>3.</span>
+                <h3>Tools of the Trade</h3>
                 <p>Pattern Lab, style guides, and more</p>
             </a>
         </li>
         <li>
             <a href="/chapter-4">
-                <h3>4. The Atomic Workflow</h3>
+                <span>4.</span>
+                <h3>The Atomic Workflow</h3>
                 <p>People, process, and making it all happen</p>
             </a>
         </li>
         <li>
             <a href="/chapter-5">
-                <h3>5. Maintaining Design Systems</h3>
+                <span>5.</span>
+                <h3>Maintaining Design Systems</h3>
                 <p>Managing living design systems</p>
             </a>
         </li>
@@ -58,6 +71,6 @@ <h3>About the Author</h3>
     </ol>
 </nav>
 
-<div class="text">
 {{ content }}
+
 </div>
diff --git a/_site/author/index.html b/_site/author/index.html
@@ -10,7 +10,9 @@
 ">
 
   <link rel="stylesheet" href="/css/style.css">
-
+
+  <link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">
+
 <!-- Schema.org markup for Google+ -->
 <meta itemprop="name" content="About the Author | Atomic Design by Brad Frost">
 <meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">
@@ -35,22 +37,22 @@
 </head>
 
   <body>
-    <header role="banner">
-    <a href="/" rel="home"><img src="/images/atomic-design.svg" alt="" /></a>
-</header>
-
     <main role="main">
-        <div class="text">
-    <h1> About the Author</h1>
-    <div class="note">
-	<p>Greetings, reader! The following text is <a href="http://bradfrost.com/blog/post/atomic-design-book/">not final</a>, but it's close! <a href="https://twitter.com/fullcreammilk">Owen Gregory</a> has <a href="http://rewrites.atomicdesign.bradfrost.com/">proposed edits</a> to the <a href="http://v1.atomicdesign.bradfrost.com/chapter-1/">original text</a>, which have been reflected here. If you see something worth fixing, please <a href="https://github.com/bradfrost/atomic-design">submit an issue on Github</a>. Thanks and happy reading!</p>
+        <div class="page-header">
+    <div class="page-header-inner">
+        <!-- <a href="/" rel="home" class="atomic-icon-links"><img src="/images/atomic-design.svg" alt="" /></a> -->
+
+
+        <h1 class="page-title">About the Author</h1>
+    </div>
 </div>
 
+<div class="text">
 
+    <p>Brad Frost is web designer, speaker, consultant, writer, musician, and artist living in beautiful Pittsburgh, PA.</p>
 
     <nav role="navigaiton" class="pagination">
-    <!-- <a href="#">Next Chapter</a>
-    <a href="#">Previous Chapter</a> -->
+
     <a href="/table-of-contents/">Table of Contents</a>
 </nav>
 
@@ -69,7 +71,7 @@ <h3><a href="/" rel="home">Atomic Design</a></h3>
     <footer role="contentinfo">
     &copy; 2016 Brad Frost
 </footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="/../js/link-headings.js"></script>
 
   </body>

diff --git a/_site/chapter-1/index.html b/_site/chapter-1/index.html
@@ -10,7 +10,9 @@
 ">
 
   <link rel="stylesheet" href="/css/style.css">
-
+
+  <link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">
+
 <!-- Schema.org markup for Google+ -->
 <meta itemprop="name" content="Designing Systems | Atomic Design by Brad Frost">
 <meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">
@@ -35,17 +37,23 @@
 </head>
 
   <body>
-    <header role="banner">
-    <a href="/" rel="home"><img src="/images/atomic-design.svg" alt="" /></a>
-</header>
-
     <main role="main">
-        <div class="text">
-    <h1><em>Chapter 1</em> Designing Systems</h1>
+        <div class="page-header">
+    <div class="page-header-inner">
+        <!-- <a href="/" rel="home" class="atomic-icon-links"><img src="/images/atomic-design.svg" alt="" /></a> -->
+
+        <h3 class="page-kicker">Chapter 1</h3>
+        <h1 class="page-title">Designing Systems</h1>
+    </div>
+</div>
+
+<div class="text">
+
     <div class="note">
 	<p>Greetings, reader! The following text is <a href="http://bradfrost.com/blog/post/atomic-design-book/">not final</a>, but it's close! <a href="https://twitter.com/fullcreammilk">Owen Gregory</a> has <a href="http://rewrites.atomicdesign.bradfrost.com/">proposed edits</a> to the <a href="http://v1.atomicdesign.bradfrost.com/chapter-1/">original text</a>, which have been reflected here. If you see something worth fixing, please <a href="https://github.com/bradfrost/atomic-design">submit an issue on Github</a>. Thanks and happy reading!</p>
 </div>
 
+
     <p>A long, long time ago, there were these things called <em>books</em>. Remember them? These contraptions were heavy and bulky and made from the pulp of dead trees. Inside these books were things called <em>pages</em>. You turned them, and they cut your fingers.</p>
 
 <p>Awful things. I’m so glad these book things with their razor-sharp pages aren’t around anymore.</p>
@@ -259,7 +267,7 @@ <h3 id="trouble-in-framework-paradise">Trouble in framework paradise</h3>
 <p>Now that we’ve put frameworks through the wringer, it’s important to take a step back and recognize that conceptually these frameworks are very much on point. It’s an excellent idea to work with a design tool kit that promotes consistency and speeds up development time. While discussing the redesign of Microsoft’s homepage by Austin-based web shop Paravel, developer Dave Rupert stressed the importance of creating and delivering a design system to their client. Dave wonderfully articulated that it’s not necessarily about using Bootstrap for every client, but rather creating “tiny Bootstraps for every client.”</p>
 
 <blockquote>
-  <p>Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web. <cite><a href="http://daverupert.com/2013/04/responsive-deliverables/">Dave Rupert</a><cite></cite></cite></p>
+  <p>Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web. <cite><a href="http://daverupert.com/2013/04/responsive-deliverables/">Dave Rupert</a></cite></p>
 </blockquote>
 
 <p>It’s not just about using a design system, it’s about creating <em>your</em> system.</p>
@@ -492,8 +500,7 @@ <h2 id="in-search-of-an-interface-design-methodology">In search of an interface
 <p>Enter atomic design.</p>
 
     <nav role="navigaiton" class="pagination">
-    <!-- <a href="#">Next Chapter</a>
-    <a href="#">Previous Chapter</a> -->
+    <a href="/chapter-2/">Next Chapter</a>
     <a href="/table-of-contents/">Table of Contents</a>
 </nav>
 
@@ -512,7 +519,7 @@ <h3><a href="/" rel="home">Atomic Design</a></h3>
     <footer role="contentinfo">
     &copy; 2016 Brad Frost
 </footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="/../js/link-headings.js"></script>
 
   </body>

diff --git a/_site/chapter-2/index.html b/_site/chapter-2/index.html
@@ -10,7 +10,9 @@
 ">
 
   <link rel="stylesheet" href="/css/style.css">
-
+
+  <link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">
+
 <!-- Schema.org markup for Google+ -->
 <meta itemprop="name" content="Atomic Design Methodology | Atomic Design by Brad Frost">
 <meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">
@@ -35,17 +37,23 @@
 </head>
 
   <body>
-    <header role="banner">
-    <a href="/" rel="home"><img src="/images/atomic-design.svg" alt="" /></a>
-</header>
-
     <main role="main">
-        <div class="text">
-    <h1><em>Chapter 2</em> Atomic Design Methodology</h1>
+        <div class="page-header">
+    <div class="page-header-inner">
+        <!-- <a href="/" rel="home" class="atomic-icon-links"><img src="/images/atomic-design.svg" alt="" /></a> -->
+
+        <h3 class="page-kicker">Chapter 2</h3>
+        <h1 class="page-title">Atomic Design Methodology</h1>
+    </div>
+</div>
+
+<div class="text">
+
     <div class="note">
 	<p>Greetings, reader! The following text is <a href="http://bradfrost.com/blog/post/atomic-design-book/">not final</a>, but it's close! <a href="https://twitter.com/fullcreammilk">Owen Gregory</a> has <a href="http://rewrites.atomicdesign.bradfrost.com/">proposed edits</a> to the <a href="http://v1.atomicdesign.bradfrost.com/chapter-1/">original text</a>, which have been reflected here. If you see something worth fixing, please <a href="https://github.com/bradfrost/atomic-design">submit an issue on Github</a>. Thanks and happy reading!</p>
 </div>
 
+
     <p>My search for a methodology to craft interface design systems led me to look for inspiration in other fields and industries. Given this amazingly complex world we’ve created, it seemed only natural that other fields would have tackled similar problems we could learn from and appropriate. As it turns out, loads of other fields <a href="http://us5.campaign-archive1.com/?u=7e093c5cf4&amp;id=ead8a72012&amp;e=ecb25a3f93">such as industrial design and architecture</a> have developed smart modular systems for manufacturing immensely complex objects like airplanes, ships, and skyscrapers.</p>
 
 <p>But my original explorations kept creeping back to the natural world, which triggered memories of sitting at a rickety desk in my high school’s chemistry lab.</p>
@@ -394,8 +402,7 @@ <h2 id="atomic-design-in-theory-and-in-practice">Atomic design in theory and in
 <p>Atomic design is a helpful design and development methodology, but essentially it’s merely a mental model for constructing a UI. By now you may be wondering <em>how</em> you make atomic design happen. Well, fear not, dear reader, because the rest of the book focuses on tools and processes to make your atomic design dreams come true.</p>
 
     <nav role="navigaiton" class="pagination">
-    <!-- <a href="#">Next Chapter</a>
-    <a href="#">Previous Chapter</a> -->
+    <a href="/chapter-3/">Next Chapter</a>
     <a href="/table-of-contents/">Table of Contents</a>
 </nav>
 
@@ -414,7 +421,7 @@ <h3><a href="/" rel="home">Atomic Design</a></h3>
     <footer role="contentinfo">
     &copy; 2016 Brad Frost
 </footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="/../js/link-headings.js"></script>
 
   </body>

diff --git a/_site/chapter-3/index.html b/_site/chapter-3/index.html
@@ -10,7 +10,9 @@
 ">
 
   <link rel="stylesheet" href="/css/style.css">
-
+
+  <link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">
+
 <!-- Schema.org markup for Google+ -->
 <meta itemprop="name" content="Tools of the Trade | Atomic Design by Brad Frost">
 <meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">
@@ -35,17 +37,23 @@
 </head>
 
   <body>
-    <header role="banner">
-    <a href="/" rel="home"><img src="/images/atomic-design.svg" alt="" /></a>
-</header>
-
     <main role="main">
-        <div class="text">
-    <h1><em>Chapter 3</em> Tools of the Trade</h1>
+        <div class="page-header">
+    <div class="page-header-inner">
+        <!-- <a href="/" rel="home" class="atomic-icon-links"><img src="/images/atomic-design.svg" alt="" /></a> -->
+
+        <h3 class="page-kicker">Chapter 3</h3>
+        <h1 class="page-title">Tools of the Trade</h1>
+    </div>
+</div>
+
+<div class="text">
+
     <div class="note">
 	<p>Greetings, reader! The following text is <a href="http://bradfrost.com/blog/post/atomic-design-book/">not final</a>, but it's close! <a href="https://twitter.com/fullcreammilk">Owen Gregory</a> has <a href="http://rewrites.atomicdesign.bradfrost.com/">proposed edits</a> to the <a href="http://v1.atomicdesign.bradfrost.com/chapter-1/">original text</a>, which have been reflected here. If you see something worth fixing, please <a href="https://github.com/bradfrost/atomic-design">submit an issue on Github</a>. Thanks and happy reading!</p>
 </div>
 
+
     <p>In the previous chapter, I introduced the atomic design methodology for constructing user interfaces. I hope you’ll find atomic design to be a helpful mental model for constructing UI design systems, but now it’s time to climb down from the ivory tower and actually put atomic design into practice <em>in the real world</em>.</p>
 
 <p>The cornerstone of pattern-based design and development is the pattern library, which serves as a centralized hub of all the UI components that comprise your user interface. As we discussed in chapter 1, the benefits of pattern libraries are many:</p>
@@ -520,8 +528,7 @@ <h2 id="to-each-their-own">To each their own</h2>
 <p>At the end of the day, it’s not about the tools we use to create pattern libraries, but rather how we use them. Creating and maintaining an effective design system means dramatically changing your organization’s culture, processes, and workflows. If that sounds hard to you, it’s because it is. But fear not! The rest of the book will detail the entire process of creating and maintaining a successful design system to set your organization up for long-term success.</p>
 
     <nav role="navigaiton" class="pagination">
-    <!-- <a href="#">Next Chapter</a>
-    <a href="#">Previous Chapter</a> -->
+    <a href="/chapter-4/">Next Chapter</a>
     <a href="/table-of-contents/">Table of Contents</a>
 </nav>
 
@@ -540,7 +547,7 @@ <h3><a href="/" rel="home">Atomic Design</a></h3>
     <footer role="contentinfo">
     &copy; 2016 Brad Frost
 </footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="/../js/link-headings.js"></script>
 
   </body>