nostalgic-css / nes.css Goto Github PK

Hello!

I found this repo in the "trending" section of Github explore - and I cant help it, but I love 8-bit styled things (graphics, sounds - everything!). So I would like to make a couple feature requests, because I actually would like to design my personal blog/website-thing with 8-bit style graphics - and this would fit in just so perfectly! So:

1. Is there a method to use black-on-white by default, such as shown on the -dark containers?
2. I would like to request progress bars, or any kind of process indicator really.
3. What about modals/dialog boxes?
4. This is not exactly a feature request, but some more icons would be nice!

Also, I can not read japanese, unfortunately (although I will attend class next year to learn it). So it would be nice if the README was equivalently in english and japanese - most of it is currently not translated. If you would like, I can correct your english spelling/wording properly in the README when you translated it.

Kind regards,
Ingwie!

It might be more authentic to use the actual NES' color palette which is documented here:
see https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES

I think an 8bit icon set is something that has a lot of value outside of the NES.css framework. I’d love to see the icon set moved into their own project, then made an optional part of NES.css.

Currently most of the icons are generated with box-shadows, but I’ve been working on a pixel are converter recently that I think we could use to generate box-shadow, SVH, and PNG versions of each icon. Past that, we could provide an icon font version that’s a bit more scalable.

Now, I recognize that there aren’t very many icons included with the framework right now, but I’ve already started creating some other 8bit icons to add to the set for my own project (The Life Engine) that I’d be happy to contribute. 😉

Add table is-dark class similar to the container.

Each row of buttons is a different color:

This project looks great! Thank you!

That would be great, thanks. I wish I could help on it, however I only know English and Chinese.

The NES did not support scaling, so the size of "one pixel" should be the same for every element. Currently this isn't the case for checkboxes and icons. Checkboxes are smaller than the single pixel used by fonts and borders, and the icons scale.

Another nice way to facilitate building a community around a project like this is to create a channel through which the community can discuss, brainstorm, and ask for support. I prefer Gitter for OSS projects, but something like a Slack workspace or a Discord server would work as well.

I’d also recommend starting to build a team to help you manage the project. Create an organization (I’d call it old-school-css, personally, but maybe that’s just me 🙃), transfer the repo to the organization, then start betting community members via the new chat channel. I’m suggesting this, so obviously I’d love to join that team, but it’s ultimately gonna be up to you. 😉

Should remove the input outline.

Before:

After:

BEM should really be followed for CSS. (https://css-tricks.com/bem-101/) This ensures a consistant class naming system that would help maintance.

Originally posted by @vandie in #86 (comment)

⚠️Breaking changes⚠️

Since NES.css doesn't provide layout. It maybe conflict when NES.css using the common class name.
Maybe add a prefix like ns- or nes- to solve this.

レイアウト関連のスタイルは提供していないためユーザ任せになる。そのときにNES.cssで汎用的なクラス名を使っているとコンフリクトする可能性がある。

ns-、nes-みたいなprefixをつけてコンフリクトを解消したい 🤔

<!-- ユーザ定義（.container） -->
<section class="container">
    <!-- NES.css (.ns-container.with-title) -->
    <section class="ns-container with-title">
    </section>
</section>

When navigating through the test page by use of the Tab key, that there were no :focus styles for the button examples due to their focus outline being set to zero.

Whenever removing native focus styles from interactive controls, custom focus styles should be put in place so as to not create an inaccessible experience for those who do not navigate by mouse.

cssファイルがコンフリクトしてしまうので、masterにマージしたときにCIでビルドしたい

This issue happens in storybook only.

ref

It would be nice if it was the responsibility of the consumer of the library to import the required Google Font.

I would suggest leaving out the import, and updating the documentation to reflect the fact that the user should install the font themselves.

The color of the buttons stays the same when you click it then you need to click other place to restore the original button color.
It's a little hard to explain.

The command npm run build doesn't work because of a typo on package.json.

This:

    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build-storybook",

Should be this

    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build:storybook",

The name of the storybook build script is build:storybook, and it is build-storybook, which makes the npm run build fail.

Stray pixels appear when Radio cursor is blinking.

Does not appear in Google Chrome, the pixels appear in Firefox 63.0.3, even with different zoom levels.
Might just be a Firefox bug.

Switch to use yarn for package management and scripts. The package.json will remain the same and all the same packages will be used but yarn handles package versions much nicer. The main benefit I see right now is that yarn actually respects a package lock file whereas npm just ignores it. This will help ensure that all collaborators are using the same version of packages.

As discussed in #24, ids are not necessary to associate labels with their form controls, as long as those form controls are contained within the label. However, if a label is not a parent for its form control, then the label should have a for attribute, pointing to the unique id of the element it is providing the accessible name to.

The text fields on the demo site would fall into this pattern.

This is great and I really loved the radio and checkbox buttons, but they don't work on firefox. Apparently input:before or input:after are not valid css, because input element does not have content:
https://stackoverflow.com/a/4574946

Is it possible to move the buttons to the label?

Input success should be the green success color, not blue. Semi-related to #19

btn-dot

• I added a class btn-dot to make button look better
• I'm using box-shadow to see if it fits the project better

What do you think?
#87

I'd like to get branch protections in place to make sure the project is stable moving forward. I usually set these protections up on both the master and develop branches. That way, we can prevent PRs from being merged to develop without review, and we can require additional CI checks before anything can be merged to master (released).

These are the settings I usually set up for both branches. We can, of course, alter the Require status checks to pass before merging section for our project. For now, I'd set that to the ci/circleci: build and ci/circleci: lint checks.

As explained here box-shadow falls back to color for its color, and it's pretty well supported

We could replace:

 .icon.is-medium.close::before {
   width: 3px;
   height: 3px;
   box-shadow: 3px 3px #212529,6px 3px #212529,9px 3px #212529,12px 3px #212529, /*…*/;
 }

with:

 .icon.is-medium.close::before {
   width: 3px;
   height: 3px;
   box-shadow: 3px 3px,6px 3px,9px 3px,12px 3px, /*…*/;
   color:  #212529;
 }

What would be the gains?

• 1000 characters removed for .close.is-medium alone, I did not try to make it general but I guess it would be a huge weight gain
• Very easy to change color in user's css, he just has to override color and tadaaa \o/

If you think it's interesting, and does not break your compatibility goals, I'd gladly propose a PR :)

On the NES.css github.io page success and primary buttons look like this:

In Bootstrap they look like this:

As you can see the colors are swapped. Is this intended? It would would make more sense to me if the success color is green and the primary color is blue, like Bootstrap.

Hello @BcRikko,
Can you please add a parameter to make the heart ❤️and / or star ⭐️empty / transparent inside ?
Like a "is-empty" class to the icon.
Using your "Reaction" design, I want to make a ratting interface.
I believe it's only adding some color code in the scss but I'm don't know how to do it 😭

Anyway, thank you very much for your work 👍

brilliant repo!
it would be nice if there're 8-bit cursors.

like in https://modalzmodalzmodalz.com/

Hi, i'm french, we sometimes use somes É È Ô Ù À (and same in lowercase: é à è ô ê etc) key on our keyboard, also know as latin-1 or iso8859 charset

Sadly the font doesn't seems handle them and show �.
Its present on unicode under https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block), i was wondering, is there a chance that someone comes here and add these characters to the font?

We need the right to do it (modify the font), and some fontforge use (a opensource software able to do it) I guess, but i'm bad designer :/

.container.with-title.is-center(.is-right) does not work.

https://github.com/BcRikko/NES.css/blob/ceb018d8d6d6ad2d5a3c9937380261d915d1e275/scss/elements/containers.scss#L90-L96

Seems while clicking the checkbox multiple times, the shade of the box changes inconsistently.

Darker Checked:

Lighter Checked:

Lighter Empty:

Darker Empty:

I think it may be related to clicking the label vs clicking the checkbox itself.

Since we've added commitlint, I've discussed it being removed.

Here's what I tried to just do a very basic thing:

git ci -am "fix: Merge Develop; Add Storybook and Backstopjs tests;"
git ci -am "feat(testing): Merge Develop; Add Storybook and Backstopjs tests;"
git ci -am "feat(testing): Merge Develop and add Storybook and Backstopjs tests"
git ci -am "feat(Testing): Merge Develop; Add Storybook and Backstopjs tests;"
git ci -am "Feat(testing): Merge Develop; Add Storybook and Backstopjs tests;"
git ci -am "feat(testing): Merge Develop and add Storybook and Backstopjs tests" --no-verify

Every time once of these got me an error, I tried to modify my commit messages based on the error only to get other errors.

I was done, and I wanted to use --no-verify to just skip this linting for commit message, but still, I get an error.

husky > prepare-commit-msg hook failed (cannot be bypassed with --no-verify due to Git specs)

Do we REALLY need this? I see this as anti-productive instead of the other way around.

checkbox

Look, I made the website with your framework.
https://zhengshaoguo.com

According to this comment #13 (comment)

We should remove and untrack css files.

https://i.imgur.com/TiEvmPR.png in Firerfox works fine, its normal?

Not sure if this is a good feature request, but I notice that on the <table> tag, you only changed the border-collapse CSS property, and did nothing else.

Maybe change the table design similar to the container, but with the possibility to also have borders. Could be a CSS class added to the table like is-bordered or something like that, and maybe some other things.

Example:

If you think it's a good idea I can try do this. Great job on building this project 👍

https://github.com/BcRikko/NES.css/blob/2374bef951c2a6359dcd2041d2bdb123ce396e31/css/nes.css#L604

Please check the end of the line.
In my opinion the mixin already ends the line with ; so ne need to add another when you call the mixin.

I could do a PR if needed :)

It would be great if disabled buttons rendered slightly differently (perhaps more grey-ed out?)

Borders overlap when using .table.is-bordered.

actual	expect

add margin: 4px; here 🔧

Containers content is not scrollable with response design
May be try something like overflow: scroll ?

It would be great if there could be an annotation added to the main README to get some traction on the translation side, at least to English. This could help the project accelerate quite a bit.

I understand that this issue has a previous #1 subject open, but I think this covers a larger surface.

What do you think?

Something in the lines of:

Contributors help wanted

Maintaining this project takes a lot of effort! Right now we're in need of translation help to keep a uniform English repository available for a bigger community base.

Areas in need of translation:

• Code and Documentation
• Community issues and guidelines

Is there any way we can get more social-media icons? Like Gmail, Youtube, and phone number? ❤️
Or how can i make it?

• Medium
• Twitch
• Google
• Youtube
• Phone

Hi,

First off, loving this framework ❤️ !

Would you consider adding an examples section to the readme, where people could link their
projects/websites that use this framework? I bet there are/will be a lot of cool things built with it :)
(e.g. we're building a space-invaders game for our 404 page with NES.css)

Expected behavior

Actual behavior

Testing visual frameworks is haaaaaard, but we can do eet! I prefer BackstopJS, but any visual regression testing tool would work. This would go very well with #38, as we’ll need something that renders the pieces of the framework to test. Adding docs would also go hand-in-hand with this as we could then just run the tests against the docs.

Safari is terrible at rendering NES.css

Dark containers font-color is the same as their background color

Update:

This only happens inside storybook