Merge pull request #248 from edx/talbs/fix-copy

Patterns: Copy Redux

CHANGELOG.md

@@ -5,6 +5,11 @@ Nothing yet
 
 - - -
 
+## 0.7.5 (2015-12-29)
+* simplifying and standardizing copy element syntax
+
+- - -
+
 ## 0.7.4 (2015-12-29)
 * correcting styling for disabled enhanced radio button
 

_includes/footer.html

@@ -1,5 +1,5 @@
 <footer class="pldoc-footer-site">
     <div class="pldoc-footer-site-copyright">
-        <p class="pldoc-copy copy copy-micro">&copy; <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time> edX. All rights reserved.</p>
+        <p class="pldoc-copy copy-micro">&copy; <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time> edX. All rights reserved.</p>
     </div>
 </footer>

_includes/header.html

@@ -12,5 +12,5 @@ <h2 class="pldoc-header-site-title">
         </a>
     </h2>
     {% endif %}
-    <span class="pldoc-title-description copy copy-base">{{ site.tagline }}</span>
+    <span class="pldoc-title-description copy-base">{{ site.tagline }}</span>
 </header>

_includes/pattern.html

@@ -4,7 +4,7 @@
         <header class="pldoc-pattern-header">
             <h1 class="pldoc-heading pldoc-pattern-title hd-4">{{ post.title }}</h1>
 
-            <ul class="pldoc-list pldoc-pattern-meta copy copy-micro de-emphasized">
+            <ul class="pldoc-list pldoc-pattern-meta copy-micro de-emphasized">
                 <li class="meta meta-updated">
                     <span class="pldoc-pattern-meta-updated-label">Last updated on </span>
                     <time class="pldoc-pattern-meta-updated-value" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%-m/%-d/%Y" }}</time>
@@ -26,7 +26,7 @@ <h1 class="pldoc-heading pldoc-pattern-title hd-4">{{ post.title }}</h1>
         </header>
 
         <div class="pldoc-pattern-info">
-            <p class="copy copy-base">{{post.info}}</p>
+            <p class="copy-base">{{post.info}}</p>
         </div>
 
         {% if post.ui-toolkit-component %}
@@ -93,7 +93,7 @@ <h2 class="pldoc-heading pldoc-tab-heading pldoc-pattern-markup-title">{{post.ti
                     <h2 class="pldoc-heading pldoc-tab-heading pldoc-pattern-styling-title">{{post.title}} Style</h2>
 
                     <div class="pldoc-tab-content">
-                        <p class="copy copy-base">View <a class="pldoc-link" href="{{site.data.edx-pattern-library.url_github}}{{site.data.edx-pattern-library.path_styles}}{{post.url_styles}}">the original source of the CSS as SCSS</a> in this project's repo.</p>
+                        <p class="copy-base">View <a class="pldoc-link" href="{{site.data.edx-pattern-library.url_github}}{{site.data.edx-pattern-library.path_styles}}{{post.url_styles}}">the original source of the CSS as SCSS</a> in this project's repo.</p>
                     </div>
                 </div>
                 {% endif %}

_posts/patterns/2015-04-15-icons.md

@@ -21,7 +21,7 @@ info:               Icons are used to clearly and visually represent some inform
 
 <h3 class="hd-6 example-set-hd">Using Icons (Decorative and as part of controls/content)</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>Icons can be used as both visual decorators or as tangible parts of a UI's controls and content. In the latter case, a fallback method is needed to communicate the icon's purpose/content. Please see the following examples for cases: </p>
 </div>
 

_posts/patterns/2015-04-27-copy.md

@@ -20,74 +20,74 @@ info:           Copy encapsulates many of the basic text rendered in our content
 
 <h3 class="hd-6 example-set-hd">Lead Copy</h3>
 <div class="example-set">
-    <div class="copy copy-lead">
+    <div class="copy-lead">
         <p>Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (lead copy)</p>
     </div>
 
-    <div class="copy copy-lead emphasized">
+    <div class="copy-lead emphasized">
         <p>Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (emphasized lead copy)</p>
 
-    <div class="copy copy-lead de-emphasized">
+    <div class="copy-lead de-emphasized">
         <p>Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (de-emphasized lead copy)</p>
     </div>
 </div>
 
 <h3 class="hd-6 example-set-hd">Large Copy</h3>
 <div class="example-set">
-    <div class="copy copy-large">
+    <div class="copy-large">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (large copy)</p>
     </div>
 
-    <div class="copy copy-large emphasized">
+    <div class="copy-large emphasized">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (emphasized large copy)</p>
     </div>
 
-    <div class="copy copy-large de-emphasized">
+    <div class="copy-large de-emphasized">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (de-emphasized large copy)</p>
     </div>
 </div>
 
 <h3 class="hd-6 example-set-hd">Base Copy</h3>
 <div class="example-set">
-    <div class="copy copy-base">
+    <div class="copy-base">
         <p>Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (base copy)</p>
     </div>
 
-    <div class="copy copy-base emphasized">
+    <div class="copy-base emphasized">
         <p>Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (emphasized base copy)</p>
     </div>
 
-    <div class="copy copy-base de-emphasized">
+    <div class="copy-base de-emphasized">
         <p>Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (de-emphasized base copy)</p>
     </div>
 </div>
 
 <h3 class="hd-6 example-set-hd">Meta Copy</h3>
 <div class="example-set">
-    <div class="copy copy-meta">
+    <div class="copy-meta">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (meta copy)</p>
     </div>
 
-    <div class="copy copy-meta emphasized">
+    <div class="copy-meta emphasized">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (emphasized meta copy)</p>
     </div>
 
-    <div class="copy copy-meta de-emphasized">
+    <div class="copy-meta de-emphasized">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (de-emphasized meta copy)</p>
     </div>
 </div>
 
 <h3 class="hd-6 example-set-hd">Micro Copy</h3>
 <div class="example-set">
-    <div class="copy copy-micro">
+    <div class="copy-micro">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (micro copy)</p>
     </div>
 
-    <div class="copy copy-micro emphasized">
+    <div class="copy-micro emphasized">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (emphasized micro copy)</p>
     </div>
 
-    <div class="copy copy-micro de-emphasized">
+    <div class="copy-micro de-emphasized">
         <p>Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (de-emphasized micro copy)</p>
     </div>
 </div>

_posts/patterns/2015-05-12-forms.md

@@ -443,7 +443,7 @@ info:               Forms allow users to interact with the interface, set prefer
 <div class="example-set">
     <form class="form">
         <h5 class="hd-5">Create an account</h5>
-        <p class="copy copy-base">Before you can continue with ACME learning, you'll need to create an account with us. They're free and we don't spam you with ACMESpam.</p>
+        <p class="copy-base">Before you can continue with ACME learning, you'll need to create an account with us. They're free and we don't spam you with ACMESpam.</p>
         <fieldset class="form-group">
             <legend class="form-group-hd">Required information</legend>
             <div class="field">

_posts/patterns/2015-07-01-grid.md

@@ -22,7 +22,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Basic Grid</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>The basic grid gives you twelve columns to work with across all various breakpoints.</p>
 </div>
 
@@ -82,7 +82,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Basic Grid (with column shifts)</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>The Basic Grid with column shifts allows you to create a two-column layout where there is (column-sized) space before (pre-*) or after (post-*) the content.</p>
 </div>
 
@@ -186,7 +186,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Utility Class-based Grid</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>The grid can be used via specific classes on DOM elements. Defining rows, columns, and pre/post shifting of columns are all available.</p>
 </div>
 
@@ -344,7 +344,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Utility Class-based Responsive Grid</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>Columns can also be scoped to specific responsive breakpoints. Column utility classes on DOM elements are prefixed with one of the preset responsive breakpoints.</p>
 </div>
 
@@ -406,7 +406,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Semantic-based Grid</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>The grid can be used and layouts defined purely using Sass as well. This reduces the number of DOM elements needed to render content and styling while allowing us to choose the most appropriate and semantic HTML elements for each situation.</p>
 </div>
 
@@ -475,7 +475,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Semantic Gallery</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>Galleries are helpers that use the grid to columns and rows for homogenous content (such as photo galleries). Column count is defined at the gallery level and visual row breaks are managed automatically.</p>
 
     <p>Like columns and rows, a gallery can be defined at the Sass level.</p>
@@ -581,7 +581,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Utility Class-based Gallery</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>Galleries can be used via specific classes on DOM elements. Defining a gallery, its children (gallery items), and columns items should span are all available for customization.</p>
 </div>
 
@@ -809,7 +809,7 @@ info:               A responsive, mobile first fluid grid system, based on Susy
 
 <h3 class="hd-6 example-set-hd">Utility Class-based Responsive Gallery</h3>
 
-<div class="example-set-description copy copy-meta">
+<div class="example-set-description copy-meta">
     <p>Galleries can also be scoped to specific responsive breakpoints. Gallery utility classes on DOM elements are prefixed with one of the preset responsive breakpoints.</p>
 </div>