NES.css é um Framework CSS, no estilo NES(8bit).
<!-- minify -->
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
OU
<!-- non-minified -->
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
TODO: Como utilizar com npm
NES.css apenas fornece os componentes. Você precisará definir seu próprio layout.
A fonte padrão é a Press Start 2P o qual oferece suporte apenas para caracteres ingleses. Quando você estiver usando este framework em qualquer outro idioma com exceção do inglês, por favor use outra fonte. Por favor, siga as instruções fornecidas pelo Google Fonts sobre como incluí-la, ou simplismente faça a inclusão como consta abaixo:
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
Idioma | Fonte |
---|---|
(Padrão) | Press Start 2P |
Inglês | Kongtext |
Japonês | 美咲フォント |
Japonês | Nu もち |
NES.css apenas usa CSS e não depende de qualquer JavaScript.
NES.css é compatível com as mais novas versões dos seguintes browsers.
- Chrome
- Firefox
- Safari
Não testado
- IE/Edge
git clone git@github.com:BcRikko/NES.css.git
cd NES.css
npm i
npm run watch
npm run build
npm run storybook
Lint, formatação e build são executados automaticamente em um hook de pré-commit.
TODO: Mudar a compilação para fazer com CI
.
├── index.html: Página de demonstração
├── style.css: Estilização da página de demonstração
├── css: Arquivos de distribuição
├── docs: "Histórias" Storybook
└── scss: Código fonte
├── base
│ ├── reboot.scss: Não modifique-o! (Bootstrap Reboot)
│ ├── generic.scss: Estilização genérica e reboot.css
│ └── variables.scss: Variáveis em comum
├── elements
├── form
├── icons: ícones 16x16
├── pixel-arts: Para ícones que não são 16x16.
└── utilities
Código e documentação copyright 2018 B.C.Rikko. Código lançado sobre a Licença MIT. Documentação e novos lançamentos com Creative Commons.