bradfrost/atomic-design

The repository for the Atomic Design book

Atomic Design: The Book

This is the repository for the book Atomic Design by Brad Frost.

• Visit the project's homepage
• Read more about the project here
• You can preorder the e-book and support the project
• You can sign up for email updates to get progress on the project and receive resources about
• You can track the project's progress here

atomic-design's Issues

Add coma after "established" [typo]

"But once the pattern library is established subsequent design and development becomes much faster, which tends to make everyone happy."

-Chapter 1

Add Meta Tags to Head

http://moz.com/blog/meta-data-templates-123

Chapter 1: Add comma after "unfortunately" in sentence "Unfortunately end users still..."

Change:

Unfortunately end users still have to download the framework’s unused CSS and JavaScript, resulting in slower page loads and frustration.

To:

Unfortunately, end users still have to download the framework’s unused CSS and JavaScript, resulting in slower page loads and frustration.

Chapter 1: "Despite it been" should be changed to "Despite it being"

Change:

Despite it been around since 1995, JavaScript, the programming language of the Web, first had to endure some growing pains in order to mature into the capable, respected language it is today.

To:

Despite it being around since 1995, JavaScript, the programming language of the Web, first had to endure some growing pains in order to mature into the capable, respected language it is today.

Chapter 1: Maybe Italicize the Word Page in Paragraph: "The page metaphor..."

Maybe italicize at least the last page if not both to emphasize word:

The page metaphor served its purpose helping users familiarize themselves with the Web, and provided creators with a necessary transitional language for which to create for a brand new medium. But in order to create thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page.

New:

The page metaphor served its purpose helping users familiarize themselves with the Web, and provided creators with a necessary transitional language for which to create for a brand new medium. But in order to create thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page.

Chapter 2 Draft

Write the text for Chapter 2, which will cover the atomic design methodology.

Move periods and commas inside quotations....

Chapter 1:

• “Magic Escalator of Acquired Knowledge”.
• “jumbotron”.
• “hey, let’s make a new website”.

Chapter 2:

• “step 1: atoms, step 2: molecules, step 3: organisms, step 4: templates, step 5: pages”.
• The terms the team came up with were “foundations”, “materials”, “rooms”, “templates”, and “pages”.

Chapter 1: Add comma to sentence "Of course there's a time and place..."

Change:

Of course there’s a time and place for everything, and designers and developers need the discernment to know which tools to use and when.

To:

Of course, there’s a time and place for everything, and designers and developers need the discernment to know which tools to use and when.

"Have" used instead of "how"

"Unfortunately, the page metaphor continues to run deep with respects to have we scope and execute our Web projects."

Chapter 1: Change ampersand to actual word "and" in sentence "Even third parties..."

Change:

Even third parties responsible for matching their experiences with the branding/look & feel of a primary experience can make great use of a style guide.

To:

Even third parties responsible for matching their experiences with the branding/look and feel of a primary experience can make great use of a style guide.

Chapter 1: Commas in section starting "Slowly but surely..." Also, 2000's should be 2000s

Change:

Slowly but surely these concepts found their way into web designers’ workflows. In the early 2000’s we saw the introduction of libraries like YUI and jQuery UI, which provided developers with a toolkit of widgets and patterns to better create interactive interfaces.

To:

Slowly, but surely, these concepts found their way into web designers’ workflows. In the early 2000s we saw the introduction of libraries like YUI and jQuery UI, which provided developers with a toolkit of widgets and patterns to better create interactive interfaces.

Chapter 1: Under "Classy Code" Change "it's" to "it has" in sentence "While this principle..."

Change:

While this principle existed long before the Web was invented, it’s taken some time for modularity to become engrained in the minds and hearts of Web developers.

To:

While this principle existed long before the Web was invented, it has taken some time for modularity to become engrained in the minds and hearts of Web developers.

Typo under "Speed"

From @cstauf2:

Hey man you have a typo under the "Speed" heading.... "We’re under pressure to get By developing your own design system, you can reap those same speed rewards."

Implement Boson & Quarks

Pull Request created:

Chapter 1: Under "Tearing up the page" heading first sentence. Sounds weird.

The create for part of this sentence sounds weird with talk about before the and:

Thankfully, the Web community is hard at work establishing principles and practices to help us effectively talk about and create for the Web.

I keep reading it over and over and sometimes it sounds right and other times it sounds weird.

Chapter 1 Grammar: "You turned..."

May want to take the comma out between "them" and "and."

You turned them, and they cut your fingers.

I understand if you are leaving the comma for a pause for language purposes though.

Chapter 1: Similar changes to previous issue but to sentence starting "Thankfully, even massive..."

Optional comma before and. Don't need are since you previously stated it in the section before and. Change:

Thankfully, even massive organizations are taking cues from the smaller, leaner startup world, and are striving to get things out the door quicker.

To:

Thankfully, even massive organizations are taking cues from the smaller, leaner startup world and striving to get things out the door quicker.

Chapter 1: Change all-to-often to all too often in sentence "That requires organization..."

Change:

That requires organizations to overcome the short-term mentality that all-to-often creeps its way into company culture.

To:

That requires organizations to overcome the short-term mentality that all too often creeps its way into company culture.

Ch2 Sentence fragment "...chemical equation"

Chapter 2, paragraph 3 ends in a sentence fragment:

"If you’re like me, you’ll need a bit of a refresher to recall what a chemical equation"

It then concludes with the chemical equasion 2H2+O2 > 2H2O.

Complete Outline

The current outline can be found here: http://atomicdesign.bradfrost.com/outline

I need to do some revisions outline to tighten up the structure before diving into writing the first draft of chapters.

Note: Use phrase "guidelines and guardrails" a lot in the first chapter

Note: Use phrase "guidelines and guardrails" a lot in the first chapter

Create Email template for communications

Ch2 Sentence fragment "Eventually these..."

Chapter 2 Paragraph 4 ends with the sentence fragment "Eventually these". This should probably continue on to Organisms.

Chapter 1: No Comma Needed in Sentence That Begins: "Thinking of the Web...."

Don't think you need a comma before and:

Thinking of the Web as pages has real ramifications on how people interact with web experiences, and influences how we as an industry go about creating Web interfaces.

Style Pagination

Previous/Next chapter and TOC styles

Chapter 1: Add "the" before dust in sentence "Now that JavaScript..."

Add the Change:

Now that JavaScript has grown up and dust has settled, developers can now apply those tried-and-true computer science principles to their Web development workflows.

To:

Now that JavaScript has grown up and the dust has settled, developers can now apply those tried-and-true computer science principles to their Web development workflows.

Chapter 1: Pluralization in Sentence That Begins: "As we'll discuss..."

Change:

As we’ll discuss throughout this book, the way things are named very much impact how they’re perceived and utilized.

To:

As we’ll discuss throughout this book, the way things are named very much impacts how they’re perceived and utilized.

Chapter 1: Don't think you need hyphen in "automobile-manufacturing"

Don't think you need hyphen between automobile* and manufacturing:

The Industrial Revolution brought about interchangeable parts and Henry Ford’s assembly line, which forever transformed the automobile-manufacturing process.

Typo under

From @cstauf2:

Hey man you have a typo under the "Speed" heading.... "We’re under pressure to get By developing your own design system, you can reap those same speed rewards."

Style Text Passages

Need to create styles for text passages, including links, blockquotes, headings, images, media, lists, etc.

Typo - Chapter 1 - Tearing up the page.

First paragraph, last sentence reads:

And there’s one concept the keeps popping up in every conversation about how to create successful Web experiences: modularity.

It looks like it should read:

And there’s one concept that keeps popping up in every conversation about how to create successful Web experiences: modularity.

Chapter 1: Change sentence "So what do a sound..."

Change:

So what do a sound design systems look like?

To:

So what do sound design systems look like?

Chapter 4 Draft

Write the text for Chapter 4, which will cover how to apply atomic design to your process.

Chapter 1 Draft

Write the text for Chapter 1, which will cover the introduction and design systems

Add banner to bradfrost.com

Create a promotional banner for the book project on bradfrost.com

Create Timeline template

Need to make a project hub template for keeping track of all the changes to the book.

Chapter 3 Draft

Write the text for Chapter 3, which will cover the tools and techniques for creating atomic design systems.

Set up Grunt with Jekyll

Right now Jekyll is running with its default configuration, but I want to incorporate Grunt into the workflow in order to take advantage of a few things.

"an" should be "a" [typo]

Brand style guides provide an foundational center for a company.

-Chapter 1

Conclusion Draft

Write the text for the conclusion, which will wrap up the concepts of the book.

Get Pattern Lab and Jekyll working together

Very much excited to wire up Pattern Lab with Jekyll similar to what @bmuenzenmeyer articulated in his post Using Pattern Lab to Design, Build and Maintain a Website.

Would be great to have the book's website as an example of how to do pattern-based design right.

Chapter 1: Eliminate comma in sentence "The spirit of modularity..."

Change:

And that’s exactly what folks are doing. The spirit of modularity is weaving its way into every aspect of the Web creation process_, and is_ having profound effects on organizations’ strategy, process, content, design, and development.

To (Eliminate comma before and and get rid of is since you previously stated it):

And that’s exactly what folks are doing. The spirit of modularity is weaving its way into every aspect of the Web creation process and having profound effects on organizations’ strategy, process, content, design, and development.

Combined sentences [typo]

"We’re under pressure to get By developing your own design system, you can reap those same speed rewards."

-Chapter 1

It sounds like "By" was supposed to start a new sentence but the phrase before didn't have an ending.

Chapter 1: Need comma in sentence "As for the 30,000..."

Need a comma after declare:

As for the 30,000-page university website, it might be tempting to declare “Thousands of pages!? Wow, that sounds challenging!”

New:

As for the 30,000-page university website, it might be tempting to declare, “Thousands of pages!? Wow, that sounds challenging!”

Chapter 1: Word Addition/Subtraction to Sentence That Begins: "And while..."

Change:

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.

To

While reading that technology has come a long way – from parchment to paperback to pixels – the concept of the page holds strong to this day.

Not supposed to start sentences with and, but since your book or more of a "spoken" thing it may be fine.

Chapter 1 Sentence Structure: "These contraptions..."

May want to change:

These contraptions were heavy and bulky and made from the pulp of dead trees.

To:

These contraptions were heavy, bulky, and made from the pulp of dead trees.

Chapter 1: Add period to etc in sentence "Organizational structure, client..."

Add period to etc in:

Organizational structure, client relations, personalities, etc all play major roles in determining a project’s process.

Chapter 1: Run on sentence starting at "The reality is that..."

Sentence seems a bit long:

The reality is that the Web is a fluid, bi-directional, interdependent medium, and as soon as we come to terms with that fact the notion of the page quickly erodes as a useful means to scope and create Web experiences.

Maybe break into two sentences:

The reality is that the Web is a fluid, bi-directional, interdependent medium. As soon as we come to terms with this fact, the notion of the page quickly erodes as a useful means to scope and create Web experiences.

Chapter 1: Add comma after "At some point..."

Change:

At some point a threshold is crossed where the initial benefits of using a framework–namely development speed– are outweighed by the time spent modifying, extending, and fixing the framework.

To:

At some point, a threshold is crossed where the initial benefits of using a framework–namely development speed– are outweighed by the time spent modifying, extending, and fixing the framework.

Reading Chapters

The chapters are a little lengthy for me and could do with more devices like anecdotes, quotes, and analogies. They also don't seem to lend themselves to picking up where you left off from (I'm like 1 paragraph after the first diagram on chapter 1 and I have disconnected)...

Perhaps pages do kinda suck for the web that is capable of doing so much more, but not having them, makes it hard to index, bookmark, increases loading times, bandwidth fees (in aggregates for mobile users and site-owners) etc, making me question the premise of non-paging.

Instead of

• Book
  • Chapters[]

maybe

• Book
  • Chapters[]
    • Pages[]

or

• Book
  • Chapters[]
  • Pages[] (Chapters load pages, but URL does not reflect chapter)

even

• Book
  • Chapters[]
  • Sections[] (chapters would be made up of sections, each with their own heading, but the cool part is reading just a section, as it preserves context for me bookmarking a section to read later, and allows easier fine-grained editorial control.)

or _(best)_

• Book
  • Chapters[]
  • Pages[]
  • Sections[] _(If you use posts for this and adjust the permalink style, you can even benefit from previous, next functionality)

Looking at the other issues, you seem to be using Jekyll (Have not looked that much into this, it may just be mentioned). This means you can actually create very simple rules, and devices, to help you load specific content using the liquid where to get a specific collection page, or post's content. This in-turn allows you to re-use content, which although not entirely obvious, is useful for any publication; so that you can re-organize content, adjust ordering etc from a high-level, and build out the content in the smallest blocks you feel comfortable with, then including using one line per section, or page or chapter.

The other benefit of this approach is that you could make your chapters pages, which use scroll-spy or similar to only load pages or sections as needed. This is a tremendous benefit, as it allows you to serve your current format, in EPIC paragraph-laden chapters, or to facilitate people like me to navigate to specifically the section I want (for bookmarking), by I would guess clicking a specific section's heading and bookmarking...