NES.css
NES.css copied to clipboard
nostalgic-css
✨NES.css@next Proposal
Is your feature request related to a problem? Please describe.
I want a flexible CSS framework using CSS Variables. https://github.com/BcRikko/NES.css-proposal
Describe the solution you'd like
NES.css is inconvenient. For example, If I want to use NES.css in a Dark Theme. The border color, background-color, etc. are different from the color I'm looking for.
Describe alternatives you've considered
<!-- default theme -->
<button class="nes-btn"></button>
<!-- my theme -->
<button class="nes-btn my-theme"></button>
/* Default theme */
:root, is-default {
--bg-color: white;
--border-color: black;
--color: black;
}
.is-primary { /**/ }
.is-success { /**/ }
.is-warning { /**/ }
.is-error { /**/ }
/* My theme */
.my-theme {
--bg-color: black;
--bordor-color: green;
--color: green;
}
.nes-btn {
background-color: var(--bg-color);
border-color: var(--border-color);
color: var(--color);
}
But IE does not support CSS Variables. 😢 If you want IE support, you need a polyfill. https://caniuse.com/#feat=css-variables
But IE does not support CSS Variables. 😢 If you want IE support, you need a polyfill. https://caniuse.com/#feat=css-variables
NES.css shouldn't have a polyfill, if you want to support IE11 you can use something like nextcss or postcss-preset-env to render css variables to support IE11
NES.css shouldn't have a polyfill
Sure. I agree. 👍
I don't intend to support IE11 on NES.css. 🤔 Because Windows 7 will no longer be supported in 2020. Then, IE11 will disappear from Windows. If you need to support IE 11, you can use NES.css with polyfill or nextcss, postcss. 😆🔧
<section class="nes-container">
<button class="nes-btn">default</button>
<button class="nes-btn is-dark">dark</button>
<button class="nes-btn is-primary">primary</button>
</section>
<!-- <section data-theme="dark"> -->
<section class="nes-container is-dark">
<button class="nes-btn is-light">default</button>
<button class="nes-btn">dark</button>
<button class="nes-btn is-primary">primary</button>
</section>
$black: #333;
$white: #e4e4e4;
$blue: #1E9CEE;
:root, .is-light {
--bd-color: $black;
--bg-color: $white;
--color: $black;
}
[data-theme=dark], .is-dark {
--bd-color: $white;
--bg-color: $black;
--color: $white;
}
.is-primary {
--bg-color: $blue;
--bd-color: $black;
--color: $white;
}
.nes-container {
background-color: var(--bg-color);
border: solid 5px var(--bd-color);
}
.nes-btn {
background-color: var(--bg-color);
color: var(--color);
border: solid 5px var(--bd-color);
}
It's probably better to specify CSS variables in each element. 🤔 However, the file size of CSS is likely to increase. 😭
:root {
.nes {
&-btn {
&-bg-color: #e4e4e4;
&-color: #333;
}
&-container {
&-bg-color: #e4e4e4;
&-color: #333;
}
}
}
Structure a scss project
Refer to the SASS The 7-1 Pattern. https://sass-guidelin.es/#the-7-1-pattern
./
|- base
| |- reboot.scss
| |- override
|- abstracts
| |- variables
| |- utilities
| |- mixin
|- elements
|- forms
|- icons
|- helpers
|- nes.scss
🎨Sharing color theme
// Japanese Style Theme
$japanese-apricot: #EAADBD;
$viola-mandshurica: #554562;
$sakura: #FADBE0;
[data-theme=japanese-style] {
.is-primary {
--color: $viola-mandshurica;
--border-color: $viola-mandshurica;
--background-color: $sakura;
--shadow-color: $japanese-appricot;
}
}
<html data-theme="japanese-style">
<head>
<link href="nes.css" rel="stylesheet" />
<!-- loading theme file -->
<link href="nes-theme.japanese-style.css" rel="stylesheet" />
</head>
<body>
<button class="nes-btn is-primary">Reiwa</button>
</body>
</html>
I just disagree with this idea because this allows users use colors that do not fit the nes palette. If i understood right, maybe i'm wrong, this can be used to make components with custom colors.
Since there is a possibility of conflict CSS Variable names, it's better to prefix variable names. 🤔
// `--nes-` + `<property name>`
:root {
--nes-background-color: $white;
--nes-color: $black;
}
Avvreviations such as bg increase the recognition load, so formal property names are better. 👍
Why use CSS Custom Properties(CSS Variables) instead of Sass variables
NES.css is often loaded via the CDN. Therefore, many users don't use the Sass variables. I thought CSS Custom Properties would be the best way to be able to change the theme freely even if it was read via the CDN. 🛠
I want to use dart-sass. 😎
Because We can use New Sass Module System(@use and @forward).
📚 Examples
@use
// base/_variables.scss
$font-family: "Press Start 2P" !default;
$font-size: 16px !default;
// base/generic.scss
@use `_variables` as vars;
html {
font-family: vars.$font-family;
font-size: vars.$font-size;
}
@forward
// utilties/rounded-corners-mixin.scss
/**
* private
*/
%rounded-corner-defaults { /****/ }
@mixin border-image($color) { /****/ }
@mixin compact-border-image($color) { /****/ }
@mixin border-image-repeat() { /****/ }
/**
* public
*/
@mixin rounded-corners($isDark: false) { /****/ }
@mixin compact-rounded-corners($isDark: false) { /****/ }
// utilities/_index.scss
@forward 'rounded-corners-mixin' show rounded-corners, compact-rounded-corners;
@use 'utilities';
.btn {
// OK
@include utilities.rounded-corners();
}
.btn {
// ERROR
@include utilities.border-image(#fff)
}
CSS nesting in a framework may not be good? 🤔
For example
<div class="list">
<div class="item my-custom-color"></div>
</div>
/* Bad */
.list > .item {
color: red;
}
.my-custom-color {
/* not working, because Specificity of `.list > .item` is high */
color: blue;
}
/* Alternative */
.list > .item.my-custom-color {
color: blue;
}
/* or */
.my-custom-color {
/* but I don't like `!important` */
color: blue !important;
}
/* Better?? */
.list { }
.list-item {
color: red;
}
.my-custom-color {
/* working!! */
color: blue;
}
Nested CSS works well when you create a regular website. But creating a CSS framework is a different story. 🤔
I wanted to revive this conversation since not much has happened with it in more than six months.
I think NES.css is a great idea, and I wholly support the idea of moving to CSS variables. I think there are a couple of other techniques I've learned doing CSS-based pixel art over the past couple of years that we could dig into.
clip-path
The CSS clip-path property can be used to make some really interesting shapes (via the polygon shape). I've used it to recreate some of the pixelated corners that we have on NES.css containers, but without the troublesome background colors and border elements.
We've integrated some of my border-image work into NES.css, but I think we can also replace that with clip-path. I think we can replace all border styles with clip-path.
--pixel-multiplier
I've been using an interesting technique where I use calc and a --pixel-multiplier variable to allow the size of pixels in a page to be adjustable.
Icons
We have the NES.icons library which has seen a fair amount of use over the past year. We should finally remove the original icons from NES.css and instead promote the usage of NES.icons.
Moving forward
I think the best way to move forward will be to a new next branch, to which we can merge our PRs to create the next version of NES.css. We should also create a new Github Milestone for NES.css@next, and create new Github issues for all of the changes we want to see. I can start throwing that stuff together this week if everybody is on board.
/cc @BcRikko @guastallaigor
I don't know what your plan is but this simple function to make accessing CSS variables easier to read/write could possibly help.
