inner > nr

Author: lbliii

content/clickables/_index.md

@@ -10,15 +10,15 @@ A `button` can be used in a Spread or a Stack. They automatically align text to
 
 ```html
 <section class="spread"> 
-    <div class="spread-center inner-s-1 inner-rounded-4">
+    <div class="spread-center nr-s-1 nr-rounded-4">
         <button class=" black xs"> Get Started</button>
         <button class=" white xs"> Get Started</button>
         <button class=" red xs"> Get Started</button>
         <button class=" blue xs"> Get Started</button>
         <button class=" green xs"> Get Started</button>
         <button class=" yellow xs"> Get Started</button>
     </div>
-    <div class="stack-center inner-s-1 inner-rounded-4">
+    <div class="stack-center nr-s-1 nr-rounded-4">
         <button class=" black xs"> Get Started</button>
         <button class=" white xs"> Get Started</button>
         <button class=" red xs"> Get Started</button>
@@ -38,16 +38,16 @@ A `label` can be used in a Spread or a Stack. They automatically align text to t
 {{< docs/labels-colors >}}
 
 ```html
-<section class="spread inner-pinned-top"> 
-    <div class="spread-left inner-s-1">
+<section class="spread nr-pinned-top"> 
+    <div class="spread-left nr-s-1">
         <div class="label black xs"> Dog</div>
         <div class="label white xs"> Cat</div>
         <div class="label red xs"> Pamplemousse</div>
         <div class="label blue xs"> Pokemon</div>
         <div class="label green xs"> Wildlding</div>
         <div class="label yellow xs"> Unknown</div>
     </div>
-    <div class="stack-center inner-s-1">
+    <div class="stack-center nr-s-1">
         <div class="label black xs"> Dog</div>
         <div class="label white xs"> Cat</div>
         <div class="label red xs"> Pamplemousse</div>
@@ -63,14 +63,14 @@ A `label` can be used in a Spread or a Stack. They automatically align text to t
 Links can either use their default styling or have their styling overriden by `color`, `label`, and `button` classes.
 
 ```html
-<section class="spread inner-pinned-top"> 
-    <div class="spread-left inner-s-1">
+<section class="spread nr-pinned-top"> 
+    <div class="spread-left nr-s-1">
         <a class="xs" href="google.com"> default link</a>
         <a class="black xs" href="google.com"> colored link</a>
         <a class="white xs text-right" href="google.com"> link right </a>
         <a class="red xs text-center" href="google.com"> link center </a>
     </div>
-    <div class="stack inner-s-1">
+    <div class="stack nr-s-1">
        <a class="black xs" href="google.com"> link</a>
         <a class="white xs text-right" href="google.com"> link</a>
         <a class="red xs text-center" href="google.com"> link</a>

content/colors/_index.md

@@ -213,7 +213,7 @@ Ghouls have a set maximum height and width so that you can easily create blocks
 #### Circles 
 
 ```html
-<section class="spread-center inner-m-1 ghouls-1">
+<section class="spread-center nr-m-1 ghouls-1">
     <div class="button red rounded-7 "></div>
     <div class="button gray rounded-7 "></div>
     <div class="button green rounded-7 "></div>
@@ -225,7 +225,7 @@ Ghouls have a set maximum height and width so that you can easily create blocks
 #### Squares 
 
 ```html
-<section class="spread-center inner-m-1 ghouls-4">
+<section class="spread-center nr-m-1 ghouls-4">
     <div class="button red"></div>
     <div class="button gray"></div>
     <div class="button green"></div>

content/spacing/_index.md

@@ -20,7 +20,7 @@ weight: 3
 
 ## Margin 
 
-Use direct margins to set the margin on a specific element.  Direct margins utilize `!important` to override inner-margin settings when necessary.
+Use direct margins to set the margin on a specific element.  Direct margins utilize `!important` to override nr-margin settings when necessary.
 
 |Full|Left|Right|Top|Bottom|
 |-|-|-|-|-|
@@ -39,19 +39,19 @@ Use inner  margins to set the margin for all direct child elements.
 
 |Full|Left|Right|Top|Bottom|
 |-|-|-|-|-|
-|`inner-m-1`|`inner-ml-1`|`inner-mr-1`|`inner-mt-1`|`inner-mb-1`|
-|`inner-m-2`|`inner-ml-2`|`inner-mr-2`|`inner-mt-2`|`inner-mb-2`|
-|`inner-m-3`|`inner-ml-3`|`inner-mr-3`|`inner-mt-3`|`inner-mb-3`|
-|`inner-m-4`|`inner-ml-4`|`inner-mr-4`|`inner-mt-4`|`inner-mb-4`|
-|`inner-m-5`|`inner-ml-5`|`inner-mr-5`|`inner-mt-5`|`inner-mb-5`|
-|`inner-m-6`|`inner-ml-6`|`inner-mr-6`|`inner-mt-6`|`inner-mb-6`|
-|`inner-m-7`|`inner-ml-7`|`inner-mr-7`|`inner-mt-7`|`inner-mb-7`|
+|`nr-m-1`|`nr-ml-1`|`nr-mr-1`|`nr-mt-1`|`nr-mb-1`|
+|`nr-m-2`|`nr-ml-2`|`nr-mr-2`|`nr-mt-2`|`nr-mb-2`|
+|`nr-m-3`|`nr-ml-3`|`nr-mr-3`|`nr-mt-3`|`nr-mb-3`|
+|`nr-m-4`|`nr-ml-4`|`nr-mr-4`|`nr-mt-4`|`nr-mb-4`|
+|`nr-m-5`|`nr-ml-5`|`nr-mr-5`|`nr-mt-5`|`nr-mb-5`|
+|`nr-m-6`|`nr-ml-6`|`nr-mr-6`|`nr-mt-6`|`nr-mb-6`|
+|`nr-m-7`|`nr-ml-7`|`nr-mr-7`|`nr-mt-7`|`nr-mb-7`|
 
 --- 
 
 ## Padding 
 
-Use direct padding to set the padding on a specific element.  Direct padding utilizes `!important` to override inner-padding settings when necessary.
+Use direct padding to set the padding on a specific element.  Direct padding utilizes `!important` to override nr-padding settings when necessary.
 
 |Full|Left|Right|Top|Bottom|
 |-|-|-|-|-|
@@ -70,11 +70,11 @@ Use inner padding to set the padding for all direct child elements.
 
 |Full|Left|Right|Top|Bottom|
 |-|-|-|-|-|
-|`inner-p-1`|`inner-pl-1`|`inner-pr-1`|`inner-pt-1`|`inner-pb-1`|
-|`inner-p-2`|`inner-pl-2`|`inner-pr-2`|`inner-pt-2`|`inner-pb-2`|
-|`inner-p-3`|`inner-pl-3`|`inner-pr-3`|`inner-pt-3`|`inner-pb-3`|
-|`inner-p-4`|`inner-pl-4`|`inner-pr-4`|`inner-pt-4`|`inner-pb-4`|
-|`inner-p-5`|`inner-pl-5`|`inner-pr-5`|`inner-pt-5`|`inner-pb-5`|
-|`inner-p-6`|`inner-pl-6`|`inner-pr-6`|`inner-pt-6`|`inner-pb-6`|
-|`inner-p-7`|`inner-pl-7`|`inner-pr-7`|`inner-pt-7`|`inner-pb-7`|
+|`nr-p-1`|`nr-pl-1`|`nr-pr-1`|`nr-pt-1`|`nr-pb-1`|
+|`nr-p-2`|`nr-pl-2`|`nr-pr-2`|`nr-pt-2`|`nr-pb-2`|
+|`nr-p-3`|`nr-pl-3`|`nr-pr-3`|`nr-pt-3`|`nr-pb-3`|
+|`nr-p-4`|`nr-pl-4`|`nr-pr-4`|`nr-pt-4`|`nr-pb-4`|
+|`nr-p-5`|`nr-pl-5`|`nr-pr-5`|`nr-pt-5`|`nr-pb-5`|
+|`nr-p-6`|`nr-pl-6`|`nr-pr-6`|`nr-pt-6`|`nr-pb-6`|
+|`nr-p-7`|`nr-pl-7`|`nr-pr-7`|`nr-pt-7`|`nr-pb-7`|
 

content/spreads/_index.md

@@ -27,7 +27,7 @@ A generic spread fills its container's width; if child elements are present, the
 Spreads utilize cascades to push standardized styles to child elements. This makes it quick and easy to whip up a series of buttons or cards.
 
 ```html
-    <section class="spread purple inner-s-1"> 
+    <section class="spread purple nr-s-1"> 
         <div class="white"> one </div>
         <div class="white"> two </div>
         <div class="white"> three </div>
@@ -121,10 +121,10 @@ Notice in each example that you control set the mobile size via `is-fullfsize-mo
 ```html
 <section class="spread purple ">
     <div class="is-fullsize-mobile"> 
-        <div class="brighten-1 inner-p-2">
+        <div class="brighten-1 nr-p-2">
             <h1> petals on a wet,<br> black bough.</h1>
             <h2 class="subtitle-2"> -Ezra Pound</h2>
-            <section class="spread-left inner-fit inner-m-1 inner-p-2 inner-rounded-1">
+            <section class="spread-left nr-fit nr-m-1 nr-p-2 nr-rounded-1">
                     <button class="button s outlined "> Get Started </button>
                     <button class="button s darken-2"> Live Demo</button>
             </section>
@@ -140,12 +140,12 @@ Notice in each example that you control set the mobile size via `is-fullfsize-mo
 ### Blade Example
 
 ```html
-<section class="spread inner-pinned-center purple p-4">
+<section class="spread nr-pinned-center purple p-4">
     <div class="text-center is-fullsize-mobile">
         <h1 > Mr. Meowgi</h1>
         <h2 class="subtitle-2 m"> is a russian blue cat.</h2>
     </div>
-    <div class="spread rounded-2 display-pattern py-2 inner-m-3 inner-p-2 inner-fullsize-mobile">
+    <div class="spread rounded-2 display-pattern py-2 nr-m-3 nr-p-2 nr-fullsize-mobile">
         <div class="text-center white"> 
             <p>Meow.</p>
         </div> 

content/stacks/_index.md

@@ -11,7 +11,7 @@ A generic stack fills its container's width; if child elements are present, they
 
 
 ```html
-<section class="stack purple inner-s-1">
+<section class="stack purple nr-s-1">
     <div class="white"> Hello</div>
     <div class="white text-right"> I'm over here now</div>
     <div class="white text-center"> now I'm feeling centered</div>
@@ -30,15 +30,15 @@ Directional stacks shift elements **left**, **right**, and **center**. They do n
 
 ```html
 <section class="purple stack-left">
-    <div class="white m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="white m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
-    <div class="black m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="black m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
-    <div class="white m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="white m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
@@ -51,15 +51,15 @@ Directional stacks shift elements **left**, **right**, and **center**. They do n
 
 ```html
 <section class="purple stack-right">
-    <div class="white m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="white m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
-    <div class="black m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="black m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
-    <div class="white m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="white m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
@@ -72,15 +72,15 @@ Directional stacks shift elements **left**, **right**, and **center**. They do n
 
 ```html
 <section class="purple stack-center">
-    <div class="white m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="white m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
-    <div class="black m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="black m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>
-    <div class="white m-1 p-1 inner-s-1 rounded-3"> 
+    <div class="white m-1 p-1 nr-s-1 rounded-3"> 
         <h1>Hello, Dolly!</h1>
         <p> It's so nice to have you back where you belong.</p>
     </div>

content/text/_index.md

@@ -29,9 +29,9 @@ weight: 4
 |`s`|`thin`|`lower-case`|`text-left`|
 |`m`|`light`|`capitalize`|`text-center`|
 |`l`|`normal`||`text-justify`|
-|`xl`|`medium`||`inner-text-left`|
-|`xxl`|`bold`||`inner-text-right`|
-|`xxxl`|`extra-bolt`||`inner-text-center`|
+|`xl`|`medium`||`nr-text-left`|
+|`xxl`|`bold`||`nr-text-right`|
+|`xxxl`|`extra-bolt`||`nr-text-center`|
 ||`hefty`|||
 
 

content/traits/_index.md

@@ -10,7 +10,7 @@ weight: 6
 |Left|Right|Up|Down|
 |-|-|-|-|
 |`move-l`|`move-r`|`move-u`|`move-d`|
-|`inner-move-l`|`inner-move-r`|`inner-move-u`|`inner-move-d`|
+|`nr-move-l`|`nr-move-r`|`nr-move-u`|`nr-move-d`|
 
 ### Outlined 
 
@@ -25,9 +25,9 @@ weight: 6
 
 |Options|Description|
 |-|-|
-|`inner-outlined`|`> * { border: 1px solid currentColor; }`|
-|`inner-outlined-black`|`> * { border: 1px solid #000; }`|
-|`inner-outlined-white`|`> * { border: 1px solid #fff; }`|
+|`nr-outlined`|`> * { border: 1px solid currentColor; }`|
+|`nr-outlined-black`|`> * { border: 1px solid #000; }`|
+|`nr-outlined-white`|`> * { border: 1px solid #fff; }`|
 
 ### Rounded 
 
@@ -47,14 +47,14 @@ weight: 6
 
 |Options|Description|
 |-|-|
-|`inner-rounded-1`|`> * { border-radius: 5px; }`|
-|`inner-rounded-2`|`> * { border-radius: 10px; }`|
-|`inner-rounded-3`|`> * { border-radius: 15px; }`|
-|`inner-rounded-4`|`> * { border-radius: 20px; }`|
-|`inner-rounded-5`|`> * { border-radius: 25px; }`|
-|`inner-rounded-6`|`> * { border-radius: 30px; }`|
-|`inner-rounded-7`|`> * { border-radius: 35px; }`|
-|`inner-rounded-7`|`> * { border-radius: 100%; }`|
+|`nr-rounded-1`|`> * { border-radius: 5px; }`|
+|`nr-rounded-2`|`> * { border-radius: 10px; }`|
+|`nr-rounded-3`|`> * { border-radius: 15px; }`|
+|`nr-rounded-4`|`> * { border-radius: 20px; }`|
+|`nr-rounded-5`|`> * { border-radius: 25px; }`|
+|`nr-rounded-6`|`> * { border-radius: 30px; }`|
+|`nr-rounded-7`|`> * { border-radius: 35px; }`|
+|`nr-rounded-7`|`> * { border-radius: 100%; }`|
 
 
 ### Shadow
@@ -120,11 +120,11 @@ weight: 6
 
 |Options|Description|
 |---|----|
-|`inner-pinned-top`| `align-items: flex-start;`|
-|`inner-pinned-bottom`| `align-items: flex-end;`|
-|`inner-pinned-center`| `align-items: center;`|
-|`inner-pinned-stretch`| `align-items: stretch;`|
-|`inner-pinned-baseline`| `align-items: baseline;`|
+|`nr-pinned-top`| `align-items: flex-start;`|
+|`nr-pinned-bottom`| `align-items: flex-end;`|
+|`nr-pinned-center`| `align-items: center;`|
+|`nr-pinned-stretch`| `align-items: stretch;`|
+|`nr-pinned-baseline`| `align-items: baseline;`|
 
 
 {{<  docs/spread-inner-pinned>}}
@@ -145,9 +145,9 @@ weight: 6
 |Mobile|Tablet|Touch|Desktop|
 |---|----|---|---|
 |(<768px)|(>768px <1024px)|(<1024px)|(>1024px)|
-|`inner-fullsize-mobile`|`inner-fullsize-tablet` |`inner-fullsize-touch`|`inner-fullsize-desktop`|
-|`inner-hidden-mobile`|`inner-hidden-tablet` |`inner-hidden-touch`|`inner-hidden-desktop`|
-|`inner-invisible-mobile`|`inner-invisible-tablet` |`inner-invisible-touch`|`inner-invisible-desktop`|
+|`nr-fullsize-mobile`|`nr-fullsize-tablet` |`nr-fullsize-touch`|`nr-fullsize-desktop`|
+|`nr-hidden-mobile`|`nr-hidden-tablet` |`nr-hidden-touch`|`nr-hidden-desktop`|
+|`nr-invisible-mobile`|`nr-invisible-tablet` |`nr-invisible-touch`|`nr-invisible-desktop`|
 
 
 
@@ -160,7 +160,7 @@ weight: 6
 
 You can use a generic stack and apply **fits**. 
 
-- You can use `inner-fit` on the stack itself to tailor stack items to size to their content. 
+- You can use `nr-fit` on the stack itself to tailor stack items to size to their content. 
 - You can also use `is-fit` directly on child elements individually. This is especially useful for customizing link or button sizes inside your stack (see following example).
 
 #### Fit Types
@@ -170,20 +170,20 @@ You can use a generic stack and apply **fits**.
 |`is-fit` | `max-width: fit content; flex:none;`    |
 | `is-fit-x` | `max-width: fit content;`  |
 |`is-fit-y`| `flex:none;` |
-|`inner-fit`| `> * { max-width: fit content; flex:none; } ` |
-|`inner-fit-x`|`> * { max-width: fit content; } ` |
-|`inner-fit-y`|`> * { flex:none; } ` |
+|`nr-fit`| `> * { max-width: fit content; flex:none; } ` |
+|`nr-fit-x`|`> * { max-width: fit content; } ` |
+|`nr-fit-y`|`> * { flex:none; } ` |
 
 ```html
 <section class="spread purple">
-        <div class="stack inner-p-1 inner-m-2 ">
+        <div class="stack nr-p-1 nr-m-2 ">
             <a href="" class="button white s text-center">  Link 1 </a>
             <a href="" class="button white s is-fit-y">  Link 2 </a>
             <a href="" class="button white s is-fit-x">  Link 3 </a>
             <a href="" class="button white s is-fit">  Link 4 </a>
         </div>
 
-    <div class="is-four-fifths white inner-s-1 text-center">
+    <div class="is-four-fifths white nr-s-1 text-center">
         <h1>Hello, world!</h1>
         <p> Lots of SEO Content here.</p>
         <p> Lots of SEO Content here.</p>