NES.css es un NES-style(8bit-like) CSS Framework.
NES.css se encuentra disponible a través de npm (preferente), Yarn o un CDN.
npm install nes.css
# o
yarn add nes.css
Nuestro package.json
contiene metadata adicional bajo las siguientes keys:
sass
- Ruta a nuestro archivo fuente principal de Sassstyle
- Ruta a nuestro CSS no minificado
// style.scss
@import "./node_modules/nes.css/css/nes.css"
// script.js
import "nes.css/css/nes.min.css";
Necesita instalar css-loader.
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
Importa el CSS utiliando un elemento <link />
:
<!-- minificado -->
<link href="https://unpkg.com/[email protected]/css/nes.min.css" rel="stylesheet" />
<!-- último -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- solo estilo del núcleo -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
NES.css no contiene ninguna tipografía, pero recomendamos la siguiente lista de tipografías para utilizar junto a la biblioteca.
Idioma | Tipografía |
---|---|
(Default) | Press Start 2P |
Inglés | Kongtext |
Japonés | 美咲フォント |
Japonés | Nu もち |
Coreano | 둥근모꼴 |
Chinoés | Zpix (最像素) |
NES.css sólo contiene componentes. Tú tienes que definir tu propio diseño.
La tipografía recomendada para utilizar junto a NES.css es Press Start 2P. Sin embargo, Press Start 2P sólo soporta caracteres latinos. Si utilizas este framework con otro idioma, por favor utiliza otra tipografía. Sigue las instrucciones de Google Fonts acerca de como incluirlas, o simplemente utilizalas como se muestra a continuación:
<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 que quieres usar";
}
</style>
</head>
NES.css sólo requiere de CSS y no depende de JavaScript.
NES.css es compatible con las versiones más recientes de los siguientes navegadores.
- Chrome
- Firefox
- Safari
Sin probar
- IE/Edge
Código y documentación copyright 2018 B.C.Rikko. Código publicado con Licencia MIT. Documentación publicada con Creative Commons.
Si deseas colaborar con el proyecto ¡Recibimos todo tipo de contribuciones! ¡Revisa nuestro CONTRIBUTING-es.md
para más información acerca de cómo puedes ayudar a hacer NES.css algo grandioso!