MAGEDOC-3448: Add docs for content type styles

Incorporated more review comments

Author: bdenham

docs/create-basic-content-type/step-5-add-styles.md

@@ -1,22 +1,22 @@
 # Step 5: Add styles
 
-In this step, we will create CSS styles (using LESS) to define the Quote's base appearance as well as a selection of styles that end-users can use for their own customizations.
+In this step, we will create CSS styles (using LESS) to define the Quote's base appearance. We will also create several optional CSS classes that end-users can apply to our Quote.
 
 ## About styles
 
 Page Builder provides two ways to style your content type's HTML templates using LESS: 
 
-1. Using the standard `class` attribute to define the base look and feel of a content type.
+1. You can use the standard `class` attribute to define the base look and feel of a content type.
 
-2. Using the `css` attribute to provide end-users with CSS customization options.
+2. You can use the `css` attribute to provide end-users with CSS customization options.
 
 ### `class` attribute
 
 The `class` attribute is the typical, non-dynamic way to including static class styles in HTML templates. This means the `class` will always be present to define the "built-in" styles for your content type. Styles assigned to `class` cannot be changed by the content editor. In contrast, using the `css` attribute lets users add or change certain CSS class styles to customize your content type.
 
 ### `css` attribute
 
-The `css` attribute is how Page Builder gives end-users the option to customize the appearance of your content type using CSS classes. As the developer, you determine the list of CSS classes you want to provide as options. 
+The `css` attribute gives end-users the option to customize the appearance of your content type using CSS classes. As the developer, you determine the list of CSS classes you want to provide as options. 
 
 Unlike the `class` attribute, which always includes the defined classes, the `css` attribute provides a binding to a form field in your content type. End-users then use that form field to add the CSS class values that are in turn applied to the HTML template.
 
@@ -30,13 +30,13 @@ The `pagebuilder_base_form` has a form field for the `css` attribute already bui
 
 ![Create config file](../images/css-classes-input-field.png)
 
-As the notice below the field indicates, the end-user can enter multiple classes, which are all then applied to the element in the template to which the `css` attribute is bound.
+As the field notice indicates, the end-user can enter more than one CSS class into the field. Page Builder then applies each class to the HTML element you bind with the `css` attribute.
 
 ## Add LESS files
 
 The first thing we need to do is add our LESS files to appropriate places in our module, according to convention. The conventions for LESS files and how they work within Page Builder are identical to how they work in core Magento.
 
-To ensure that Magento can merge your content type styles with all the other styles, you need to add a single LESS file named `_module.less` to both your `adminhtml/web/css/source` and `frontend/web/css/source` directories as shown here:
+To ensure that Magento can merge your content type styles with all the other styles, you must add a single LESS file named `_module.less` to both your `adminhtml/web/css/source` and `frontend/web/css/source` directories as shown here:
 
 ![Create config file](../images/step5-add-styles-module.png)
 
@@ -50,23 +50,25 @@ Magento uses the `_module.less` file to merge your content type's styles into th
 
 ![Create config file](../images/step5-merged-styles.png)
 
-For our Quote content type, add a file called `_import.less` for both the Admin and storefront in the following locations:
+For our Quote content type, add a file named `_import.less` to the `adminhtml/web/css/source/content-type/example-quote/` and `frontend/web/css/source/content-type/example-quote/` areas as shown here:
 
 ![Create config file](../images/step5-add-styles.png)
 
 These files will contain the actual styles for our Quote control type.
 
-You can name your LESS file (or files) whatever you want as long as you import them using the correct path and name in your `_module.less` files. For example, since we are only using one file (`_imports.less`) in each area, the contents of our `_module.less` files for both areas are identical:
+You can name your LESS file (or files) whatever you want, as long as you import them using the correct path and name in your `_module.less` files. For example, since we are only using one file name (`_imports.less`) for the files in each area, the contents of our `_module.less` files for both areas are identical:
 
 ```css
 @import "content-type/example-quote/_import.less";
 ```
 
-If you want to break your styles into multiple LESS files, feel free to do so as long as you import each file in your `_module.less` file to ensure they get merged with the rest of the styles in Magento.
+You can also break your styles into multiple LESS files. Import each file in your `_module.less` file so that they all get merged with the rest of the Magento styles.
+
+If you break your styles into multiple LESS files, make sure you `@import` each file in your `_module.less` file.
 
 ## Add `class` styles
 
-The `class` styles used for our Quote content type are provided in full here:
+The following sample shows the `class` styles used for our Quote content type:
 
 ```css
 // Content type's base styling
@@ -118,7 +120,7 @@ div {
 }
 ```
 
-These styles are referenced by the `class` attributes in both our Admin preview template (`preview.html`) and our master format storefront template (`master.html`) as shown here:
+The `class` attributes reference these styles in both our Admin preview template (`preview.html`) and our master format storefront template (`master.html`) as shown here:
 
 ```html
 <!--preview.html-->
@@ -139,13 +141,13 @@ These styles are referenced by the `class` attributes in both our Admin preview
 </div>
 ```
 
-This all standard stuff for styling the core appearance of our content type. So let's move on to adding the `css` bindings that gives our Quote some end-user customization options.
+Next, we will add the `css` bindings that give our Quote some end-user customization options.
 
 ## Add `css` style binding
 
-Part of using the `css` binding option is deciding what CSS styling options you want to give end-users, unique from the styling and customization options provided by the `pagebuilder_base_form` and `pagebuilder_base_form_with_background_attributes` form fields (such as alignments, borders, paddings, margins, backgrounds, and more). 
+Part of using the `css` binding option is deciding what CSS styling options you want to give end-users. The two base forms (`pagebuilder_base_form` and `pagebuilder_base_form_with_background_attributes`) already provide end-users with several styling options such as alignments, borders, paddings, margins, and various background properties. So you will want to use the `css` binding for other changes not covered by the base forms.
 
-For our Quote content type, we will provide users with the option to change the color of the Quote's text using CSS styles. Let's start by defining our CSS styles in our `_import.less files`.
+For our Quote content type, we will use the `css` binding to enable users to change the color of the Quote's text using CSS styles. Let's start by defining our CSS styles in our `_import.less` files.
 
 ### Define CSS
 
@@ -176,7 +178,7 @@ The simplest way to provide end-user CSS styling for our Quote is to add a text
 </field>
 ```
 
-However, this method puts the burden on the end-user to know what CSS class names they can enter. Even if we give them the name of the classes that can be used, there is the problem of entry errors like misspellings and a variety of other entry problems. So we will not use this method.
+However, this method puts the burden on the end-user to know and successfully enter the valid CSS class names. So we will not use this method.
 
 Instead, we will use a simple `selector` to define and limit the color options available to end-users for coloring our Quote text, as shown here:
 
@@ -222,15 +224,15 @@ Instead, we will use a simple `selector` to define and limit the color options a
 </field>
 ```
 
-When rendered in the form editor, the selector field provides users with a simple color list to select from which applies the class name as the selected value:
+When rendered in the form editor, the selector field provides users with a simple color list. Page Builder applies the class name as the selected value: 
 
 ![Create config file](../images/step5-quote-color-selector.png)
 
 Next we need to setup the bindings.
 
 ### Add configuration bindings
 
-To create the binding between the CSS class values selected in our `quote_css` form field and our template, wee need to do two things:
+To create the binding between the CSS class values selected in our `quote_css` form field and our template, we need to do two things:
 
 1. Add a `<css>` binding element to the `quote` element in our `example_quote.xml` configuration file.
 2. Add a `css` binding attribute to the `<blockquote>` element in our HTML template files (`preview.html` and `master.html`).
@@ -245,7 +247,7 @@ To create the binding between the CSS class values selected in our `quote_css` f
 </element>
 ```
 
-**Template file entry:** Now we want the value from our `quote_css` field to be applied to our Quote's HTML templates. As noted previously, this is done using the `css` attribute (`css="data.quote.css"`) to point to the `<css>` element in the config file, as shown here, applied to the `<blockquote>`:
+**Template file entry:** Now we want the value from our `quote_css` field to be applied to our Quote's HTML templates. As noted previously, this is done using the `css` attribute (`css="data.quote.css"`) to point to the `<css>` element in the config file. In the following example, the `css` attribute has been applied to the `<blockquote>` element:
 
 ```html
 <!--preview.html-->
@@ -258,7 +260,11 @@ To create the binding between the CSS class values selected in our `quote_css` f
 
 ## Quote styles
 
-The `_import.less` file for the Admin preview template is provided here in full: 
+The full file contents for both the `adminhtml` and `frontend` LESS files are provided below.
+
+### LESS for `adminhtml`
+
+The `_import.less` file content for the Admin preview template: 
 
 ```css
 // Content type's base styling
@@ -317,7 +323,9 @@ div {
 .purple-quote { color: #990099; &:before { color: #990099; } }
 ```
 
-The `_import.less` file for the master format storefront template is provided here in full:
+### LESS for `frontend`
+
+The `_import.less` file content for the master format storefront template:
 
 ```css
 // Content type's base styling

docs/create-basic-content-type/step-6-add-icon.md

@@ -1,14 +1,14 @@
 # Step 6: Add an icon
 
-In this last step, we will create a panel icon for our Quote content type so that it has a unique but visually consistent identity alongside Page Builder's native font icons. When finished, the panel icon for our Quote content type will look something like this:
+In this last step, we will create a panel icon for our Quote content type so that it has a unique but visually consistent identity alongside Page Builder's native font icons. When finished, the panel icon for our Quote content type will look like this:
 
 ![Create config file](../images/step6-quote-panel-icon.png)
 
 ## About icons
 
-The icons used for Page Builder's built-in content types are actually font icons. You could create your own font icons and use those within your module in a similar manner, but we recommend a simpler, more straightforward way by using SVG or PNG images instead.
+The icons used for Page Builder's built-in content types are actually font icons. Although you could create your own font icons and use those within your module, we recommend a using SVG or PNG images instead.
 
-A summary of the steps for creating and adding this icon are listed here:
+To create and add an icon, you must:
 
 1. Create your SVG or PNG icon.
 2. Create a CSS class for the icon.