|^function\s*\(/,$a=/\([^)]*?\);*$/,wa=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,Ca={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},xa={esc:["Esc","Escape"],tab:"Tab",enter:"Enter",space:[" ","Spacebar"],up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete","Del"]},Aa=function(e){return"if("+e+")return null;"},ka={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:Aa("$event.target !== $event.currentTarget"),ctrl:Aa("!$event.ctrlKey"),shift:Aa("!$event.shiftKey"),alt:Aa("!$event.altKey"),meta:Aa("!$event.metaKey"),left:Aa("'button' in $event && $event.button !== 0"),middle:Aa("'button' in $event && $event.button !== 1"),right:Aa("'button' in $event && $event.button !== 2")};function Oa(e,t){var n=t?"nativeOn:":"on:",r="",i="";for(var o in e){var a=Sa(e[o]);e[o]&&e[o].dynamic?i+=o+","+a+",":r+='"'+o+'":'+a+","}return r="{"+r.slice(0,-1)+"}",i?n+"_d("+r+",["+i.slice(0,-1)+"])":n+r}function Sa(e){if(!e)return"function(){}";if(Array.isArray(e))return"["+e.map(function(e){return Sa(e)}).join(",")+"]";var t=wa.test(e.value),n=ba.test(e.value),r=wa.test(e.value.replace($a,""));if(e.modifiers){var i="",o="",a=[];for(var s in e.modifiers)if(ka[s])o+=ka[s],Ca[s]&&a.push(s);else if("exact"===s){var c=e.modifiers;o+=Aa(["ctrl","shift","alt","meta"].filter(function(e){return!c[e]}).map(function(e){return"$event."+e+"Key"}).join("||"))}else a.push(s);return a.length&&(i+=function(e){return"if(('keyCode' in $event)&&"+e.map(Ta).join("&&")+")return null;"}(a)),o&&(i+=o),"function($event){"+i+(t?"return "+e.value+"($event)":n?"return ("+e.value+")($event)":r?"return "+e.value:e.value)+"}"}return t||n?e.value:"function($event){"+(r?"return "+e.value:e.value)+"}"}function Ta(e){var t=parseInt(e,10);if(t)return"$event.keyCode!=="+t;var n=Ca[e],r=xa[e];return"_k($event.keyCode,"+JSON.stringify(e)+","+JSON.stringify(n)+",$event.key,"+JSON.stringify(r)+")"}var Ea={on:function(e,t){e.wrapListeners=function(e){return"_g("+e+","+t.value+")"}},bind:function(e,t){e.wrapData=function(n){return"_b("+n+",'"+e.tag+"',"+t.value+","+(t.modifiers&&t.modifiers.prop?"true":"false")+(t.modifiers&&t.modifiers.sync?",true":"")+")"}},cloak:S},ja=function(e){this.options=e,this.warn=e.warn||xr,this.transforms=Ar(e.modules,"transformCode"),this.dataGenFns=Ar(e.modules,"genData"),this.directives=k(k({},Ea),e.directives);var t=e.isReservedTag||T;this.maybeComponent=function(e){return!!e.component||!t(e.tag)},this.onceId=0,this.staticRenderFns=[],this.pre=!1};function Na(e,t){var n=new ja(t);return{render:"with(this){return "+(e?La(e,n):'_c("div")')+"}",staticRenderFns:n.staticRenderFns}}function La(e,t){if(e.parent&&(e.pre=e.pre||e.parent.pre),e.staticRoot&&!e.staticProcessed)return Ma(e,t);if(e.once&&!e.onceProcessed)return Ia(e,t);if(e.for&&!e.forProcessed)return Pa(e,t);if(e.if&&!e.ifProcessed)return Da(e,t);if("template"!==e.tag||e.slotTarget||t.pre){if("slot"===e.tag)return function(e,t){var n=e.slotName||'"default"',r=Ha(e,t),i="_t("+n+(r?","+r:""),o=e.attrs&&"{"+e.attrs.map(function(e){return b(e.name)+":"+e.value}).join(",")+"}",a=e.attrsMap["v-bind"];!o&&!a||r||(i+=",null");o&&(i+=","+o);a&&(i+=(o?"":",null")+","+a);return i+")"}(e,t);var n;if(e.component)n=function(e,t,n){var r=t.inlineTemplate?null:Ha(t,n,!0);return"_c("+e+","+Ra(t,n)+(r?","+r:"")+")"}(e.component,e,t);else{var r;(!e.plain||e.pre&&t.maybeComponent(e))&&(r=Ra(e,t));var i=e.inlineTemplate?null:Ha(e,t,!0);n="_c('"+e.tag+"'"+(r?","+r:"")+(i?","+i:"")+")"}for(var o=0;o
',Wa.innerHTML.indexOf("
")>0}var Ya=!!U&&Xa(!1),Qa=!!U&&Xa(!0),es=g(function(e){var t=Wn(e);return t&&t.innerHTML}),ts=gn.prototype.$mount;return gn.prototype.$mount=function(e,t){if((e=e&&Wn(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=es(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){var i=Ga(r,{outputSourceRange:!1,shouldDecodeNewlines:Ya,shouldDecodeNewlinesForHref:Qa,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return ts.call(this,e,t)},gn.compile=Ga,gn});
diff --git a/docs/script.js b/docs/script.js
new file mode 100644
index 0000000..225263e
--- /dev/null
+++ b/docs/script.js
@@ -0,0 +1,217 @@
+const sampleCollection = [
+ {
+ title: "buttons",
+ showCode: false,
+ code: `Normal
+
+Primary
+Success
+Warning
+Error
+Disabled `
+ },
+ {
+ title: "radios",
+ showCode: false,
+ code: `
+ Yes
+
+
+
+ No
+ `
+ },
+ {
+ title: "checkboxes",
+ showCode: false,
+ code: `
+ Enable
+
+
+
+
+ Dark
+
+
`
+ },
+ {
+ title: "Inputs",
+ showCode: false,
+ code: `
+ Your name
+
+
+
+ .input.is-success
+
+
+
+ .input.is-warning
+
+
+
+ .input.is-error
+
`
+ },
+ {
+ title: "Textarea",
+ showCode: false,
+ code: `Textarea
+`
+ },
+ {
+ title: "Selects",
+ showCode: false,
+ code: `
+
+ Select...
+ To be
+ Not to be
+
+
+
+
+
+ Select...
+ To be
+ Not to be
+
+
+
+
+
+ Select...
+ To be
+ Not to be
+
+
+
+
+
+ Select...
+ To be
+ Not to be
+
+
`
+ },
+ {
+ title: "containers",
+ showCode: false,
+ code: `
+
Container.is-centered
+
Good morning. Thou hast had a good night's sleep, I hope.
+
+
Container.is-dark
+
Good morning. Thou hast had a good night's sleep, I hope.
+
+
Good morning. Thou hast had a good night's sleep, I hope.
+
+
Good morning. Thou hast had a good night's sleep, I hope.
+
NES.css - NES-style CSS Framework
-
-
- NES-style CSS Framework.
-
-
-
- Fork me
-
-
-
- Buttons
-
- Normal
- Primary
- Success
- Warning
- Error
- Disabled
-
- <>
- Copied!
-
-
-
-
- Containers
-
-
-
Container.is-centered
-
Good morning. Thou hast had a good night's sleep, I hope.
-
-
-
Container.is-dark
-
Good morning. Thou hast had a good night's sleep, I hope.
-
-
-
Good morning. Thou hast had a good night's sleep, I hope.
-
-
-
Good morning. Thou hast had a good night's sleep, I hope.
-
-
<>
- Copied!
-
-
- <div class="nes-container with-title is-centered">
- <p class="title">Container.is-centered</p>
- <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-</div>
-<div class="nes-container is-dark with-title">
- <p class="title">Container.is-dark</p>
- <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-</div>
-<div class="nes-container is-rounded">
- <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-</div>
-<div class="nes-container is-rounded is-dark">
- <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-</div>Copy
-
-
-
- Dialogs
-
-
-
- Open dark dialog
-
-
-
-
-
- Open rounded dialog
-
-
-
-
-
- Open dark and rounded dialog
-
-
-
-
-
-
- NES.css does not include any JavaScript. If you want to use dialog element other than Chrome, you need polyfill.
-
- <>
- Copied!
-
-
-
- <section>
- <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();">Open dialog</button>
- <dialog class="nes-dialog" id="dialog-default">
- <form method="dialog">
- <p class="title">Dialog</p>
- <p>Alert: this is a dialog.</p>
- <menu class="dialog-menu">
- <button class="nes-btn">Cancel</button>
- <button class="nes-btn is-primary">Confirm</button>
- </menu>
- </form>
- </dialog>
-</section>
-
-<section>
- <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();">Open dark dialog</button>
- <dialog class="nes-dialog is-dark" id="dialog-dark">
- <form method="dialog">
- <p class="title">Dark dialog</p>
- <p>Alert: this is a dialog.</p>
- <menu class="dialog-menu">
- <button class="nes-btn">Cancel</button>
- <button class="nes-btn is-primary">Confirm</button>
- </menu>
- </form>
- </dialog>
-</section>
-
-<section>
- <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();">Open rounded dialog</button>
- <dialog class="nes-dialog is-rounded" id="dialog-rounded">
- <form method="dialog">
- <p class="title">Rounded dialog</p>
- <p>Alert: this is a dialog.</p>
- <menu class="dialog-menu">
- <button class="nes-btn">Cancel</button>
- <button class="nes-btn is-primary">Confirm</button>
- </menu>
- </form>
- </dialog>
-</section>
-
-<section>
- <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();">Open dark and rounded dialog</button>
- <dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded">
- <form method="dialog">
- <p class="title">Dark and Rounded dialog</p>
- <p>Alert: this is a dialog.</p>
- <menu class="dialog-menu">
- <button class="nes-btn">Cancel</button>
- <button class="nes-btn is-primary">Confirm</button>
- </menu>
- </form>
- </dialog>
-</section>Copy
-
-
-
-
- <label>
- <input type="radio" class="nes-radio" name="answer" checked />
- <span>Yes</span>
-</label>
-<label>
- <input type="radio" class="nes-radio" name="answer" />
- <span>No</span>
-</label>Copy
-
-
-
-
- <label>
- <input type="checkbox" class="nes-checkbox" checked />
- <span>Enable</span>
-</label>
-<label>
- <input type="checkbox" class="nes-checkbox is-dark" checked />
- <span>Dark</span>
-</label>Copy
-
-
-
- Avatars
-
- <>
- Copied!
-
-
- <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
-<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">Copy
-
-
-
-
-
-
- Balloons
-
-
-
-
-
Good morning. Thou hast had a good night's sleep, I hope.
-
-
-
-
<>
- Copied!
-
-
- <div class="message -left">
- <i class="nes-bcrikko"></i>
- <div class="nes-balloon from-left">
- <p>Hello NES.css</p>
- </div>
-</div>
-<div class="message -right">
- <div class="nes-balloon from-right">
- <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
- </div>
- <i class="nes-bcrikko"></i>
-</div>Copy
-
-
-
- Lists
-
-
-
- Good morning.
- Thou hast had a good night's sleep, I hope.
- Thou hast had a good afternoon
- Good night.
-
-
-
-
-
- Good morning.
- Thou hast had a good night's sleep, I hope.
- Thou hast had a good afternoon
- Good night.
-
-
-
<>
- Copied!
-
-
- <div class="lists">
- <ul class="nes-list is-disc">
- <li>Good morning.</li>
- <li>Thou hast had a good night's sleep, I hope.</li>
- <li>Thou hast had a good afternoon</li>
- <li>Good night.</li>
- </ul>
-</div>
-
-<div class="lists">
- <ul class="nes-list is-circle">
- <li>Good morning.</li>
- <li>Thou hast had a good night's sleep, I hope.</li>
- <li>Thou hast had a good afternoon</li>
- <li>Good night.</li>
- </ul>
-</div>Copy
-
-
-
- Texts
-
- Normal
- Primary
- Success
- Warning
- Error
- Disabled
-
- <>
- Copied!
-
-
- <span class="nes-text">Normal</span>
-<span class="nes-text is-primary">Primary</span>
-<span class="nes-text is-success">Success</span>
-<span class="nes-text is-warning">Warning</span>
-<span class="nes-text is-error">Error</span>
-<span class="nes-text is-disabled">Disabled</span>Copy
-
-
-
- Tables
-
-
-
-
- Table.is-bordered
- Table.is-centered
- Table.is-centered
- Table.is-centered
-
-
-
-
- Thou hast had a good morning
- Thou hast had a good afternoon
- Thou hast had a good evening
- Thou hast had a good night
-
-
- Thou hast had a good morning
- Thou hast had a good afternoon
- Thou hast had a good evening
- Thou hast had a good night
-
-
-
-
-
-
-
- Table.is-dark
- Table.is-bordered
- Table.is-bordered
- Table.is-bordered
-
-
-
-
- Thou hast had a good morning
- Thou hast had a good afternon
- Thou hast had a good evening
- Thou hast had a good night
-
-
- Thou hast had a good morning
- Thou hast had a good afternoon
- Thou hast had a good afternoon
- Thou hast had a good afternoon
-
-
-
-
<>
- Copied!
-
-
- <div class="nes-table-responsive">
- <table class="nes-table is-bordered is-centered">
- <thead>
- <tr>
- <th>Table.is-bordered</th>
- <th>Table.is-centered</th>
- <th>Table.is-centered</th>
- <th>Table.is-centered</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Thou hast had a good morning</td>
- <td>Thou hast had a good afternoon</td>
- <td>Thou hast had a good evening</td>
- <td>Thou hast had a good night</td>
- </tr>
- <tr>
- <td>Thou hast had a good morning</td>
- <td>Thou hast had a good afternoon</td>
- <td>Thou hast had a good evening</td>
- <td>Thou hast had a good night</td>
- </tr>
- </tbody>
- </table>
-</div>
-<div class="nes-table-responsive">
- <table class="nes-table is-bordered is-dark">
- <thead>
- <tr>
- <th>Table.is-dark</th>
- <th>Table.is-bordered</th>
- <th>Table.is-bordered</th>
- <th>Table.is-bordered</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Thou hast had a good morning</td>
- <td>Thou hast had a good afternon</td>
- <td>Thou hast had a good evening</td>
- <td>Thou hast had a good night</td>
- </tr>
- <tr>
- <td>Thou hast had a good morning</td>
- <td>Thou hast had a good afternoon</td>
- <td>Thou hast had a good afternoon</td>
- <td>Thou hast had a good afternoon</td>
- </tr>
- </tbody>
- </table>
-</div>Copy
-
-
-
- Progress
-
- <>
- Copied!
-
-
- <progress class="nes-progress" value="90" max="100"></progress>
-<progress class="nes-progress is-primary" value="80" max="100"></progress>
-<progress class="nes-progress is-success" value="50" max="100"></progress>
-<progress class="nes-progress is-warning" value="30" max="100"></progress>
-<progress class="nes-progress is-error" value="10" max="100"></progress>
-<progress class="nes-progress is-pattern" value="50" max="100"></progress>Copy
-
-
-
- Badges
-
- <>
- Copied!
-
-
- <a href="#" class="nes-badge">
- <span class="is-dark">NES.css</span>
-</a>
-<a href="#" class="nes-badge">
- <span class="is-primary">is</span>
-</a>
-<a href="#" class="nes-badge">
- <span class="is-success">a</span>
-</a>
-<a href="#" class="nes-badge">
- <span class="is-warning">great</span>
-</a>
-<a href="#" class="nes-badge">
- <span class="is-error">framework!</span>
-</a>
-<a href="#" class="nes-badge is-splited">
- <span class="is-dark">npm</span>
- <span class="is-primary">1.1.0</span>
-</a>
-<a href="#" class="nes-badge is-splited">
- <span class="is-dark">test</span>
- <span class="is-success">100%</span>
-</a>
-<a href="#" class="nes-badge is-icon">
- <span class="is-warning">
- <i class="nes-icon star is-small"></i>
- </span>
- <span class="is-primary">Icons</span>
-</a>
-<a href="#" class="nes-badge is-icon">
- <span class="is-dark">hi</span>
- <span class="is-warning">Text</span>
-</a>Copy
-
-
-
- Icons
-
- Reaction
-
-
- <>
- Copied!
-
-
- <i class="nes-icon heart is-small"></i>
-<i class="nes-icon heart"></i>
-<i class="nes-icon heart is-medium"></i>
-<i class="nes-icon heart is-large"></i>
-<i class="nes-icon heart is-empty"></i>
-
-<i class="nes-icon star is-small"></i>
-<i class="nes-icon star"></i>
-<i class="nes-icon star is-medium"></i>
-<i class="nes-icon star is-large"></i>
-
-<i class="nes-icon star is-half is-small"></i>
-<i class="nes-icon star is-half"></i>
-<i class="nes-icon star is-half is-medium"></i>
-<i class="nes-icon star is-half is-large"></i>
-
-<i class="nes-icon star is-transparent is-small"></i>
-<i class="nes-icon star is-transparent"></i>
-<i class="nes-icon star is-transparent is-medium"></i>
-<i class="nes-icon star is-transparent is-large"></i>
-
-<i class="nes-icon star is-empty"></i>
-
-<i class="nes-icon like is-small"></i>
-<i class="nes-icon like"></i>
-<i class="nes-icon like is-medium"></i>
-<i class="nes-icon like is-large"></i>
-<i class="nes-icon like is-empty"></i>Copy
-
-
-
- SNS
-
-
-
-
-
-
-
- <>
- Copied!
-
-
- <i class="nes-icon twitter is-small"></i>
-<i class="nes-icon twitter"></i>
-<i class="nes-icon twitter is-medium"></i>
-<i class="nes-icon twitter is-large"></i>
-
-<i class="nes-icon facebook is-small"></i>
-<i class="nes-icon facebook"></i>
-<i class="nes-icon facebook is-medium"></i>
-<i class="nes-icon facebook is-large"></i>
-
-<i class="nes-icon github is-small"></i>
-<i class="nes-icon github"></i>
-<i class="nes-icon github is-medium"></i>
-<i class="nes-icon github is-large"></i>
-
-<i class="nes-icon youtube is-small"></i>
-<i class="nes-icon youtube"></i>
-<i class="nes-icon youtube is-medium"></i>
-<i class="nes-icon youtube is-large"></i>
-
-<i class="nes-icon google is-small"></i>
-<i class="nes-icon google"></i>
-<i class="nes-icon google is-medium"></i>
-<i class="nes-icon google is-large"></i>
-
-<i class="nes-icon medium is-small"></i>
-<i class="nes-icon medium"></i>
-<i class="nes-icon medium is-medium"></i>
-<i class="nes-icon medium is-large"></i>
-
-<i class="nes-icon twitch is-small"></i>
-<i class="nes-icon twitch"></i>
-<i class="nes-icon twitch is-medium"></i>
-<i class="nes-icon twitch is-large"></i>
-
-<i class="nes-icon reddit is-small"></i>
-<i class="nes-icon reddit"></i>
-<i class="nes-icon reddit is-medium"></i>
-<i class="nes-icon reddit is-large"></i>
-
-<i class="nes-icon whatsapp is-small"></i>
-<i class="nes-icon whatsapp"></i>
-<i class="nes-icon whatsapp is-medium"></i>
-<i class="nes-icon whatsapp is-large"></i>
-
-<i class="nes-icon gmail is-small"></i>
-<i class="nes-icon gmail"></i>
-<i class="nes-icon gmail is-medium"></i>
-<i class="nes-icon gmail is-large"></i>
-
-<i class="nes-icon linkedin is-small"></i>
-<i class="nes-icon linkedin"></i>
-<i class="nes-icon linkedin is-medium"></i>
-<i class="nes-icon linkedin is-large"></i>
-
-<i class="nes-icon instagram is-small"></i>
-<i class="nes-icon instagram"></i>
-<i class="nes-icon instagram is-medium"></i>
-<i class="nes-icon instagram is-large"></i>
-
-Copy
-
-
-
- Others
-
-
- <>
- Copied!
-
-
- <i class="nes-icon close is-small"></i>
-<i class="nes-icon close"></i>
-<i class="nes-icon close is-medium"></i>
-<i class="nes-icon close is-large"></i>
-
-<i class="nes-octocat animate"></i>
-
-<i class="nes-icon trophy is-small"></i>
-<i class="nes-icon trophy"></i>
-<i class="nes-icon trophy is-medium"></i>
-<i class="nes-icon trophy is-large"></i>
-
-<i class="nes-icon coin is-small"></i>
-<i class="nes-icon coin"></i>
-<i class="nes-icon coin is-medium"></i>
-<i class="nes-icon coin is-large"></i>
-
-<i class="nes-mario"></i>
-<i class="nes-ash"></i>
-<i class="nes-pokeball"></i>
-
-<i class="nes-bulbasaur"></i>
-<i class="nes-charmander"></i>
-<i class="nes-squirtle"></i>
-
-<i class="nes-smartphone"></i>
-<i class="nes-phone"></i>
-<i class="nes-kirby"></i>Copy
-
-
-
- Controllers
-
-
- <>
- Copied!
-
-
- <i class="nes-logo"></i>
-<i class="nes-jp-logo"></i>
-<i class="snes-logo"></i>
-<i class="snes-jp-logo"></i>Copy
-
-
-
-
-
-
-
-