-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
✨NES.css@next Proposal #331
Comments
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 |
Sure. I agree. 👍 I don't intend to support IE11 on NES.css. 🤔 |
<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. 🤔 :root {
.nes {
&-btn {
&-bg-color: #e4e4e4;
&-color: #333;
}
&-container {
&-bg-color: #e4e4e4;
&-color: #333;
}
}
} |
Structure a scss projectRefer to the SASS The 7-1 Pattern.
|
🎨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 |
Why use CSS Custom Properties(CSS Variables) instead of Sass variablesNES.css is often loaded via the CDN. Therefore, many users don't use the Sass variables. |
Proposal repository 🛠 |
I want to use dart-sass. 😎 📚 Examples
|
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. |
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.
|
I don't know what your plan is but this simple function to make accessing CSS variables easier to read/write could possibly help. |
Start dev 🎉 🎉 🎉 |
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
But IE does not support CSS Variables. 😢
If you want IE support, you need a polyfill.
https://caniuse.com/#feat=css-variables
The text was updated successfully, but these errors were encountered: