Beginning to scaffold Chapter 1

Author: bradfrost

_site/chapter-1/index.html

@@ -23,25 +23,49 @@ <h1>Chapter 1</h1>
     <div class="note">
 	<p>Greetings, reader! The following text is a <a href="http://bradfrost.com/blog/post/atomic-design-book/">work in progress</a> so be warned you will encounter incomplete thoughts, grammar errors, and more. 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>I know I know death to lorem ipsum and all that but this is literally placeholder content that will be replaced with the book’s content soon enough I promise OK so don’t get too hung up on the lorem ipsum.</p>
+    <p>Once upon a time in the not-so-distant past, there were these things called <em>books</em>. Remember them? These contraptions were heavy and bulky and made of dead trees. Inside these books were things called <em>pages</em>. You turned them, and they cut your fingers.</p>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Awful things. I’m so glad these book things aren’t around anymore.</p>
 
-<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Oh wait.</p>
 
-<h2 id="lorem-ipsum">Lorem Ipsum</h2>
+<h2 id="our-paginated-past">Our Paginated Past</h2>
+<p>The <em>page</em> has been with us for a long time now. A few millennia, actually. The first books were thick slabs of clay created about 2,000 years ago, which quickly replaced scrolls as the preferred way to consume the written word. <em>(note: footnote referring back to The Shallows)</em>. And while reading technology has come a long way – from parchment to paperback to pixels – the concept of the page holds strong to this day. </p>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>The notion of the page has been baked into the nomenclature of the Web since the very beginning. Tim Berners-Lee invented the World Wide Web so that he, his colleagues at CERN, and other academics could easily share and link together their web of <em>documents</em>. This document-based, academic genesis of the Web is why the concept of the <em>page</em> is so deeply ingrained in the lexicon of the internet.</p>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>So what? </p>
 
-<h3 id="lorem-ipsum-1">Lorem Ipsum</h3>
+<p>As we’ll discuss throughout this book, the way things are named very much impact how they’re perceived and utilized. Thinking of the Web as pages has real ramifications on how people interact with web experiences and how we create interfaces.</p>
+
+<p>In the early days of the Web, companies looking to get online simply translated their printed materials onto their websites. Viewing a website as simply a digital representation of the printed page was easy for people to wrap their hands around. Of course this led to a very one-dimensional </p>
+
+<p><em>[note: image of Chrome “This Webpage is not available” ]</em></p>
+
+<p>“Brad, how long will the home <em>page</em> take to build?” Well, that sort of depends on what’s on it, right? Maybe the homepage consists of a tagline and a background image, which means it’ll be done by lunch. Or maybe it’s chock full of carousels, sophisticated forms, third-party integrations.</p>
+
+<p>Time to move away from the page metaphor</p>
+
+<h2 id="tearing-up-the-page">Tearing Up the Page</h2>
 
 <blockquote>
-  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Design systems, not pages. - <a href="stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/">Andy Clarke</a></p>
 </blockquote>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<ul>
+  <li>The ever-shifting Web landscape and the need for modularity</li>
+  <li>What’s old is new again</li>
+  <li>a history of modular design</li>
+</ul>
+
+<h2 id="trends-note-need-title">Trends (note: need title)</h2>
+
+<p>Trends: style tiles, element collages, UI frameworks, pattern libraries, CSS architecture</p>
+
+<p>## </p>
+
+<p>Lorem ipsum dolar yadda yadda yadda to be continued…</p>
+
 
     <nav role="navigaiton" class="pagination">
     <!-- <a href="#">Next Chapter</a>

_site/outline/index.html

@@ -27,15 +27,15 @@ <h1>Outline</h1>
 
 <p>Chapter one explains why. Chapter two focuses on the what. Chapter three and four show you how.</p>
 
-<h2 id="design-systems">1. Design systems</h2>
+<h2 id="design-systemschapter-1">1. <a href="/chapter-1">Design systems</a></h2>
 <p>The book will begin by addressing the “why”: why designers should care about thinking about interfaces in a more systematic way. I’ll discuss the history of modular design systems (after all, this type of thinking been around for a long while now), but discuss how the ever-shifting Web landscape is making systematic thinking a necessity.</p>
 
 <p>The first section will also discuss the emerging trends and techniques that encourage more systematic thinking: style tiles, element collages, pattern libraries, UI frameworks, and more. And while I’ll certainly extol the virtues of these techniques, I’ll also bring to light a lot of the shortcomings and frustrations of UI frameworks and pattern libraries. This sets the stage to introduce a more sound, deliberate way of constructing an interface system.</p>
 
 <ul>
   <li>Our paginated past</li>
-  <li>The ever-shifting Web landscape and the need for modularity</li>
-  <li>History of modular design</li>
+  <li>Tearing up the page - The ever-shifting Web landscape and the need for modularity</li>
+  <li>What’s old is new again - a history of modular design</li>
   <li>Trends: style tiles, element collages, UI frameworks, pattern libraries, CSS architecture</li>
   <li>Not another redesign</li>
   <li>Advantages of design systems: promote consistency, establish a consistent vocabulary, create more robust deliverables, establish a system that can be modified and extended, future-friendly</li>
@@ -44,7 +44,7 @@ <h2 id="design-systems">1. Design systems</h2>
   <li>Setting the stage for the need of a better methodology</li>
 </ul>
 
-<h2 id="atomic-design-methodology">2. Atomic Design Methodology</h2>
+<h2 id="atomic-design-methodologychapter-2">2. <a href="/chapter-2">Atomic Design Methodology</a></h2>
 <p>The second chapter will define atomic design. Atomic design is an interface design methodology consisting of five distinct stages working together to create deliberate design systems.</p>
 
 <ul>
@@ -102,7 +102,7 @@ <h3 id="advantages">Advantages</h3>
   <li>Recap of the the atomic design methodology</li>
 </ul>
 
-<h2 id="tools-of-the-trade">3. Tools of the Trade</h2>
+<h2 id="tools-of-the-tradechapter-3">3. <a href="/chapter-3">Tools of the Trade</a></h2>
 <p>This chapter will discuss tools and techniques to create atomic design systems. I’ll introduce Pattern Lab, a tool Dave Olsen and I created in order to execute atomic design systems. I’ll explain the gist of using Pattern Lab and its various features, but I want to be cognizant of not focusing too much on this specific tool. While I know it’s an effective tool for me and others, I understand that it might not be a perfect fit for all readers. The book is more about promoting the idea of atomic design rather than any specific tool.</p>
 
 <ul>
@@ -114,7 +114,7 @@ <h2 id="tools-of-the-trade">3. Tools of the Trade</h2>
   <li>Pattern library boilerplates, and front-end style guides</li>
 </ul>
 
-<h2 id="process--workflow">4. Process &amp; Workflow</h2>
+<h2 id="process--workflowchapter-4">4. <a href="/chapter-4">Process &amp; Workflow</a></h2>
 <p>I’ll introduce techniques for design teams to get started with systematic design. One particularly useful technique is conducting an interface inventory. I’ll define what an interface inventory is and how to conduct one. I’ll also reference other tools (like Stlyify.me and Nicole Sullivan’s Typo-O-Matic) that help deconstruct an existing interface into its component parts. I’ll also discuss pattern library tools and resources to help designers kickstart their own design systems.</p>
 
 <p>Everyone’s design process is different, so I’ll also discuss how to introduce and integrate atomic design into cross-disciplinary Web design teams. I’ll also provide practical advice for getting buy-in from colleagues and clients.</p>
@@ -126,7 +126,7 @@ <h2 id="process--workflow">4. Process &amp; Workflow</h2>
   <li>Stylify.me and Type-o-matic</li>
 </ul>
 
-<h2 id="conclusion">Conclusion</h2>
+<h2 id="conclusionconclusion"><a href="/conclusion">Conclusion</a></h2>
 <p>The book will conclude by recapping why thinking in a more systematic way is becoming increasingly necessary. I’ll talk about the merits of atomic design, and remind people how they can get started. I will leave on a note of “What’s next?” for design systems. Right now, for me the most obvious challenge is to make systematic design the default mode of thinking for designers, agencies, and organizations. I think there’s a tremendous opportunity for design systems to help people build for the future.</p>
 
 <ul>
@@ -138,9 +138,9 @@ <h2 id="conclusion">Conclusion</h2>
 <hr />
 
 <ul>
-  <li>Thanks &amp; Acknowledgements</li>
-  <li>Resources</li>
-  <li>About the Author</li>
+  <li><a href="/thanks">Thanks &amp; Acknowledgements</a></li>
+  <li><a href="/resources">Resources</a></li>
+  <li><a href="/author">About the Author</a></li>
 </ul>
 
     <nav role="navigaiton" class="pagination">

chapter-1.md

@@ -4,20 +4,43 @@ title: Chapter 1
 permalink: /chapter-1/
 ---
 
-I know I know death to lorem ipsum and all that but this is literally placeholder content that will be replaced with the book's content soon enough I promise OK so don't get too hung up on the lorem ipsum.
+Once upon a time in the not-so-distant past, there were these things called _books_. Remember them? These contraptions were heavy and bulky and made of dead trees. Inside these books were things called _pages_. You turned them, and they cut your fingers.
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Awful things. I’m so glad these book things aren’t around anymore.
 
-Lorem ipsum dolor sit amet, [consectetur adipisicing elit](#), sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Oh wait.
 
-## Lorem Ipsum
+## Our Paginated Past
+The _page_ has been with us for a long time now. A few millennia, actually. The first books were thick slabs of clay created about 2,000 years ago, which quickly replaced scrolls as the preferred way to consume the written word. *(note: footnote referring back to The Shallows)*. And while reading technology has come a long way – from parchment to paperback to pixels – the concept of the page holds strong to this day. 
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+The notion of the page has been baked into the nomenclature of the Web since the very beginning. Tim Berners-Lee invented the World Wide Web so that he, his colleagues at CERN, and other academics could easily share and link together their web of *documents*. This document-based, academic genesis of the Web is why the concept of the *page* is so deeply ingrained in the lexicon of the internet.
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+So what? 
 
-### Lorem Ipsum
+As we’ll discuss throughout this book, the way things are named very much impact how they’re perceived and utilized. Thinking of the Web as pages has real ramifications on how people interact with web experiences and how we create interfaces.
+
+In the early days of the Web, companies looking to get online simply translated their printed materials onto their websites. Viewing a website as simply a digital representation of the printed page was easy for people to wrap their hands around. Of course this led to a very one-dimensional 
+
+*[note: image of Chrome “This Webpage is not available” ]*
+
+“Brad, how long will the home *page* take to build?” Well, that sort of depends on what’s on it, right? Maybe the homepage consists of a tagline and a background image, which means it’ll be done by lunch. Or maybe it’s chock full of carousels, sophisticated forms, third-party integrations.
+
+Time to move away from the page metaphor
+
+## Tearing Up the Page
+
+> Design systems, not pages. - [Andy Clarke](stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/)
+
+- The ever-shifting Web landscape and the need for modularity
+- What’s old is new again
+- a history of modular design
+
+## Trends (note: need title)
+
+Trends: style tiles, element collages, UI frameworks, pattern libraries, CSS architecture
+
+## 
+
+Lorem ipsum dolar yadda yadda yadda to be continued…
 
-> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.