nostalgic-css / nes.css Goto Github PK
View Code? Open in Web Editor NEWNES-style CSS Framework | ファミコン風CSSフレームワーク
Home Page: https://nostalgic-css.github.io/NES.css/
License: MIT License
NES-style CSS Framework | ファミコン風CSSフレームワーク
Home Page: https://nostalgic-css.github.io/NES.css/
License: MIT License
Add table is-dark
class similar to the container.
According to this comment #13 (comment)
We should remove and untrack css files.
cssファイルがコンフリクトしてしまうので、masterにマージしたときにCIでビルドしたい
.container.with-title.is-center(.is-right)
does not work.
https://github.com/BcRikko/NES.css/blob/ceb018d8d6d6ad2d5a3c9937380261d915d1e275/scss/elements/containers.scss#L90-L96
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 👍
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.
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. 😉
Look, I made the website with your framework.
https://zhengshaoguo.com
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)
It would be great if disabled buttons rendered slightly differently (perhaps more grey-ed out?)
checkbox
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.
Input success should be the green success color, not blue. Semi-related to #19
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.
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.
If you think it's a good idea I can try do this. Great job on building this project 👍
https://i.imgur.com/TiEvmPR.png in Firerfox works fine, its normal?
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 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
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:
-dark
containers?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!
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.
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 discussed in #24, id
s are not necessary to associate label
s 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.
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)
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:
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:
brilliant repo!
it would be nice if there're 8-bit cursors.
like in https://modalzmodalzmodalz.com/
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?
.close.is-medium
alone, I did not try to make it general but I guess it would be a huge weight gaincolor
and tadaaa \o/If you think it's interesting, and does not break your compatibility goals, I'd gladly propose a PR :)
That would be great, thanks. I wish I could help on it, however I only know English and Chinese.
Is there any way we can get more social-media icons? Like Gmail, Youtube, and phone number? ❤️
Or how can i make it?
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.
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. 😉
Borders overlap when using .table.is-bordered
.
actual | expect |
---|---|
add margin: 4px;
here 🔧
NES.css/scss/elements/tables.scss
Lines 8 to 10 in ac13679
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>
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 :/
What do you think?
#87
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.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.