feat(documentation) Styled npm installation instructions

[#98751316]
pivotal-cf · Jul 10, 2015 · aff1dfc · aff1dfc
1 parent ffade41
commit aff1dfc
Show file tree

Hide file tree

Showing 38 changed files with 260 additions and 262 deletions.
diff --git a/src/pivotal-ui/components/alerts/alerts.scss b/src/pivotal-ui/components/alerts/alerts.scss
@@ -10,11 +10,10 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component"></i>
 npm install pui-css-alerts --save
-```
+</code>
 
 Alerts are used to display flash messages to the user. When using alerts with simple one-line
 text, wrap the text in a `<p>` with `.em-high`.
@@ -210,11 +209,10 @@ categories:
   - React Beta
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component"></i>
 npm install pui-react-alerts --save
-```
+</code>
 
 Require the subcomponent:
 

diff --git a/src/pivotal-ui/components/alignment/alignment.scss b/src/pivotal-ui/components/alignment/alignment.scss
@@ -7,11 +7,10 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component"></i>
 npm install pui-react-alignment --save
-```
+</code>
 
 
 The following classes can be used to for horizontal alignment.

diff --git a/src/pivotal-ui/components/avatars/avatars.scss b/src/pivotal-ui/components/avatars/avatars.scss
@@ -9,11 +9,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-avatars --save
-```
+</i>
+</code>
 
 Regular avatars are expected to by 100px by 100px.
 

diff --git a/src/pivotal-ui/components/back-to-top/back-to-top.scss b/src/pivotal-ui/components/back-to-top/back-to-top.scss
@@ -9,11 +9,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-back-to-top --save
-```
+</i>
+</code>
 
 You can use this component to scroll to the top of a page.
 
@@ -34,23 +34,24 @@ categories:
   - React Beta
 ---
 
-You can use this component to scroll to the top of a page.
-
-The button will be fixed to the bottom right hand corner of the page.
-
-You can place the link anywhere in your markup, but best practices are either towards the top or bottom of your markup.
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
+npm install pui-react-back-to-top --save
+</i>
+</code>
 
-Install the component:
+Require the subcomponent:
 
 ```
-npm install pui-react-back-to-top --save
+var BackToTop = require('pui-react-back-to-top').BackToTop;
 ```
 
-Require the component:
+You can use this component to scroll to the top of a page.
+
+The button will be fixed to the bottom right hand corner of the page.
+
+You can place the link anywhere in your markup, but best practices are either towards the top or bottom of your markup.
 
-```
-var BackToTop = require('pui-react-back-to-top');
-```
 
 
 ```react_wrapped_example

diff --git a/src/pivotal-ui/components/backgrounds/backgrounds.scss b/src/pivotal-ui/components/backgrounds/backgrounds.scss
@@ -9,11 +9,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-backgrounds --save
-```
+</i>
+</code>
 
 
 Background color classes can be applied to any element. See [colors][color] for a list of background classes.

diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss
@@ -11,11 +11,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-buttons --save
-```
+</i>
+</code>
 
 Button styles can be applied to any element. Typically you'll want to
 use either a `<button>` or an `<a>` element:
@@ -149,11 +149,11 @@ categories:
   - React Beta
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-react-buttons --save
-```
+</i>
+</code>
 
 Require the subcomponent:
 

diff --git a/src/pivotal-ui/components/code/code.scss b/src/pivotal-ui/components/code/code.scss
@@ -9,11 +9,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-code --save
-```
+</i>
+</code>
 
 
 This is your basic unstyled code sample:

diff --git a/src/pivotal-ui/components/collapse/collapse.scss b/src/pivotal-ui/components/collapse/collapse.scss
@@ -9,11 +9,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-collapse --save
-```
+</i>
+</code>
 
 
 These are frequently used in combination with our panel components. They have a header and body.
@@ -298,11 +298,11 @@ categories:
   - React Beta
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-react-collapse --save
-```
+</i>
+</code>
 
 Require the subcomponent:
 

diff --git a/src/pivotal-ui/components/colors/colors.scss b/src/pivotal-ui/components/colors/colors.scss
@@ -10,11 +10,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-colors --save
-```
+</i>
+</code>
 
 
 

diff --git a/src/pivotal-ui/components/dividers/dividers.scss b/src/pivotal-ui/components/dividers/dividers.scss
@@ -7,11 +7,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-dividers --save
-```
+</i>
+</code>
 
 
 Dividers draw horizontal lines between different content groupings.
@@ -62,11 +62,11 @@ categories:
   - React Beta
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-react-dividers --save
-```
+</i>
+</code>
 
 Require the subcomponent:
 

diff --git a/src/pivotal-ui/components/dropdowns/dropdowns.scss b/src/pivotal-ui/components/dropdowns/dropdowns.scss
@@ -10,11 +10,11 @@ categories:
   - All
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-dropdowns --save
-```
+</i>
+</code>
 
 
 Dropdowns are menus that can be triggered by buttons.
@@ -144,13 +144,13 @@ categories:
   - React Beta
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-react-dropdowns --save
-```
+</i>
+</code>
 
-Require the component:
+Require the subcomponent:
 
 ```
 var Dropdown = require('pui-react-dropdowns').Dropdown;
@@ -493,13 +493,13 @@ categories:
   - React Beta
 ---
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-react-notifications --save
-```
+</i>
+</code>
 
-Require the component:
+Require the subcomponent:
 
 ```
 var Notifications = require('pui-react-notifications');
@@ -538,7 +538,7 @@ name: alert_notifications_react
 parent: notifications_react
 ---
 
-Require the component:
+Require the subcomponent:
 
 ```
 var AlertNotifications = require('pui-react-notifications').AlertNotifications;

diff --git a/src/pivotal-ui/components/ellipsis/ellipsis.scss b/src/pivotal-ui/components/ellipsis/ellipsis.scss
@@ -11,11 +11,11 @@ categories:
 ---
 
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-ellipsis --save
-```
+</i>
+</code>
 
 
 The type `.type-ellipsis-1-line` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.

diff --git a/src/pivotal-ui/components/embeds/embeds.scss b/src/pivotal-ui/components/embeds/embeds.scss
@@ -16,11 +16,11 @@ parent: embed
 ---
 
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-css-embeds --save
-```
+</i>
+</code>
 
 
 Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

diff --git a/src/pivotal-ui/components/expander/expander.scss b/src/pivotal-ui/components/expander/expander.scss
@@ -7,13 +7,13 @@ categories:
 ---
 
 
-Install the component:
-
-```
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
 npm install pui-react-expander --save
-```
+</i>
+</code>
 
-Require the component:
+Require the subcomponent:
 
 ```
 var ExpanderContent = require('pui-react-expander').ExpanderContent;