Nes.css: Any guide please?

[Ding-Fan]

Is your feature request related to a problem? Please describe.

There isn't a usage guide as far as I can see. I found a storybook from the package.json but nobody mentioned it. I finished the yarn add nes.css then don't know the next step.

Describe the solution you'd like

Please add a usage guide in the readme.

Describe alternatives you've considered

Any examples would be appreciated too.

[guastallaigor]

Hello @Ding-Fan . If your question is about a guide on how to _use_ NES.css, unfortunately we don't have one yet (I mentioned something like that here #180).

So, for now there's a few options:

1. Check the code itself to see the classes you can use;
2. Check storybook stories for each component that you want to use to see the classes you can use;
3. Go to the nostalgic-css page and use your browser devtools, them inspect the element to see the markup and classes the components have.
4. Ask us questions about the components or anything in here or in our gitter. Anyone is welcome to join there!

But of course we intend to make a guide/documentation with examples for each component, that's 🔜

[guastallaigor]

With the new demo site renewed (ref #292), we now have more components and code examples for you to look and copy the code to be used in your website.

And we have a few ways to install NES.css via yarn/npm/CDN and a better documentation in our README.md.

I finished the yarn add nes.css then don't know the next step.

For example, after you use yarn you could just import the CSS file in your main.js, similar to this:

import '../node_modules/nes.css/css/nes.min.css'

Or in your <style> tag with @import url()

<style>
@import url("../node_modules/nes.css/css/nes.min.css");
</style>

Also you will need to import the fonts that you prefer, like described here.

For now we do not intend to create a bigger documentation like Bootstrap or Bulma, because we want to keep the framework smaller as possible, so we are not going to add layout CSS and a lot of components like they have, so we don't necessarily need to have another documentation or demo site right now.

If in the future we have a lot more components, we could refactor the demo page to something similar to what they offer, but that's for another discussion in the future.

I think all of that clarifies on how to use NES.css.
I will close this, but if this doesn't solve your issue, please comment and we'll reopen it. Thank you.

[merwok]

I don’t think that having node_modules in deployment environments is a good practice :)

[guastallaigor]

Hello @merwok. I'm sorry, I didn't saw your comment before.

I have only one small project that is using NES.css which is Vue Pixel Art. Right now, using Vue.js I don't need node_modules in production, but I need it to generate the dist folder. Is this considered bad practice?

If so, I do apologize and I can reopen this issue.
Also, if you want, feel free to share your thoughts on how to use NES.css in the best possible way. I'm always interested to learn :man_student:.

[merwok]

Yes a build step makes sense!

node_modules exists on developer machines and build environment, you run a command to build stuff to a dist directory, which is then deployed and served by the http server.

with that setup the CSS import line could look something like:

@import url("/static/css/nes.min.css");