|
| 1 | +<div align="center"> |
| 2 | + <a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a> |
| 3 | + |
| 4 | + <a href=".github/README-jp.md">日本語</a> / <a href=".github/README-zh-CN.md">简体中文</a> / <a href=".github/README-es.md">Español</a> / <a href=".github/README-pt-BR.md">Português</a> / <a href=".github/README-ru.md">Русский</a> / <a href=".github/README-fr.md">Français</a> |
| 5 | +</div> |
| 6 | + |
| 7 | +NES.css est un framework CSS **NES-style(8bit-like)**. |
| 8 | + |
| 9 | +[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen] |
| 10 | + |
| 11 | +## Installation |
| 12 | + |
| 13 | +### Styles |
| 14 | + |
| 15 | +NES.css est disponible via npm (recommandé), Yarn, ou par CDN. |
| 16 | + |
| 17 | +#### Par package manager |
| 18 | + |
| 19 | +```shell |
| 20 | +npm install nes.css |
| 21 | +# or |
| 22 | +yarn add nes.css |
| 23 | +``` |
| 24 | + |
| 25 | +Notre `package.json` contient quelques metadata additionnelles au travers des clefs suivantes: |
| 26 | +* `sass` - Chemin vers le fichier source Sass principal |
| 27 | +* `style` - Chemin vers le CSS non minifié |
| 28 | + |
| 29 | +##### AltCSS(sass, scss...) |
| 30 | + |
| 31 | +```scss |
| 32 | +// style.scss |
| 33 | +@import "./node_modules/nes.css/css/nes.css" |
| 34 | +``` |
| 35 | + |
| 36 | +##### JavaScript |
| 37 | + |
| 38 | +```js |
| 39 | +// script.js |
| 40 | +import "nes.css/css/nes.min.css"; |
| 41 | +``` |
| 42 | +Vous devez installer css-loader. |
| 43 | + |
| 44 | +##### HTML |
| 45 | +```html |
| 46 | +<!-- index.html --> |
| 47 | +<html> |
| 48 | + <head> |
| 49 | + <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css"> |
| 50 | + </head> |
| 51 | + <body></body> |
| 52 | +</html> |
| 53 | +``` |
| 54 | + |
| 55 | +#### Par CDN |
| 56 | + |
| 57 | +Importer le fichier CSS via la balise `<link />`: |
| 58 | + |
| 59 | +```html |
| 60 | +<!-- minify --> |
| 61 | +<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" /> |
| 62 | +<!-- latest --> |
| 63 | +<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" /> |
| 64 | +<!-- core style only --> |
| 65 | +<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" /> |
| 66 | +``` |
| 67 | + |
| 68 | +### Polices |
| 69 | + |
| 70 | +NES.css ne fournit aucune police, nous maintenons cependant la liste des polices que nous recommandons dans le cadre de l'utilisation de notre librairie. |
| 71 | + |
| 72 | +| Language | Font | |
| 73 | +| --------- | ------------------------------------------------------------------ | |
| 74 | +| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | |
| 75 | +| English | [Kongtext](https://www.dafont.com/kongtext.font) | |
| 76 | +| Japanese | [美咲フォント](http://littlelimit.net/misaki.htm) | |
| 77 | +| Japanese | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) | |
| 78 | +| Korean | [둥근모꼴](http://cactus.tistory.com/193) | |
| 79 | +| Chinese | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) | |
| 80 | + |
| 81 | +## Utilisation |
| 82 | + |
| 83 | +NES.css fournit seulement des composants, vous devez définir votre layout/structure de page |
| 84 | + |
| 85 | +La police recommandée pour l'utilisation de NES.css est [Press Start 2P][press-start-2p-font]. Toutefois, [Press Start 2P][press-start-2p-font] ne prend en charge que les caractères anglosaxons. Lorsque vous utilisez ce framework avec ds langues autre que l'anglais, nous vous recommandons d'utiliser une autre police. Suivez les [instructions][google-fonts-guide] fournis par Google Font pour les inclure, ou utilisez la méthode ci dessous : |
| 86 | + |
| 87 | +```html |
| 88 | +<head> |
| 89 | + <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> |
| 90 | + <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" /> |
| 91 | + |
| 92 | + <style> |
| 93 | + html, body, pre, code, kbd, samp { |
| 94 | + font-family: "font-family you want to use"; |
| 95 | + } |
| 96 | + </style> |
| 97 | +</head> |
| 98 | +``` |
| 99 | + |
| 100 | +## CSS seulement |
| 101 | + |
| 102 | +NES.css est constitué seulement de CSS et n'inclut ou demande aucunement du JavaScript. |
| 103 | + |
| 104 | +## Support des différents navigateurs |
| 105 | + |
| 106 | +NES.css est compatible avec la dernière version des navigateurs suivants: |
| 107 | +* Chrome |
| 108 | +* Firefox |
| 109 | +* Safari |
| 110 | + |
| 111 | +Non testé: |
| 112 | +* IE/Edge |
| 113 | + |
| 114 | +## Copyright and license |
| 115 | + |
| 116 | +Code and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons. |
| 117 | + |
| 118 | +## Developpement |
| 119 | + |
| 120 | +Si vous êtes intéressé dans la participation à ce projet, nous accueillons les contributions de chacun et êtes les bienvenus ! |
| 121 | +Lisez le fichier [`CONTRIBUTING.md`][contributing-document] pour plus de détails et d'informations sur la manière de participer et nous aider à rendre NES.css encore plus incroyable ! |
| 122 | + |
| 123 | + |
| 124 | + |
| 125 | + |
| 126 | + |
| 127 | +[commitizen]: http://commitizen.github.io/cz-cli/ |
| 128 | +[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg |
| 129 | +[contributing-document]: CONTRIBUTING.md |
| 130 | +[gitter]: https://gitter.im/nostalgic-css/Lobby |
| 131 | +[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg |
| 132 | +[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started |
| 133 | +[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P |
0 commit comments