(breaking changes)Add prefix to class name

docs/balloons.stories.js

@@ -12,5 +12,5 @@ stories.add('balloon', () => {
     'from-left': 'from-left',
     'from-right': 'from-right',
   }, '');
-  return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
+  return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
 });

docs/buttons.stories.js

@@ -15,5 +15,5 @@ stories.add('button', () => {
     'is-error': 'is-error',
     'is-disabled': 'is-disabled',
   }, '');
-  return `<button type="button" class="btn ${extraClass}">Normal</button>`;
+  return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
 });

docs/containers.stories.js

@@ -17,7 +17,7 @@ stories.add('container', () => {
   }, '');
   const selectedClasses = [withTitle, isDark, isRounded, alignment];
 
-  return `<div class="container ${selectedClasses.join(' ')}">
+  return `<div class="nes-container ${selectedClasses.join(' ')}">
       <p class="title">Container</p>
       <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
   </div>`;

docs/icons.stories.js

@@ -8,28 +8,28 @@ stories.addDecorator(withKnobs);
 
 stories.add('icon', () => {
   const selectedClass = select('class', {
-    'icon twitter': 'icon twitter',
-    'icon facebook': 'icon facebook',
-    'icon github': 'icon github',
-    'icon google': 'icon google',
-    'icon youtube': 'icon youtube',
-    'icon whatsapp': 'icon whatsapp',
-    'icon close': 'icon close',
-    pokeball: 'pokeball',
-    bulbasaur: 'bulbasaur',
-    charmander: 'charmander',
-    squirtle: 'squirtle',
-    smartphone: 'smartphone',
-    phone: 'phone',
-    'octocat animate': 'octocat animate',
-    ash: 'ash',
-    'icon trophy': 'icon trophy',
-    mario: 'mario',
+    'nes-icon twitter': 'nes-icon twitter',
+    'nes-icon facebook': 'nes-icon facebook',
+    'nes-icon github': 'nes-icon github',
+    'nes-icon google': 'nes-icon google',
+    'nes-icon youtube': 'nes-icon youtube',
+    'nes-icon whatsapp': 'nes-icon whatsapp',
+    'nes-icon close': 'nes-icon close',
+    'nes-pokeball': 'nes-pokeball',
+    'nes-bulbasaur': 'nes-bulbasaur',
+    'nes-charmander': 'nes-charmander',
+    'nes-squirtle': 'nes-squirtle',
+    'nes-smartphone': 'nes-smartphone',
+    'nes-phone': 'nes-phone',
+    'nes-octocat animate': 'nes-octocat animate',
+    'nes-ash': 'nes-ash',
+    'nes-icon trophy': 'nes-icon trophy',
+    'nes-mario': 'nes-mario',
     'nes-logo': 'nes-logo',
     'nes-jp-logo': 'nes-jp-logo',
     'snes-logo': 'snes-logo',
     'snes-jp-logo': 'snes-jp-logo',
-  }, 'icon twitter');
+  }, 'nes-icon twitter');
   const selectedSize = radios('size', {
     default: '',
     'is-small': 'is-small',

docs/inputs.stories.js

@@ -8,15 +8,15 @@ stories.addDecorator(withKnobs);
 
 stories.add('input.radio', () => `
       <label>
-        <input type="radio" class="radio" name="answer" checked />
+        <input type="radio" class="nes-radio" name="answer" checked />
         <span>Yes</span>
       </label> <label>
-        <input type="radio" class="radio" name="answer" />
+        <input type="radio" class="nes-radio" name="answer" />
         <span>No</span>
       </label>`)
   .add('input.checkbox', () => `
       <label>
-        <input type="checkbox" class="checkbox" checked />
+        <input type="checkbox" class="nes-checkbox" checked />
         <span>Enable</span>
       </label>`)
   .add('input', () => {
@@ -27,5 +27,5 @@ stories.add('input.radio', () => `
       'is-error': 'is-error',
     }, '');
 
-    return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`;
+    return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
   });

docs/table.stories.js

@@ -13,7 +13,7 @@ stories.add('table', () => {
 
   const selectedClasses = [isBordered, isCentered, isDark];
 
-  return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
+  return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
             <th>Table.is-dark</th>

docs/textarea.stories.js

@@ -14,5 +14,5 @@ stories.add('textarea', () => {
     'is-error': 'is-error',
   }, '');
 
-  return `<textarea id="textarea_field" class="textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
+  return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
 });