search

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.73k stars 1.65k forks source link

CSS file size is too large #284

Open BcRikko opened 5 years ago

BcRikko commented 5 years ago

CSS file size is too large. I want to make A more light. nes.css contains a lot of things that are not commonly used. (NINTENDO's Characters, large phone icon, game controllers)

（Not to change the subject, but I'm worried about copyright issues of NINTENTO's characters.）

file size
nes.css 267,508B
nes.css.map 53,334B
nes.min.css 249,973B

I propose to split the file as follows.

Usage

<!-- General usage -->
<link href="./css/nes.min.css">

<!-- If you need icons -->
<link href="./css/nes.min.css">
<link href="./css/nes-icons.min.css">

<!-- if you need pixel arts -->
<link href="./css/nes.min.css">
<link href="./css/nes-icons.min.css">
<link href="./css/nes-pixel-arts.min.css">
guastallaigor commented 5 years ago

+1 for splitting into multiple files, but I have a question ✋ If someone uses npm install or yarn add, what they will get? Just the nes.min.css or all of it?

BcRikko commented 5 years ago

It looks like this:

// scss
@import "~nes.css/scss/nes.scss";
@import "~nes.css/scss/nes-icons.scss";
@import "~nes.css/scss/nes-pixel-arts.scss";
// js
import "nes.css/css/nes.css";
import "nes.css/css/nes-icons.css";
import "nes.css/css/nes-pixel-arts.css";

// or
import "nes.css/css/nes.min.css";
import "nes.css/css/nes-icons.min.css";
import "nes.css/css/nes-pixel-arts.min.css";
BcRikko commented 5 years ago

umm... I might want all-in-one CSS file. 🤔 It's so difficult....

Thanks to everyone, CSS has been optimize. 👐 So the following might be also good. 👍

Usage

<!-- If you need only core style. this is minimum configuration -->
<link href="./css/nes-core.css">

<!-- General usage -->
<link href="./css/nes.min.css">

<!-- If you need pixel icons -->
<link href="./css/nes-core.css">
<link href="./css/nes-pixel-arts.css">

<!-- or -->
<link href="./css/nes.css">
<link href="./css/nes-pixel-arts.css">

I don't know the optimal solution. 😱 Trezy said, "You can select and download.". This issue and discussion will be unnecessary once it is completed.

theNaut1lus commented 5 years ago

Splitting is the best way to go, as with this you won't lose functionality as well as you will also gain some speed, because a user can choose which module it wants.

BcRikko commented 5 years ago

It would be nice to have a tool like this. 😆 https://codepen.io/bcrikko/full/OKNjRQ

merwok commented 5 years ago

If someone uses npm install or yarn add, what they will get? Just the nes.min.css or all of it?

I think the npm distribution could contain everything, but then people would be able to choose what they import (core, icons, etc) and the builder (webpack) would only include the needed bits in the final bundle, so you would get both convenience and performance :sparkles: