seeliang · January 6, 2019 09:54 · Jan 6, 2019 · Jan 6, 2019 · Dec 30, 2018 · Dec 30, 2018
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,21 +1,21 @@
 # Implementation of Atomic design
-After spending a little more than a decade, worked with vast variety products and projects, I found [atomic design](http://bradfrost.com/blog/post/atomic-web-design/) works very well with scalable / long-term development. 
+After spending a little more than a decade, and had worked with vast variety products and projects, personally, I think [atomic design](http://bradfrost.com/blog/post/atomic-web-design/) be a prefect fit for scalable / long-term development. 
 
-Before we start, I would to address that atomic design would be a overkill for short term projects(less than a year), [as I mentioned before](https://gist.github.com/seeliang/e610bc7b3790309b4560a5e5fe77e869) frameworks like bootstrap and foundation would do just fine
+To avoid wast your time, I would to address that atomic design implementation could be a overkill for known short term projects (less than 6 months), [as I mentioned before](https://gist.github.com/seeliang/e610bc7b3790309b4560a5e5fe77e869) frameworks like bootstrap and foundation would do just fine
 
 ## Implementation
 Great, you are still reading.
 
 In short, the implementation is a sorting process: Sorting components based on its atomic category. 
 
 ### Component category sorting
-Figuring out the category of each component is the critical part of implementation. My team had experienced major incorrect implementation of atomic design once, we ended up having massive refactoring and complex modification across multiple components. 
+Sorting the category of each component is the critical part of implementation. My team had ran in to major incorrect implementation of atomic design once, we ended up having massive refactoring and complex modification across multiple components. 
 
-In the retrospect, we had agreed that developers and designers shall work closely and carefully together and shall figure out how components should be used before the development. 
+In the retrospect, we had agreed that developers and designers shall work closely and shall figure out how components should be used before the development. 
 
 **We had clarified sorting process as below:**
 
-We are limited to three main categories in atomic design: Atoms, Molecules and Organisms (since the Theme is unique), and sorting with structure and scope.
+We are limited to three main categories in atomic design: Atoms, Molecules and Organisms (since the Theme is unique for us), and sorting with structure and scope.
 
 #### Structure
 For the simple components, they could be easily sorted by their complexity (HTML structure). 
@@ -24,34 +24,34 @@ Here is a quick checklist we generated to identify simple components:
 
 - Atoms: one element (HTML tag), no internal functions, may have style alterations, will always be used by Molecules and Organisms
 
-- Molecules: combine multiple elements (HTML tags), but NOT consuming the full width (edge to edge) of device, and will be used by Organisms, may have internal functions (with Javascript), may have style and function alterations.
+- Molecules: component that combined with multiple elements (HTML tags and/or atoms), but NOT consuming the full width (edge to edge) of device, and will be used by Organisms as a whole, may have internal functions (with Javascript), may have style and function alterations.
 
-- Organisms: similar to molecule, but it always consumes the full width of the device, could be a used at root level (direct child of the page)
+- Organisms: similar to molecule, but it always consumes the full width of the device, always be a used at root level (direct child of the page)
 
-and if we stacked the Organisms we will get pages we need.
+If we stacked the required Organisms we will get Pages (in atomic design).
 
-the reality is there will be complex components, will need to consider the scope of the components.
+The reality is there will be complex components, and we will need to consider the scope of the components.
 
 #### Scope
 This is the part I mentioned earlier which tripped us, and cost us days in development.
 
 Scope means the control area of the component, and components shall work independently. For instance, the `padding` of components is in the scope, but the `margin` set shall be controlled by its parent component (if it is necessary). 
 
-Only following this scope set, the components will be independent and be able to 'included' (consumed) as a whole by others.
+Only following this scope set, the components will be to achieve independent and be able to 'included' (consumed) as a whole by others.
 
 Only in this way, the code base will be able to assemble reliable user interface function swiftly.
 
-Designers and developers shall discuss shall alway keep in mind that whether the component shall include (stack on) other components for reusing.
+As I mentioned before, designers and developers shall clarify the way that the component works, which means things like how it should be included, different alterations and scope of each component in a large scale.
 
-The list below demonstrates how component including works in atomic design 
+The list below demonstrates how we believe the component including should work in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 
 - Molecules can include other `molecules` `atoms`
 
 - Atoms can NOT include any other components
 
-**Now, here is a common mistake and you may want to have a close look**
+Now, let's take a close look at one mistake we made.
 
 **Incorrect scope sample** 
 ```html
@@ -64,11 +64,13 @@ The list below demonstrates how component including works in atomic design
 </div>
 ```
 
-Because the mixed scope modification (`<input class="organism-a__element" /> ` inside of `molecule-0` the `molecule-0` code now is not reuseable as a whole, since you can not include `molecule-0`.html file and call it done which is what we would like to do.
+Because the mixed scope modification (`<input class="organism-a__element" /> ` inside of `molecule-0` the `molecule-0`), the code above is not reuseable as a whole. 
 
-No panic is needed, there are many solutions for this issue
+Since we can not simply include `molecule-0`.html in `organism-a` and call it done, which is what atomic design component suppose to do.
 
-It could be that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions. then alter `organism-a` with js or other render language
+No panic is needed, there are few solutions for this issue
+
+It could be the case that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions. then add `organism-a` alteration with js or other render language
 
 ```html
 <div class="organism-a">
@@ -80,9 +82,11 @@ It could be that the `organism-a__element` is implemented in a inappropriate sco
 </div>
 ```
 
-Or, it could be the case, that code base requires a state middleware (like Redux) to support passing data between components. 
+Or, it could be the case, that code base requires a state middleware (like Redux) to support passing data between components to support alteration of `molecule-0`. 
+
+With the middleware, we could achieve the desired style changes or function calls via data communication. 
 
-With the middleware, we could achieve the desired style changes or function calls via data communication. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
+In other words, replacing `organism-a__element` with `molecule-0__element` and implement the update via data would solve the problem.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -93,14 +97,14 @@ With the middleware, we could achieve the desired style changes or function call
 </div>
 ```
 
-With correct categorization, the components in code base would be independent from each other. 
+With correct categorization, the scope of component in code base would be independent from each other. 
 
-Now we could moving forward and improve our code base folder structure for further scaling.
+Now we could go further and improve our code base folder structure for scaling with packaging.
 
-### Structure and packages 
-We could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in one package format during the development process. Then when scaling process kick in is super easy to break down the code base.
+### Packaging
+We could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in one package friendly file structure. When scaling process kick in, it is super easy to break down the code base.
 
-Below is a sample package ready folders.
+Below is a sample package friendly file structure.
 
 ```bash
 src  
@@ -119,22 +123,19 @@ src
   |- organisms
   ...
 ```
-Here is how we could scale the library for all online services: 
-* The whole `atoms` folder could isolated and shipped as the base style kit npm package (library) for serving all higher level npm packages.
+Here is how we could scale this package structure for all online services:
+
+* The whole `atoms` folder could isolated and shipped as the base npm package for supporting all higher level packages.
 
-* Each component in `molecules` folder could be separated as an individual npm package with our `atoms` package as its dependency. As the we covered in **Scope** section, each package could be easily imported by others packaged and works as its dependencies. 
+* Each component in `molecules` folder could be separated as an individual npm package (or as one package) and use `atoms` package as its dependency.
 
 * Same as molecules packages, each organism could be exported as a npm packages.
 
-The end result of folder structure could be like [this](https://github.com/babel/babel/tree/master/packages)
+## Ideal Outcome
+Once we achieved package structure, this library of npm packages is ready to be imported into any related online services development. 
 
-## Result
-Once we achieved structure update and package separation, this library of npm packages can be used in any related online services code base. 
-
-From this point on, we will have a consistent styled components, and shared base. we will be able to fix issues across the multiple platform with one source packages update.
+From this point on, we will have a consistent styled components with shared code packages. We will be able to fix issues across the multiple platforms with one source packages update.
 
-Finally, we could focus on building new component packages and updating existing library, instead maintaining same fix patch in multiple places.
-
-That will dramatically improve the working satisfaction and develop cycle as well.
+Finally, we could focus on building new component packages and updating existing library, instead of maintaining same fix patch in multiple places.
 
-Everyone is happy and happy ending (if your boss is happy with this and agree with you)
+That will dramatically improve the working satisfaction and and reduce develop cycle.
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,37 +1,57 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web components in the code base. It is one of the web development solutions for large service provider with multiple services.
+After spending a little more than a decade, worked with vast variety products and projects, I found [atomic design](http://bradfrost.com/blog/post/atomic-web-design/) works very well with scalable / long-term development. 
+
+Before we start, I would to address that atomic design would be a overkill for short term projects(less than a year), [as I mentioned before](https://gist.github.com/seeliang/e610bc7b3790309b4560a5e5fe77e869) frameworks like bootstrap and foundation would do just fine
 
 ## Implementation
-by sorting components based on its atomic category, the implementation of atomic design will make design and code base consistent and reusable. Thus the code base will be scalable and will be able to support multiple projects / products
+Great, you are still reading.
+
+In short, the implementation is a sorting process: Sorting components based on its atomic category. 
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Incorrect implementation of categorization may lead to massive refactor process or complex modification across multiple components in the future development cycle. 
+Figuring out the category of each component is the critical part of implementation. My team had experienced major incorrect implementation of atomic design once, we ended up having massive refactoring and complex modification across multiple components. 
 
-Therefore it is essential that developers and designers work closely and carefully figure out how components should be used before the implementation.
+In the retrospect, we had agreed that developers and designers shall work closely and carefully together and shall figure out how components should be used before the development. 
 
-There are three main categories in atomic design: Atoms, Molecules and Organisms for three different kind of usage. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
+**We had clarified sorting process as below:**
+
+We are limited to three main categories in atomic design: Atoms, Molecules and Organisms (since the Theme is unique), and sorting with structure and scope.
 
 #### Structure
-Component could be identified by its complexity (HTML structure). 
+For the simple components, they could be easily sorted by their complexity (HTML structure). 
+
+Here is a quick checklist we generated to identify simple components:
 
-Here is a quick checklist to identify simple components:
+- Atoms: one element (HTML tag), no internal functions, may have style alterations, will always be used by Molecules and Organisms
 
-- Atoms: one element (HTML tag), no internal functions, will always be used by Molecules and Organisms
 - Molecules: combine multiple elements (HTML tags), but NOT consuming the full width (edge to edge) of device, and will be used by Organisms, may have internal functions (with Javascript), may have style and function alterations.
+
 - Organisms: similar to molecule, but it always consumes the full width of the device, could be a used at root level (direct child of the page)
 
-For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
+and if we stacked the Organisms we will get pages we need.
+
+the reality is there will be complex components, will need to consider the scope of the components.
 
 #### Scope
+This is the part I mentioned earlier which tripped us, and cost us days in development.
+
 Scope means the control area of the component, and components shall work independently. For instance, the `padding` of components is in the scope, but the `margin` set shall be controlled by its parent component (if it is necessary). 
 
-Following this scope set, any component shall be able to 'stack' on top of others regardlessly (like lego) to build a complex functions.  This is important because component may include (stack on) other components. The list below demonstrates how component including works in atomic design 
+Only following this scope set, the components will be independent and be able to 'included' (consumed) as a whole by others.
+
+Only in this way, the code base will be able to assemble reliable user interface function swiftly.
+
+Designers and developers shall discuss shall alway keep in mind that whether the component shall include (stack on) other components for reusing.
+
+The list below demonstrates how component including works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
+
 - Molecules can include other `molecules` `atoms`
+
 - Atoms can NOT include any other components
 
-Incorrect scope implementation is a common and critical mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule. See sample below.
+**Now, here is a common mistake and you may want to have a close look**
 
 **Incorrect scope sample** 
 ```html
@@ -44,9 +64,12 @@ Incorrect scope implementation is a common and critical mistake in component cat
 </div>
 ```
 
-This is incorrect implementation because the modification (impact via HTML, CSS Javascript) of `molecule-0` belongs to the scope of `molecule-0` and it should be private. This scope control is the base of atomic design: each components should be independent from outer components without overlapping .
+Because the mixed scope modification (`<input class="organism-a__element" /> ` inside of `molecule-0` the `molecule-0` code now is not reuseable as a whole, since you can not include `molecule-0`.html file and call it done which is what we would like to do.
+
+No panic is needed, there are many solutions for this issue
+
+It could be that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions. then alter `organism-a` with js or other render language
 
-Back to this specific case, it could be that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
 ```html
 <div class="organism-a">
   <input class="organism-a__element"/><-- move out -->
@@ -57,7 +80,9 @@ Back to this specific case, it could be that the `organism-a__element` is implem
 </div>
 ```
 
-Or, it could be the case, that code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function calls via data communication. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
+Or, it could be the case, that code base requires a state middleware (like Redux) to support passing data between components. 
+
+With the middleware, we could achieve the desired style changes or function calls via data communication. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -68,12 +93,12 @@ Or, it could be the case, that code base requires a middleware (like Redux) to s
 </div>
 ```
 
-With correct categorization, the components can be independent from each other. 
+With correct categorization, the components in code base would be independent from each other. 
 
-Now we could start to improve code base folder structure.
+Now we could moving forward and improve our code base folder structure for further scaling.
 
 ### Structure and packages 
-For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and it is better to placing code and files in one package format during the development process. Then when scaling process kick in is super easy to break down the code base.
+We could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in one package format during the development process. Then when scaling process kick in is super easy to break down the code base.
 
 Below is a sample package ready folders.
 
@@ -95,14 +120,21 @@ src
   ...
 ```
 Here is how we could scale the library for all online services: 
-* The whole `atoms` folder could isolated and shipped as the base style kit npm package (library) for the all npm packages.
-* Each component in `molecules` folder could be separated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could easily import others as its dependencies. 
-* Same as molecules, each organism could be exported as a npm packages.
+* The whole `atoms` folder could isolated and shipped as the base style kit npm package (library) for serving all higher level npm packages.
+
+* Each component in `molecules` folder could be separated as an individual npm package with our `atoms` package as its dependency. As the we covered in **Scope** section, each package could be easily imported by others packaged and works as its dependencies. 
+
+* Same as molecules packages, each organism could be exported as a npm packages.
 
 The end result of folder structure could be like [this](https://github.com/babel/babel/tree/master/packages)
 
-## Finish
-Once we achieved structure update and package separation, this library of npm packages can be used in any related online services code base. From this point on, we could focus on integrating existing components to the services, building new component packages and maintaining existing library. 
+## Result
+Once we achieved structure update and package separation, this library of npm packages can be used in any related online services code base. 
+
+From this point on, we will have a consistent styled components, and shared base. we will be able to fix issues across the multiple platform with one source packages update.
+
+Finally, we could focus on building new component packages and updating existing library, instead maintaining same fix patch in multiple places.
 
-This will dramatically reduce development cycle dramatically and will achieve consistent user experience across all online services at same time.
+That will dramatically improve the working satisfaction and develop cycle as well.
 
+Everyone is happy and happy ending (if your boss is happy with this and agree with you)
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,34 +1,35 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development code base by break designs / pages into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web components in the code base. It is one of the web development solutions for large service provider with multiple services.
 
-## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following the idea, the code base will become a categorized reusable library that could support related projects / products
-
-## Implementation in detail 
-The implementation of atomic design is a process of sorting component with categories and a creation of independent components
+## Implementation
+by sorting components based on its atomic category, the implementation of atomic design will make design and code base consistent and reusable. Thus the code base will be scalable and will be able to support multiple projects / products
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design code base. In traditional web project, incorrect implementation of categorization may lead to massive refactor process or complex modification across multiple components in the development cycle. That is why developers and designers shall work closely and carefully figure out the category of component before the implementation.
+Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Incorrect implementation of categorization may lead to massive refactor process or complex modification across multiple components in the future development cycle. 
+
+Therefore it is essential that developers and designers work closely and carefully figure out how components should be used before the implementation.
 
-There are three main categories in atomic design: Atoms, Molecules and Organisms. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
+There are three main categories in atomic design: Atoms, Molecules and Organisms for three different kind of usage. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
 
 #### Structure
 Component could be identified by its complexity (HTML structure). 
 
 Here is a quick checklist to identify simple components:
 
-- Atoms: one element (HTML tag), no internal functions, always been consumed by another components
-- Molecules: combine multiple elements (HTML tags), but NOT consuming the full width (edge to edge) of device, and always been consumed by another components, may have internal functions (Javascript), may have style alteration.
+- Atoms: one element (HTML tag), no internal functions, will always be used by Molecules and Organisms
+- Molecules: combine multiple elements (HTML tags), but NOT consuming the full width (edge to edge) of device, and will be used by Organisms, may have internal functions (with Javascript), may have style and function alterations.
 - Organisms: similar to molecule, but it always consumes the full width of the device, could be a used at root level (direct child of the page)
 
 For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
 
 #### Scope
-Scope means the control area of the component, and components shall work like lego. For instance, the root `padding` of components is in the scope, but the root `margin` set shall be controlled by its parent component (if it is necessary). Following this scope set, any component shall be able to 'stack' on top of others regardlessly (like lego).  This is important because component may include (stack on) other components. The list below demonstrates how component including works in atomic design 
+Scope means the control area of the component, and components shall work independently. For instance, the `padding` of components is in the scope, but the `margin` set shall be controlled by its parent component (if it is necessary). 
+
+Following this scope set, any component shall be able to 'stack' on top of others regardlessly (like lego) to build a complex functions.  This is important because component may include (stack on) other components. The list below demonstrates how component including works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 - Molecules can include other `molecules` `atoms`
-- Atoms can NOT include any elements
+- Atoms can NOT include any other components
 
 Incorrect scope implementation is a common and critical mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule. See sample below.
 
@@ -43,12 +44,12 @@ Incorrect scope implementation is a common and critical mistake in component cat
 </div>
 ```
 
-This is incorrect implementation because the modification (impact via HTML, CSS Javascript) of `molecule-0` belongs to the scope of `molecule-0` and it should be private. This scope control is the base of atomic design: each components should be independent from outer components .
+This is incorrect implementation because the modification (impact via HTML, CSS Javascript) of `molecule-0` belongs to the scope of `molecule-0` and it should be private. This scope control is the base of atomic design: each components should be independent from outer components without overlapping .
 
 Back to this specific case, it could be that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
 ```html
 <div class="organism-a">
-  <input class="organism-a__element"/>
+  <input class="organism-a__element"/><-- move out -->
   <div class="molecule-0">
     <div class="molecule-1"></div>
     <p class="atom"> text, just text</p>
@@ -67,10 +68,14 @@ Or, it could be the case, that code base requires a middleware (like Redux) to s
 </div>
 ```
 
-With correct categorization, the components can be independent from each other. Now we could start to improve structure.
+With correct categorization, the components can be independent from each other. 
+
+Now we could start to improve code base folder structure.
 
 ### Structure and packages 
-For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample package ready folders.
+For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and it is better to placing code and files in one package format during the development process. Then when scaling process kick in is super easy to break down the code base.
+
+Below is a sample package ready folders.
 
 ```bash
 src  
@@ -89,15 +94,15 @@ src
   |- organisms
   ...
 ```
-Here is how we could export and reuse this library for all online services: 
+Here is how we could scale the library for all online services: 
 * The whole `atoms` folder could isolated and shipped as the base style kit npm package (library) for the all npm packages.
-* Each component in `molecules` folder could be isolated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
+* Each component in `molecules` folder could be separated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could easily import others as its dependencies. 
 * Same as molecules, each organism could be exported as a npm packages.
 
-The end result could be like [this](https://github.com/babel/babel/tree/master/packages)
+The end result of folder structure could be like [this](https://github.com/babel/babel/tree/master/packages)
 
 ## Finish
-Once we achieved structure update and package isolation, this library of npm packages can be used in any related online services development. From this point on, we could focus on integrating existing components to the services, building new component packages and maintaining existing library. 
+Once we achieved structure update and package separation, this library of npm packages can be used in any related online services code base. From this point on, we could focus on integrating existing components to the services, building new component packages and maintaining existing library. 
 
-This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
+This will dramatically reduce development cycle dramatically and will achieve consistent user experience across all online services at same time.
 
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,5 +1,5 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development folder structure by break designs / pages into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development code base by break designs / pages into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
 
 ## What is core concept of atomic design
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following the idea, the code base will become a categorized reusable library that could support related projects / products

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,5 +1,5 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development by break designs / pages into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development folder structure by break designs / pages into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
 
 ## What is core concept of atomic design
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following the idea, the code base will become a categorized reusable library that could support related projects / products

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,5 +1,5 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development by break design into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development by break designs / pages into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
 
 ## What is core concept of atomic design
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following the idea, the code base will become a categorized reusable library that could support related projects / products

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,5 +1,5 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break design into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is a way of organizing web development by break design into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
 
 ## What is core concept of atomic design
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following the idea, the code base will become a categorized reusable library that could support related projects / products

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,36 +1,36 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break design into components. It is an ideal solution for large service provider with multiple online services. We are going to explore how to implement atomic design based on my experiences (with traditional web project structure).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break design into components. It is an ideal solution for large service provider with multiple online services. Below is one of the ways to implement atomic design (with traditional web project structure).
 
 ## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized reusable library
+The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following the idea, the code base will become a categorized reusable library that could support related projects / products
 
 ## Implementation in detail 
-The implementation of atomic design is a process of sorting component with categories and a creation of independent packages
+The implementation of atomic design is a process of sorting component with categories and a creation of independent components
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why developers and designers shall work closely and carefully figure out the category of component before the implementation.
+Figuring out the category of each component is the first and the essential part of achieving atomic design code base. In traditional web project, incorrect implementation of categorization may lead to massive refactor process or complex modification across multiple components in the development cycle. That is why developers and designers shall work closely and carefully figure out the category of component before the implementation.
 
-There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
+There are three main categories in atomic design: Atoms, Molecules and Organisms. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
 
 #### Structure
 Component could be identified by its complexity (HTML structure). 
 
 Here is a quick checklist to identify simple components:
 
-- Atoms: one HTML tag, no internal functions, style alteration.
-- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of device; may have functions (Javascript), may have style alteration.
-- Organisms: same as molecule, but it consumes the full width of the device.
+- Atoms: one element (HTML tag), no internal functions, always been consumed by another components
+- Molecules: combine multiple elements (HTML tags), but NOT consuming the full width (edge to edge) of device, and always been consumed by another components, may have internal functions (Javascript), may have style alteration.
+- Organisms: similar to molecule, but it always consumes the full width of the device, could be a used at root level (direct child of the page)
 
 For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
 
 #### Scope
-Scope means the control area of the component, it shall work like lego. For instance, the root `padding` is in the scope and the root `margin` shall move to the parent component, therefore any component shall be able to 'stack' on top of others regardlessly (like lego).  This is important because component may include other components. The list below demonstrates how component including works in atomic design 
+Scope means the control area of the component, and components shall work like lego. For instance, the root `padding` of components is in the scope, but the root `margin` set shall be controlled by its parent component (if it is necessary). Following this scope set, any component shall be able to 'stack' on top of others regardlessly (like lego).  This is important because component may include (stack on) other components. The list below demonstrates how component including works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 - Molecules can include other `molecules` `atoms`
 - Atoms can NOT include any elements
 
-Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule. See sample below.
+Incorrect scope implementation is a common and critical mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule. See sample below.
 
 **Incorrect scope sample** 
 ```html
@@ -43,7 +43,7 @@ Incorrect scope implementation is a very common mistake in component categorizat
 </div>
 ```
 
-This is incorrect because the modification (impact via HTML, CSS Javascript) of `molecule-0` belongs to the scope of `molecule-0` and it should be private. Same thing for `molecule-1`, `molecule-0` should not directly modify `molecule-1`. This scope control is the base of atomic design: the component should be able to be reuse with minimum dependencies.
+This is incorrect implementation because the modification (impact via HTML, CSS Javascript) of `molecule-0` belongs to the scope of `molecule-0` and it should be private. This scope control is the base of atomic design: each components should be independent from outer components .
 
 Back to this specific case, it could be that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
 ```html
@@ -56,7 +56,7 @@ Back to this specific case, it could be that the `organism-a__element` is implem
 </div>
 ```
 
-Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function calls via data communication. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
+Or, it could be the case, that code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function calls via data communication. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -67,7 +67,7 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 </div>
 ```
 
-With correct categorization, the components can be independent from each other. Now we could start to work on the structure and packages.
+With correct categorization, the components can be independent from each other. Now we could start to improve structure.
 
 ### Structure and packages 
 For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample package ready folders.
@@ -90,14 +90,14 @@ src
   ...
 ```
 Here is how we could export and reuse this library for all online services: 
-* The whole `atoms` folder could isolated and shipped as the base npm package (library) for the all npm packages.
+* The whole `atoms` folder could isolated and shipped as the base style kit npm package (library) for the all npm packages.
 * Each component in `molecules` folder could be isolated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
 The end result could be like [this](https://github.com/babel/babel/tree/master/packages)
 
-Once we achieved package isolation, this library of npm packages can be used in any related online services development. From this point on, we could focus on integrating existing components to the services, building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
+## Finish
+Once we achieved structure update and package isolation, this library of npm packages can be used in any related online services development. From this point on, we could focus on integrating existing components to the services, building new component packages and maintaining existing library. 
 
-## Conclusion
+This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
 
-Atomic design is a concept that aiming at building reusable and consistent library (with packages). It generates well organized frond end library for reusing in across different online services.
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,38 +1,38 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break web pages into components. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences (with tradiotional web project).
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break design into components. It is an ideal solution for large service provider with multiple online services. We are going to explore how to implement atomic design based on my experiences (with traditional web project structure).
 
 ## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages.
+The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized reusable library
 
 ## Implementation in detail 
-The implementation of atomic design is a process of sorting component with categories and a creation of packages
+The implementation of atomic design is a process of sorting component with categories and a creation of independent packages
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
+Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why developers and designers shall work closely and carefully figure out the category of component before the implementation.
 
 There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
 
 #### Structure
-Component could be identified by its HTML structure. 
+Component could be identified by its complexity (HTML structure). 
 
 Here is a quick checklist to identify simple components:
 
-- Atoms: one HTML tag, no js, no style alteration.
-- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of device; may have Javascript functions, may have style alteration.
+- Atoms: one HTML tag, no internal functions, style alteration.
+- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of device; may have functions (Javascript), may have style alteration.
 - Organisms: same as molecule, but it consumes the full width of the device.
 
 For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
 
 #### Scope
-Scope means the control area of the component. This is important because component may include other components. The list below demonstrates how component including works in atomic design 
+Scope means the control area of the component, it shall work like lego. For instance, the root `padding` is in the scope and the root `margin` shall move to the parent component, therefore any component shall be able to 'stack' on top of others regardlessly (like lego).  This is important because component may include other components. The list below demonstrates how component including works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 - Molecules can include other `molecules` `atoms`
 - Atoms can NOT include any elements
 
 Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule. See sample below.
 
-**Incorrect scope** 
+**Incorrect scope sample** 
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -67,9 +67,9 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 </div>
 ```
 
-With correct categorization, the components can be independent from each other. Now we could start to work on the delivery of our npm packages.
+With correct categorization, the components can be independent from each other. Now we could start to work on the structure and packages.
 
-### Create npm packages 
+### Structure and packages 
 For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample package ready folders.
 
 ```bash

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -18,8 +18,8 @@ Component could be identified by its HTML structure.
 Here is a quick checklist to identify simple components:
 
 - Atoms: one HTML tag, no js, no style alteration.
-- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of browser; may have Javascript functions, may have style alteration.
-- Organisms: same as molecule, but it consumes the full width of the browser.
+- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of device; may have Javascript functions, may have style alteration.
+- Organisms: same as molecule, but it consumes the full width of the device.
 
 For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
 

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,5 +1,5 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break web pages into components. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break web pages into components. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences (with tradiotional web project).
 
 ## What is core concept of atomic design
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages.

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -5,7 +5,7 @@
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages.
 
 ## Implementation in detail 
-The implementation of atomic design is a process of sorting component with categories and a creation of 'package ready' file structure
+The implementation of atomic design is a process of sorting component with categories and a creation of packages
 
 ### Component category sorting
 Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
@@ -69,8 +69,8 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 
 With correct categorization, the components can be independent from each other. Now we could start to work on the delivery of our npm packages.
 
-### File structure for npm packages 
-For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
+### Create npm packages 
+For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample package ready folders.
 
 ```bash
 src  
@@ -89,12 +89,14 @@ src
   |- organisms
   ...
 ```
-Here is how we could export and reuse this library for other online services: 
-* Isolate the whole `atoms` folder, and create the base npm package (library) for the all npm packages.
-* Each component in `molecules` folder would be Isolated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
+Here is how we could export and reuse this library for all online services: 
+* The whole `atoms` folder could isolated and shipped as the base npm package (library) for the all npm packages.
+* Each component in `molecules` folder could be isolated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
-Once we achieved package isolation, this library of npm packages can be used in any related online services development. From this point, we could focus on integrating existing components to the services, building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
+The end result could be like [this](https://github.com/babel/babel/tree/master/packages)
+
+Once we achieved package isolation, this library of npm packages can be used in any related online services development. From this point on, we could focus on integrating existing components to the services, building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
 
 ## Conclusion
 

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -2,10 +2,10 @@
 [Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break web pages into components. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
 
 ## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages. This library will be suitable for all related online services that are sharing the same style. 
+The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages.
 
 ## Implementation in detail 
-The implementation of atomic design is a process that needs to sort out component category carefully and provide file structure that is ready for generating npm packages 
+The implementation of atomic design is a process of sorting component with categories and a creation of 'package ready' file structure
 
 ### Component category sorting
 Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
@@ -90,11 +90,11 @@ src
   ...
 ```
 Here is how we could export and reuse this library for other online services: 
-* The whole `atoms` folder is the base npm package (library) for the all npm packages.
-* Each component in `molecules` folder would be an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
+* Isolate the whole `atoms` folder, and create the base npm package (library) for the all npm packages.
+* Each component in `molecules` folder would be Isolated as an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
-Once we achieved this library of npm packages, any related online services development should be focus on integrating existing components, building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
+Once we achieved package isolation, this library of npm packages can be used in any related online services development. From this point, we could focus on integrating existing components to the services, building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
 
 ## Conclusion
 

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -5,7 +5,7 @@
 The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages. This library will be suitable for all related online services that are sharing the same style. 
 
 ## Implementation in detail 
-The implementation of atomic design is a process of building a categorized library with npm packages. Thus need to sort out component category carefully and provide file structure that is easy to generate npm packages 
+The implementation of atomic design is a process that needs to sort out component category carefully and provide file structure that is ready for generating npm packages 
 
 ### Component category sorting
 Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
@@ -18,7 +18,7 @@ Component could be identified by its HTML structure.
 Here is a quick checklist to identify simple components:
 
 - Atoms: one HTML tag, no js, no style alteration.
-- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of browser; may have Js, may have style alteration.
+- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of browser; may have Javascript functions, may have style alteration.
 - Organisms: same as molecule, but it consumes the full width of the browser.
 
 For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
@@ -56,7 +56,7 @@ Back to this specific case, it could be that the `organism-a__element` is implem
 </div>
 ```
 
-Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function calls. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
+Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function calls via data communication. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -67,10 +67,10 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 </div>
 ```
 
-With correct categorization, the components can work independently. Now we could start to work on the delivery of our npm packages.
+With correct categorization, the components can be independent from each other. Now we could start to work on the delivery of our npm packages.
 
 ### File structure for npm packages 
-Since the code base is going to become a library, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
+For the file structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
 
 ```bash
 src  
@@ -94,8 +94,8 @@ Here is how we could export and reuse this library for other online services:
 * Each component in `molecules` folder would be an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
-Once we achieved this library of npm packages, any related online services development should be focus on building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
+Once we achieved this library of npm packages, any related online services development should be focus on integrating existing components, building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
 
 ## Conclusion
 
-Atomic design is a concept that aiming at building reusable and consistent library with packages. It generates well organized frond end library for reusing in across different online services.
+Atomic design is a concept that aiming at building reusable and consistent library (with packages). It generates well organized frond end library for reusing in across different online services.
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,14 +1,14 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of break web pages in to components in our development process. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of organizing web development by break web pages into components. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
 
 ## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a library: a bundle of reusable npm packages. This library will be suitable for all related online services that are sharing the same style. 
+The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a categorized library: a bundle of reusable npm packages. This library will be suitable for all related online services that are sharing the same style. 
 
 ## Implementation in detail 
-As we know the implementation of atomic design is a process building a library and its npm packages, it requires careful thinking and structure analyzing. We will need to sort out component category and provide file structure that is easy to generate npm packages 
+The implementation of atomic design is a process of building a categorized library with npm packages. Thus need to sort out component category carefully and provide file structure that is easy to generate npm packages 
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Correctly organized component would be reuse friendly and wrongly implemented component category would lead to massive refactor process or complex modification across different components. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
+Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Unsuitable categorization would lead to massive refactor process or complex modification across different components in the development cycle. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
 
 There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
 
@@ -18,19 +18,19 @@ Component could be identified by its HTML structure.
 Here is a quick checklist to identify simple components:
 
 - Atoms: one HTML tag, no js, no style alteration.
-- Molecules: combine multiple HTML tags, but NOT consuming full width (edge to edge) of browser; may have Js, may have style alteration.
-- Organisms: same as molecule, but it consumes full width of the browser.
+- Molecules: combine multiple HTML tags, but NOT consuming the full width (edge to edge) of browser; may have Js, may have style alteration.
+- Organisms: same as molecule, but it consumes the full width of the browser.
 
-For simple component, this checklist should cover everything. For other complex component, we will need to consider the scope of the component.
+For simple component, this checklist should cover everything. For other complex components, we will need to consider the scope of the component.
 
 #### Scope
-Scope means the control area of the component. This is important because component may include other components. The list below demonstrates how component include works in atomic design 
+Scope means the control area of the component. This is important because component may include other components. The list below demonstrates how component including works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 - Molecules can include other `molecules` `atoms`
 - Atoms can NOT include any elements
 
-Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule to achieve some functions. See sample below.
+Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule. See sample below.
 
 **Incorrect scope** 
 ```html
@@ -43,9 +43,9 @@ Incorrect scope implementation is a very common mistake in component categorizat
 </div>
 ```
 
-This is incorrect because the modification (impact via HTML, CSS Javascript) of `molecule-0` is belong to `molecule-0`. That is the private scope of `molecule-0`. Same thing for `molecule-1`, `molecule-0` should not directly modify `molecule-1`.
+This is incorrect because the modification (impact via HTML, CSS Javascript) of `molecule-0` belongs to the scope of `molecule-0` and it should be private. Same thing for `molecule-1`, `molecule-0` should not directly modify `molecule-1`. This scope control is the base of atomic design: the component should be able to be reuse with minimum dependencies.
 
-In this specific case, it could be that the scope of `molecule-0` is implemented in a inappropriate way. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
+Back to this specific case, it could be that the `organism-a__element` is implemented in a inappropriate scope. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
 ```html
 <div class="organism-a">
   <input class="organism-a__element"/>
@@ -56,7 +56,7 @@ In this specific case, it could be that the scope of `molecule-0` is implemented
 </div>
 ```
 
-Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function call. In other words, replace `organism-a__element` with `molecules-0__element` and implement the update via data.
+Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function calls. In other words, replacing `organism-a__element` with `molecules-0__element` and implement the update via data would solve the problem.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -67,7 +67,7 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 </div>
 ```
 
-With correct categorization, the components can work independently. Now we could start to delivery our npm packages.
+With correct categorization, the components can work independently. Now we could start to work on the delivery of our npm packages.
 
 ### File structure for npm packages 
 Since the code base is going to become a library, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
@@ -91,7 +91,7 @@ src
 ```
 Here is how we could export and reuse this library for other online services: 
 * The whole `atoms` folder is the base npm package (library) for the all npm packages.
-* Each component in `molecules` folder would be an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other molecules as its dependencies as well. 
+* Each component in `molecules` folder would be an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other needed molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
 Once we achieved this library of npm packages, any related online services development should be focus on building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,36 +1,36 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of break web pages in to components in our development process. It is an idea solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of break web pages in to components in our development process. It is an ideal solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
 
 ## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable in development cycle by sorting component based on its scope. Following atomic design, the code base will become a library: a bundle of reusable npm packages. This library will be suitable for all related online services with the same style. 
+The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its category. Following atomic design sorting and its category, the code base will become a library: a bundle of reusable npm packages. This library will be suitable for all related online services that are sharing the same style. 
 
 ## Implementation in detail 
-As we know the implementation of atomic design is a process building a library and its npm packages (to delivery online service), it requires careful thinking and structure analyzing. We will need to sort out component category and provide file structure that is easy to generate npm packages 
+As we know the implementation of atomic design is a process building a library and its npm packages, it requires careful thinking and structure analyzing. We will need to sort out component category and provide file structure that is easy to generate npm packages 
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design structure. Correctly organized component would be reuse friendly and wrongly implemented component category would lead to massive refactor process or complex modification across different components. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
+Figuring out the category of each component is the first and the essential part of achieving atomic design code base. Correctly organized component would be reuse friendly and wrongly implemented component category would lead to massive refactor process or complex modification across different components. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
 
-There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design for our code base, we shall analyze the component in two main areas: structure, scope
+There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design, we shall analyze the component in two main areas: structure, scope
 
 #### Structure
 Component could be identified by its HTML structure. 
 
 Here is a quick checklist to identify simple components:
 
 - Atoms: one HTML tag, no js, no style alteration.
-- Molecules: combine multiple tags, but NOT consuming full width (edge to edge) of browser, may have Js, may have style alteration
-- Organisms: same as molecule, but it consumes full width of the browser
+- Molecules: combine multiple HTML tags, but NOT consuming full width (edge to edge) of browser; may have Js, may have style alteration.
+- Organisms: same as molecule, but it consumes full width of the browser.
 
 For simple component, this checklist should cover everything. For other complex component, we will need to consider the scope of the component.
 
 #### Scope
-Scope means the control area of the component. This is important because component may include other component. The list below demonstrates how component include works in atomic design 
+Scope means the control area of the component. This is important because component may include other components. The list below demonstrates how component include works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 - Molecules can include other `molecules` `atoms`
 - Atoms can NOT include any elements
 
-Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be, when an organism includes a molecule, but it has to directly modify the element inside of molecule to achieve some functions. See sample below.
+Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be: when an organism includes a molecule, it has to directly modify the element inside of molecule to achieve some functions. See sample below.
 
 **Incorrect scope** 
 ```html
@@ -45,7 +45,7 @@ Incorrect scope implementation is a very common mistake in component categorizat
 
 This is incorrect because the modification (impact via HTML, CSS Javascript) of `molecule-0` is belong to `molecule-0`. That is the private scope of `molecule-0`. Same thing for `molecule-1`, `molecule-0` should not directly modify `molecule-1`.
 
-In this specific case, it could mean that the scope of `molecule-0` is implemented in a inappropriate way. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
+In this specific case, it could be that the scope of `molecule-0` is implemented in a inappropriate way. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
 ```html
 <div class="organism-a">
   <input class="organism-a__element"/>
@@ -56,7 +56,7 @@ In this specific case, it could mean that the scope of `molecule-0` is implement
 </div>
 ```
 
-Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components, so that we could achieve the desired style changes or function call. In other words, replace `organism-a__element` with `molecules-0__element` and implement the update via data.
+Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components. With the middleware, we could achieve the desired style changes or function call. In other words, replace `organism-a__element` with `molecules-0__element` and implement the update via data.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -70,7 +70,7 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 With correct categorization, the components can work independently. Now we could start to delivery our npm packages.
 
 ### File structure for npm packages 
-Since the code base is going to become a library with npm packages in atomic design structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a package ready format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
+Since the code base is going to become a library, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a "package ready" format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
 
 ```bash
 src  
@@ -89,12 +89,12 @@ src
   |- organisms
   ...
 ```
-Here is how we could export and reuse this library as npm packages for other online services: 
+Here is how we could export and reuse this library for other online services: 
 * The whole `atoms` folder is the base npm package (library) for the all npm packages.
-* Each component in `molecules` folder would be an individual npm package with the `atoms` package as dependency. As the we covered in **Scope** section, this package could import other molecules as its dependencies as well. 
+* Each component in `molecules` folder would be an individual npm package with the `atoms` package as its dependency. As the we covered in **Scope** section, this package could import other molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
-Once we achieved this library of npm packages, any related online services development should be focus on building new component packages and extending existing library packages. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
+Once we achieved this library of npm packages, any related online services development should be focus on building new component packages and extending existing library. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
 
 ## Conclusion
 

diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1,30 +1,30 @@
 # Implementation of Atomic design
-[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is scalably way of organizing web components in development process. It is an idea solution for large product with multiple online services. This page is a brief of implement atomic design based on my experiences.
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is way of break web pages in to components in our development process. It is an idea solution for large service provider with multiple online services. This page is a brief of how to implement atomic design based on my experiences.
 
 ## What is core concept of atomic design
-The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its scope. Following atomic design, the code base will become a library: a bundle of reusable npm packages that is suitable for all related online services that is sharing the same style. 
+The core concept of atomic design is making design and code base consistent and reusable in development cycle by sorting component based on its scope. Following atomic design, the code base will become a library: a bundle of reusable npm packages. This library will be suitable for all related online services with the same style. 
 
 ## Implementation in detail 
-As we know the implementation of atomic design is a process building a library and its npm packages to delivery online service. It requires careful thinking and overall structure analyzing all the way. We will need to sort out component category and provide file structure that is easy to generate npm packages 
+As we know the implementation of atomic design is a process building a library and its npm packages (to delivery online service), it requires careful thinking and structure analyzing. We will need to sort out component category and provide file structure that is easy to generate npm packages 
 
 ### Component category sorting
-Figuring out the category of each component is the first and the essential part of achieving atomic design structure. Correctly organized component would be reuse friendly in the future development and wrongly implemented component category would lead to massive refactor process or complex modification across different components. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
+Figuring out the category of each component is the first and the essential part of achieving atomic design structure. Correctly organized component would be reuse friendly and wrongly implemented component category would lead to massive refactor process or complex modification across different components. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
 
 There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design for our code base, we shall analyze the component in two main areas: structure, scope
 
 #### Structure
-The structure of component could provide some information that we could use for sorting. 
+Component could be identified by its HTML structure. 
 
 Here is a quick checklist to identify simple components:
 
 - Atoms: one HTML tag, no js, no style alteration.
-- Molecules: combine multiple tags, but NOT consuming full width (edge to edge) of browser, may have Js, may have style alt
+- Molecules: combine multiple tags, but NOT consuming full width (edge to edge) of browser, may have Js, may have style alteration
 - Organisms: same as molecule, but it consumes full width of the browser
 
-For simple component without data communication, this checklist should cover everything. For other complex component, we will need to consider the scope of the component.
+For simple component, this checklist should cover everything. For other complex component, we will need to consider the scope of the component.
 
 #### Scope
-Scope means the control area of the component. This is important because component may be reused by other component. The list below demonstrates how component shall be reused in atomic design 
+Scope means the control area of the component. This is important because component may include other component. The list below demonstrates how component include works in atomic design 
 
 - Organisms can include other `organisms` `molecules` `atoms`
 - Molecules can include other `molecules` `atoms`
@@ -56,7 +56,7 @@ In this specific case, it could mean that the scope of `molecule-0` is implement
 </div>
 ```
 
-Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components, so that we could achieve style changes or function call. In other words, replace `organism-a__element` with `molecules-0__element` and implement the update via data.
+Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components, so that we could achieve the desired style changes or function call. In other words, replace `organism-a__element` with `molecules-0__element` and implement the update via data.
 ```html
 <div class="organism-a">
   <div class="molecule-0">
@@ -70,7 +70,7 @@ Or, it could be the case that our code base requires a middleware (like Redux) t
 With correct categorization, the components can work independently. Now we could start to delivery our npm packages.
 
 ### File structure for npm packages 
-Since the code base is going to become a library with npm packages in atomic design structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a package ready format during the development process. This will make our npm packages easier to generate. Below is a sample file structure that is scalable.
+Since the code base is going to become a library with npm packages in atomic design structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a package ready format during the development process. This will make our npm packages easier to generate. Below is a sample file structure.
 
 ```bash
 src  
@@ -94,10 +94,8 @@ Here is how we could export and reuse this library as npm packages for other onl
 * Each component in `molecules` folder would be an individual npm package with the `atoms` package as dependency. As the we covered in **Scope** section, this package could import other molecules as its dependencies as well. 
 * Same as molecules, each organism could be exported as a npm packages.
 
-Once we achieved this library of npm packages, any related online services development should be focus on building new components packages and extending existing library packages. This will reduce development cycle dramatically and will achieve consistent user experience across the online service with better branded overall image. 
+Once we achieved this library of npm packages, any related online services development should be focus on building new component packages and extending existing library packages. This will reduce development cycle dramatically and will achieve consistent user experience across all online services.
 
 ## Conclusion
 
 Atomic design is a concept that aiming at building reusable and consistent library with packages. It generates well organized frond end library for reusing in across different online services.
-
-Because for the reusability and consistence, it is also suitable for  product based development.  
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1 +1,103 @@
-# Implementation of atomic design
+# Implementation of Atomic design
+[Atomic design](http://bradfrost.com/blog/post/atomic-web-design/) is scalably way of organizing web components in development process. It is an idea solution for large product with multiple online services. This page is a brief of implement atomic design based on my experiences.
+
+## What is core concept of atomic design
+The core concept of atomic design is making design and code base consistent and reusable by sorting component based on its scope. Following atomic design, the code base will become a library: a bundle of reusable npm packages that is suitable for all related online services that is sharing the same style. 
+
+## Implementation in detail 
+As we know the implementation of atomic design is a process building a library and its npm packages to delivery online service. It requires careful thinking and overall structure analyzing all the way. We will need to sort out component category and provide file structure that is easy to generate npm packages 
+
+### Component category sorting
+Figuring out the category of each component is the first and the essential part of achieving atomic design structure. Correctly organized component would be reuse friendly in the future development and wrongly implemented component category would lead to massive refactor process or complex modification across different components. That is why our developers and designers shall work closely and carefully figure out the category of component before the implementation.
+
+There are three main categories in atomic design: atoms, molecules and organisms. To sort out component with atomic design for our code base, we shall analyze the component in two main areas: structure, scope
+
+#### Structure
+The structure of component could provide some information that we could use for sorting. 
+
+Here is a quick checklist to identify simple components:
+
+- Atoms: one HTML tag, no js, no style alteration.
+- Molecules: combine multiple tags, but NOT consuming full width (edge to edge) of browser, may have Js, may have style alt
+- Organisms: same as molecule, but it consumes full width of the browser
+
+For simple component without data communication, this checklist should cover everything. For other complex component, we will need to consider the scope of the component.
+
+#### Scope
+Scope means the control area of the component. This is important because component may be reused by other component. The list below demonstrates how component shall be reused in atomic design 
+
+- Organisms can include other `organisms` `molecules` `atoms`
+- Molecules can include other `molecules` `atoms`
+- Atoms can NOT include any elements
+
+Incorrect scope implementation is a very common mistake in component categorization. It makes component harder or impossible to reusable for our future development. A typical sample of wrong scope usage would be, when an organism includes a molecule, but it has to directly modify the element inside of molecule to achieve some functions. See sample below.
+
+**Incorrect scope** 
+```html
+<div class="organism-a">
+  <div class="molecule-0">
+    <input class="organism-a__element" /> <!-- should not be here -->
+    <div class="molecule-1"></div>
+    <p class="atom"> text, just text</p>
+  </div>
+</div>
+```
+
+This is incorrect because the modification (impact via HTML, CSS Javascript) of `molecule-0` is belong to `molecule-0`. That is the private scope of `molecule-0`. Same thing for `molecule-1`, `molecule-0` should not directly modify `molecule-1`.
+
+In this specific case, it could mean that the scope of `molecule-0` is implemented in a inappropriate way. Placing `organism-a__element` out of `molecule-0` could be one of the solutions.
+```html
+<div class="organism-a">
+  <input class="organism-a__element"/>
+  <div class="molecule-0">
+    <div class="molecule-1"></div>
+    <p class="atom"> text, just text</p>
+  </div>
+</div>
+```
+
+Or, it could be the case that our code base requires a middleware (like Redux) to support passing data between components, so that we could achieve style changes or function call. In other words, replace `organism-a__element` with `molecules-0__element` and implement the update via data.
+```html
+<div class="organism-a">
+  <div class="molecule-0">
+    <input class="molecule-0__element" /> <!-- update style via data -->
+    <div class="molecule-1"></div>
+    <p class="atom"> text, just text</p>
+  </div>
+</div>
+```
+
+With correct categorization, the components can work independently. Now we could start to delivery our npm packages.
+
+### File structure for npm packages 
+Since the code base is going to become a library with npm packages in atomic design structure, we could follow the [Separation of concerns](https://twitter.com/markdalgleish/status/927480707663904768), and placing code and files in a package ready format during the development process. This will make our npm packages easier to generate. Below is a sample file structure that is scalable.
+
+```bash
+src  
+  |- atoms
+  |  |- button
+  |  |  |- index.css
+  |  |  |- index.html
+  |  |- typography
+  ...
+  |- molecules
+  |  |- search-bar
+  |  |  |- index.html
+  |  |  |- index.js
+  |  |  |- index.css
+  ...
+  |- organisms
+  ...
+```
+Here is how we could export and reuse this library as npm packages for other online services: 
+* The whole `atoms` folder is the base npm package (library) for the all npm packages.
+* Each component in `molecules` folder would be an individual npm package with the `atoms` package as dependency. As the we covered in **Scope** section, this package could import other molecules as its dependencies as well. 
+* Same as molecules, each organism could be exported as a npm packages.
+
+Once we achieved this library of npm packages, any related online services development should be focus on building new components packages and extending existing library packages. This will reduce development cycle dramatically and will achieve consistent user experience across the online service with better branded overall image. 
+
+## Conclusion
+
+Atomic design is a concept that aiming at building reusable and consistent library with packages. It generates well organized frond end library for reusing in across different online services.
+
+Because for the reusability and consistence, it is also suitable for  product based development.  
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -1 +1 @@
-#Implementation of atomic design
+# Implementation of atomic design
diff --git a/implementation-of-atmoic-design.md b/implementation-of-atmoic-design.md
@@ -0,0 +1 @@
+#Implementation of atomic design
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		#Implementation of atomic design
		# Implementation of atomic design
No results found