Make a roadmap!

[trezy]

As @BcRikko said recently in #152:

Sorry, there is no roadmap. 😢

So I think we should change that! Let's discuss what other components we'd like to have added to the framework next. Once we have a list of components we want to add, we should create an issue for each component. Once that's done, we can add the good first issue label to each of them. That may encourage more contributors to come help us expand the framework.

So, here are the components that I'd like to see the most:

• [ ] <input type="range" /> (as mentioned by @BcRikko in #152)
• [ ] <code /> and <pre />
• [x] <dialog />
• [ ] <kbd />
• [ ] <meter />

@nostalgic-css/nes-css and other contributors, what else would you like to see added to NES.css?

[BcRikko]

Thanks for making a roadmap 🚗💨

• <dialog />: https://caniuse.com/#feat=dialog
  • There are browsers that do not support dialog element.
  • It's OK if we use .nes-dialog (e.g. div.nes-dialog) 👍
• <meter />: https://caniuse.com/#feat=meter
  • Can I substitute for .nes-progress? 🤔

[guastallaigor]

I think we lack on some of components to create a complete website using NES.css, not sure if this is the purpose here but in my opinion a few of those components it will be a great addition to the framework.

1. Menu/Sidebar Using the <aside> tag could be created and styled 8bit-like, and later used on the index.html docs, to make easier to find components, oposed to scroll down the page each time I want to search for an icon name, for example.

2. Toast/Message/Alert Not sure yet what to call this, but I've been trying to create something like this. In my opinion it's always usefull in almost every website to have something to give the user some feedback.

3. Spinners This will be a hard one to create 8bit-like for me, and maybe use a lot of box-shadows, so not sure yet on how to make it but if anyone has a few ideas about this that would be great.

4. Tabs Basic tabs component like this.

5. Pagination style Again, I don't think this is going to be easy but it will be a good addition.

6. Breadcrumb Breadcrumb component using lists, styled 8bit-like.

Again, all of this is just my personal suggestions to the framework and can well be declined, no problem at all :)

[BcRikko]

I'll describe my development policy ❤️

• I'd like to keep it simple and minimal (or Keep it short and simple)
• I'd like to only provide components
  • like Atoms of Atomic Design
  • In some cases, I may provide Molecules of Atomic Design
  • but users often don't need Molecules.
• I don't want to provide layout styles
  • CSS is so difficult for me
  • Providing layout styles creates complexity and difficulty.
• I don't want to use JavaScript
• I'd like to enjoy the atmosphere of NES
  • I'm not asking for accuracy of NES.

[trezy]

@BcRikko, I'll try to address each of your points:

• <dialog />: https://caniuse.com/#feat=dialog
  • There are browsers that do not support dialog element.
  • It's OK if we use .nes-dialog (e.g. div.nes-dialog) 👍

Yup, .nes-dialog would be just fine. There is a polyfill for <dialog /> elements that I use on a lot of projects, but I'm also fine with just expecting it to be on a <div />.

• <meter />: https://caniuse.com/#feat=meter
  • Can I substitute for .nes-progress? 🤔

Not exactly. <progress /> and <meter /> elements are distinctly different. The <progress /> component is intended to show to current progression of a task, i.e. how much of a download is complete. The <meter /> element, on the other hand, is intended to represent a scalar value within a known range, i.e. the fuel level of a car. For this reason, the <meter /> element has the additional attributes low, high, and optimum to define some very useful states for the <meter />. These states can actually be styled, as well.

• I'd like to only provide components
  • like Atoms of Atomic Design
  • In some cases, I may provide Molecules of Atomic Design
  • but users often don't need Molecules.

I personally love the Atomic design idea. If you look at the SCSS architecture of other projects I've done, you'll notice that I don't use the terminology of Atomic design, but I certainly follow the principles. However, I would disagree with the statement that users don't often need molecules. Instead, I would say that molecules are often a very valuable part of a framework. Something like Tabs and Breadcrumbs (as mentioned by @guastallaigor) are molecules that are used very commonly, so providing a version of those molecules would be really helpful for me and @guastallaigor, and presumably for others as well.

• I don't want to provide layout styles
  • CSS is so difficult for me
  • Providing layout styles creates complexity and difficulty.

I completely understand this. There are lots of libraries that can handle layout concerns, such as layout grids. However, I think we need to better define what layout styles are so we can have a more successful conversation. Technically, any time you set a width, a height, or any type of size for a component, you're affecting layout. With that in mind, I'd like to figure out more specifically what you're trying to avoid, @BcRikko.

• I don't want to use JavaScript

That's also fair. I mean, it is called NES**.css**. However, I don't necessarily think we need to provide any Javascript to add molecules to the library. I'd be fine with providing something like the Tabs component @guastallaigor mentioned as just styles. The rest of the functionality can be left up to the user.

We could also provide a separate, optional Javascript file to add functionality for these components. The components would render fine without the Javascript and the user could add functionality on their own, or they could load in the Javascript file and get the functionality they expect.

Another idea

Another thought I had is that, instead of building the more complex pieces inside of NES.css, we could create multiple levels of NES.css. For example, this part of the framework would become nes.css/core. Then we could have additional parts of the framework for things like nes.css/layout, nes.css/functional-components (which could use a better name), etc.

This sounds a lot more cumbersome to me, but I think it could accomplish the goals of people like @guastallaigor and myself who want some more complex components in the framework, while also satisfying @BcRikko's desire to keep the framework from getting too complex.

[panoramix360]

Maybe we can make:

• Buttons with Icons
• Selects with Buttons, so you can select options with buttons.
• Cards that simulate a snes cartridge? (Just an idea) 😸
• Multiple Select

This is some just crazy ideas, if I come up with more I'll post here.

I'm making an <ul> 💃

[guastallaigor]

@panoramix360 Can you create an issue for the <ul> component? So that others can know that you are already making that :+1:

[BcRikko]

I think we need to better define what layout styles are so we can have a more successful conversation.

I define layout as molecules and organisms. 📝 In other words, It's made by combining existing components. (e.g. Card, Pagination, Breadcrumb...)

Take Bulma docs for example:

• I want to provide is Elements.
• I don't want to provide is Components and Modifiers, Columns, Layout .

bulma.min.css file size is about 166KB. 😱 but I often don't use half of bulma.min.css. so I'd like to provide a minimum of css. 😇

---

this part of the framework would become nes.css/core. Then we could have additional parts of the framework for things like nes.css/layout, nes.css/functional-components (which could use a better name), etc.

but I think that components is a good idea. ✨ so I agree with the idea of separating core and components. 😆👍

[trezy]

@BcRikko Sounds good! How do you feel about letting people contribute a couple of components/molecules/organisms to NES.css, then we can look into splitting them into their own repo? I figure it'll be a lot simpler to figure out what the repo needs to look like for the components once we have a couple of components to work with.

Also, I think we should consider removing reboot.css if we don't want to provide layout. 😬

[BcRikko]

I just came up with another idea 💡

I think that it's not good to split repositories. and we need reboot.css, because element style collapses if we remove reboot.css.🤔

so we provide 2 CSS files.

|- css
|   |- nes.css  <-- all-in-one( extend `nes.core.css` )
|   |- nes.min.css
|   |- nes.core.css <-- core only
|   |- nes.core.min.css
|- scss
    |- nes.scss  <-- all-in-one( extend `nes.core.css` )
    |- nes.core.scss  <-- core only
    |- base
    |- elements
    |- form
    |- icons
    |- pixel-arts
    |- utilities
    |- components  <-- new!!
        |- navs.scss
        |- tabs.scss
        |- etc...

// nes.core.scss
@import "base";
@import "utilities";
@import "elements";
@import "form";

// nes.scss
@import "nes.core.scss";
@import "components";
@import "icons";  // remove it once NES.icons is completed
@import "pixel-arts";  // remove it once NES.icons is completed

What do you think? 🤔

[trezy]

@BcRikko I think that is a great idea! I'll start looking into an implementation today! 😉

[kevyanue]

is there a <input type="file"> already? (i haven't found one) if not, it would be a nice thing to add

[guastallaigor]

@kevyanue No, there isn't. I agree, it would be great to have one 😄

[shawnhill121]

@kevyanue @guastallaigor I've been looking into the <input type="file"> element, the only browser that supports independent styling of it with pure CSS is Edge, with the ::ms-browse pseudo-selector. For the other browsers, the best I've come up with is hiding the input and using a label to essentially mask it for styling purposes. Without using JavaScript I don't think there will be a way to display the test of the selected file. Here's an example of what I've come up with to make it look like a NES.css button. https://codepen.io/shawn-hill/pen/PXQxOB

[guastallaigor]

@shawnhill121 In my opinion this is a good approach! ~~If anyone else has anything against it, you can make a PR for it :+1:~~

On another end, if I remove the nes-file it still works :smile: https://codepen.io/anon/pen/ZVxGvq

So maybe just add this:

input[type="file"] {
    display: none;
}

And the example inside the docs?

[shawnhill121]

Sounds good! I'll make it happen.