Updated all links to use CSS ms-Link

ngOfficeUIFabric · Sep 23, 2015 · aed0824 · aed0824
1 parent 9b03c1b
commit aed0824
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 91 deletions.
diff --git a/components/button/index.html b/components/button/index.html
@@ -28,6 +28,7 @@
   <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
 
   <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
+  <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />
   <link rel="stylesheet" href="/css/styles.min.css" />
 </head>
 
@@ -80,11 +81,11 @@
 
       <a name="Usage"></a>
       <p class="ms-font-xxl">Usage</p>
-      <p class="ms-font-l">The CSS classes to implement buttons are not scoped to specific HTML elements, but as stated above <span class="ms-fontWeight-semibold">it's recommended to use <code>&lt;button&gt;</code> elements when possible</span> to match cross-browser rendering just like the <a href="http://getbootstrap.com/css/#buttons">Bootstrap button guidance states</a>. The action buttons below show using the <code>&lt;button&gt;</code>, <code>&lt;a&gt;</code> and <code>&lt;div&gt;</code> elements, but the rest of this page will focus on using just the <code>&lt;button&gt;</code> element.</p>
+      <p class="ms-font-l">The CSS classes to implement buttons are not scoped to specific HTML elements, but as stated above <span class="ms-fontWeight-semibold">it's recommended to use <code>&lt;button&gt;</code> elements when possible</span> to match cross-browser rendering just like the <a href="http://getbootstrap.com/css/#buttons" class="ms-Link">Bootstrap button guidance states</a>. The action buttons below show using the <code>&lt;button&gt;</code>, <code>&lt;a&gt;</code> and <code>&lt;div&gt;</code> elements, but the rest of this page will focus on using just the <code>&lt;button&gt;</code> element.</p>
       <p class="ms-font-l">To create a button, simply add the CSS class <code>.ms-Button</code> to it. Add additional classes to make it an action, primary, hero, compound or command button or to make it disabled.</p>
       <p class="ms-font-l">Add text to the button by adding an inner <code>&lt;span&gt;</code> element to the <code>&lt;button&gt;</code> element with the CSS class <code>.ms-Button-label</code>.</p>
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="ActionButtons"></a>
       <p class="ms-font-xxl">Action Buttons</p>
@@ -99,7 +100,7 @@
       <p data-height="171" data-theme-id="19054" data-slug-hash="epzryV" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/epzryV/'>Office UI Fabric - Button (Action)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="CommandButtons"></a>
       <p class="ms-font-xxl">Command Buttons</p>
@@ -110,7 +111,7 @@
       <p data-height="266" data-theme-id="19054" data-slug-hash="MaedKX" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/MaedKX/'>Office UI Fabric - Button (Command)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="CompoundButtons"></a>
       <p class="ms-font-xxl">Compound Buttons</p>
@@ -122,12 +123,12 @@
       <p data-height="361" data-theme-id="19054" data-slug-hash="XmKwjO" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/XmKwjO/'>Office UI Fabric - Button (Command)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="HeroButtons"></a>
       <p class="ms-font-xxl">Hero Buttons</p>
       <p class="ms-font-l">Hero buttons allow you to add icons and act more like links than buttons. Like action buttons, they be both enabled and disabled. These buttons will not render a description like some of the other buttons.</p>
-      <p class="ms-font-l">To add an icon to the button, <code>&lt;span&gt;</code> element to the <code>&lt;button&gt;</code> element with the CSS class <code>.ms-Button-icon</code>, then add one of the supported icons listed below using the same syntax you add regular <a href="/features/icons.html">icons</a>.</p>
+      <p class="ms-font-l">To add an icon to the button, <code>&lt;span&gt;</code> element to the <code>&lt;button&gt;</code> element with the CSS class <code>.ms-Button-icon</code>, then add one of the supported icons listed below using the same syntax you add regular <a href="/features/icons.html" class="ms-Link">icons</a>.</p>
 
       <!-- codepen snippet -->
       <p data-height="271" data-theme-id="19054" data-slug-hash="ojLdJr" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/ojLdJr/'>Office UI Fabric - Button (Hero)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
@@ -257,7 +258,7 @@
         </ul>
       </div>
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
     </article>
   </div>

diff --git a/components/choice-field/index.html b/components/choice-field/index.html
@@ -84,15 +84,15 @@
         <li class="ms-font-l ms-fontWeight-semibold">Radio button group</li>
       </ul>
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="Usage"></a>
       <p class="ms-font-xxl">Usage</p>
       <p class="ms-font-l">The <span class="ms-fontWeight-semibold">radio button</span> and <span class="ms-fontWeight-semibold">checkbox</span> choice field options are implemented in similar ways, while the <span class="ms-fontWeight-semibold">radio button group</span> is implemented a bit diffrently.</p>
       <p class="ms-font-l">To create a <span class="ms-fontWeight-semibold">radio button</span> and <span class="ms-fontWeight-semibold">checkbox</span> choice field you will surround a pair of <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements within a <code>&lt;div&gt;</code> and decorate each of these element with specific CSS classes to render them appropriatly.</p>
       <p class="ms-font-l"><span class="ms-fontWeight-semibold">Radio button groups</span> are implemented in a similar way except you will wrap all the controls in another <code>&lt;div&gt;</code> and decorate each of the input controls with the CSS class <code>.ms-ChoiceFieldGroup</code> to group them together.</p>
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="RadioButtons"></a>
       <p class="ms-font-xxl">Radio Buttons</p>
@@ -101,7 +101,7 @@
       <p data-height="302" data-theme-id="19054" data-slug-hash="JYKgPp" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/JYKgPp/'>Office UI Fabric - Choice Field (Radio button)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="Checkboxes"></a>
       <p class="ms-font-xxl">Checkboxs</p>
@@ -110,7 +110,7 @@
       <p data-height="327" data-theme-id="19054" data-slug-hash="OyXKJe" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/OyXKJe/'>Office UI Fabric - Choice Field (Checkbox)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="RadioButtonGroup"></a>
       <p class="ms-font-xxl">Radio Button Group</p>
@@ -119,7 +119,7 @@
       <p data-height="410" data-theme-id="19054" data-slug-hash="gaMVby" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/gaMVby/'>Office UI Fabric - Choice Field (Radio button group)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
     </article>
   </div>

diff --git a/components/form-field-label/index.html b/components/form-field-label/index.html
@@ -76,7 +76,7 @@
       <p class="ms-font-su">Components <i class="ms-Icon ms-Icon--caretRight" aria-hidden="true"></i> Form Field Label</p>
       <p class="ms-font-l">The form field label control is commonly used in different forms.</p>
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="Usage"></a>
       <p class="ms-font-xxl">Usage</p>
@@ -87,7 +87,7 @@
       <p data-height="266" data-theme-id="19054" data-slug-hash="Xmjrrx" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/Xmjrrx/'>Office UI Fabric - Form Field Label</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
     </article>
   </div>

diff --git a/components/search-box/index.html b/components/search-box/index.html
@@ -76,17 +76,17 @@
       <p class="ms-font-su">Components <i class="ms-Icon ms-Icon--caretRight" aria-hidden="true"></i> Search Box</p>
       <p class="ms-font-l">The search box control is used to let users search an application.</p>
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
       <a name="Usage"></a>
       <p class="ms-font-xxl">Usage</p>
-      <p class="ms-font-l">You will want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: <a href="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/dist/components/SearchBox/Jquery.SearchBox.js">Jquery.SearchBox.js</a></p>
+      <p class="ms-font-l">You will want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: <a href="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/dist/components/SearchBox/Jquery.SearchBox.js" class="ms-Link">Jquery.SearchBox.js</a></p>
 
       <!-- codepen snippet -->
       <p data-height="197" data-theme-id="19054" data-slug-hash="YyGzRv" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/YyGzRv/'>Office UI Fabric - Searchbox</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
       <!-- /codepen snippet -->
 
-      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p>
+      <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
 
     </article>
   </div>