✨NES.css@next Proposal #331

BcRikko · 2019-05-05T00:59:43Z

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

thisconnect · 2019-06-01T08:39:40Z

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

BcRikko · 2019-06-01T10:51:31Z

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. 😆🔧

BcRikko · 2019-06-06T02:13:39Z

<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;
    }
  }
}

BcRikko · 2019-06-06T05:00:15Z

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

BcRikko · 2019-06-07T08:00:38Z

🎨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>

youngkaneda · 2019-06-11T18:07:30Z

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.

BcRikko · 2019-07-04T06:46:07Z

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. 👍

BcRikko · 2019-07-24T01:48:28Z

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. 🛠

BcRikko · 2019-08-16T05:15:35Z

Proposal repository 🛠
https://github.com/BcRikko/NES.css-proposal

BcRikko · 2019-10-09T03:47:33Z

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)
}

BcRikko · 2019-12-06T02:00:22Z

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. 🤔

trezy · 2020-06-23T00:52:59Z

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.

Example

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.

Example

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

shadowtime2000 · 2020-12-19T08:30:54Z

I don't know what your plan is but this simple function to make accessing CSS variables easier to read/write could possibly help.

BcRikko · 2023-04-01T02:40:29Z

Start dev 🎉 🎉 🎉
https://github.com/nostalgic-css/NES.css/tree/next

BcRikko added the enhancement New feature or request label May 5, 2019

BcRikko self-assigned this May 5, 2019

BcRikko changed the title ~~NES.css@next~~ ✨NES.css@next May 5, 2019

BcRikko changed the title ~~✨NES.css@next~~ ✨NES.css@next Proposal May 8, 2019

guastallaigor mentioned this issue May 18, 2019

Add select is-dark #334

Closed

BcRikko mentioned this issue Jun 4, 2019

Release v2.x 🚀 #341

Merged

1 task

guastallaigor mentioned this issue Jun 4, 2019

Add Ballons dark mode #345

Closed

BcRikko mentioned this issue Aug 14, 2019

Support HTML Form Validation pseudo-classes #356

Closed

BcRikko pinned this issue Aug 19, 2019

guastallaigor mentioned this issue Oct 29, 2019

Fix bad contrast in colors #375

Open

trezy mentioned this issue Jul 2, 2020

Use with Nes.css nostalgic-css/NES.icons#1

Open

BcRikko mentioned this issue Apr 3, 2023

NES.css@next #499

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨NES.css@next Proposal #331

✨NES.css@next Proposal #331

BcRikko commented May 5, 2019 •

edited

thisconnect commented Jun 1, 2019

BcRikko commented Jun 1, 2019

BcRikko commented Jun 6, 2019 •

edited

BcRikko commented Jun 6, 2019

BcRikko commented Jun 7, 2019

youngkaneda commented Jun 11, 2019

BcRikko commented Jul 4, 2019

BcRikko commented Jul 24, 2019 •

edited

BcRikko commented Aug 16, 2019

BcRikko commented Oct 9, 2019

BcRikko commented Dec 6, 2019 •

edited

trezy commented Jun 23, 2020 •

edited

shadowtime2000 commented Dec 19, 2020

BcRikko commented Apr 1, 2023

✨NES.css@next Proposal #331

✨NES.css@next Proposal #331

Comments

BcRikko commented May 5, 2019 • edited

thisconnect commented Jun 1, 2019

BcRikko commented Jun 1, 2019

BcRikko commented Jun 6, 2019 • edited

BcRikko commented Jun 6, 2019

Structure a scss project

BcRikko commented Jun 7, 2019

🎨Sharing color theme

youngkaneda commented Jun 11, 2019

BcRikko commented Jul 4, 2019

BcRikko commented Jul 24, 2019 • edited

Why use CSS Custom Properties(CSS Variables) instead of Sass variables

BcRikko commented Aug 16, 2019

BcRikko commented Oct 9, 2019

📚 Examples

@use

@forward

BcRikko commented Dec 6, 2019 • edited

trezy commented Jun 23, 2020 • edited

clip-path

--pixel-multiplier

Icons

Moving forward

shadowtime2000 commented Dec 19, 2020

BcRikko commented Apr 1, 2023

BcRikko commented May 5, 2019 •

edited

BcRikko commented Jun 6, 2019 •

edited

BcRikko commented Jul 24, 2019 •

edited

`@use`

`@forward`

BcRikko commented Dec 6, 2019 •

edited

trezy commented Jun 23, 2020 •

edited

`clip-path`

`--pixel-multiplier`