diff --git a/.github/CONTRUBUTING-ru.md b/.github/CONTRUBUTING-ru.md new file mode 100644 index 00000000..67b58da6 --- /dev/null +++ b/.github/CONTRUBUTING-ru.md @@ -0,0 +1,103 @@ +# Вклад + +Посмотри документы на другом языке: +[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)/ [English](../CONTRIBUTING.md) + +Хочешь внести свой вклад в проект? Отлично! + +## Вещи, которые следует знать + +Этот проект соответствует нормам поведения Contributor Covenant. Если вы участвуете, то должны соответствовать этому кодексу. Пожалуйста, обратите внимание на наши [нормы поведения][code-of-conduct] для того, чтобы сообщать о недопустимом поведении. + +**Работашь над своим первым Pull Request'ом?** +[How to Contribute to an Open Source Project on GitHub][egghead] + +## Как мне + +* Запустить проект? + [Мы тебе поможем!](#запуск-проекта) + +* Рассказать о баге? + [Дай нам знать!][new-issue] + +* Исправить баг? + [Сделай PR!][new-pr] + +* Добавить новую фичу? + Удостоверься, что есть [открытая issue][new-issue]описывающая твою фичу, затем отправь [PR][new-pr] когда будешь готов к обратной связи! + +## Запуск проекта + +Мы очень рады, что вы хотите внести свой вклад в проект! ❤️ Следующие шаги помогут вам начать работу: + +1. Сделай форк и склонируй репозиторий +2. Установи зависимости: + ```sh + $ npm install + ``` +3. Запустите сервер: + ```sh + $ npm run storybook + ``` + +### Директории +```sh +. +├── index.html: Демо страница +├── style.css: Стили демо страницы +├── css: Поставляемые файлы +├── docs: Документация Storybook +└── scss: Исходный код + ├── base + │ ├── reboot.scss: Не менять! (Bootstrap Reboot) + │ ├── generic.scss: Общие стили и reboot.css + │ └── variables.scss: Общие переменные + ├── elements + ├── components + ├── form + ├── icons: Иконки 16x16 + ├── pixel-arts: Для иконов, имеющих отличный от 16x16 формат. + └── utilities +``` + +> Совет: Следжи за тем, чтобы ваша ветка `master` указывала на оригинальный репозиторий и делайте свои Pull Request'ы из веток своего форка. Для этого запустите: +> +> ``` +> git remote add upstream https://github.com/nostalgic-css/NES.css.git +> git fetch upstream +> git branch --set-upstream-to=upstream/master master +> ``` +> +> Это добавит оригинальный репозиторий, как "удалённый" под именем "upstream" получит всю нужную информацию из него и сделает так, чтобы ваша ветка `master` использовала `upstream/master` когда вы делаете `git pull`. Теперь вы можете ветвиться от `master` . Когда вы захотите обновить свой `master`, сделайте `git pull`. + +## Вклад для членов организации `nostalgic-css` + +Ниже приведены шаги, которым должны следовать члены организации `nostalgic-css`. Внешние сотрудники должны следовать только вышеуказанным рекомендациям. + +### Шаги для разработки + +1. Ветвитесь от `develop` используя следующие правила. +2. Делайте работу, нужную для закрытия issue. Если вы делаете что-то что не удволетворяет открытым issue, [создайте новое][new-issue] и делайте работу в отдельной ветке. +3. Отправте ваш PR в `develop`. + * Любое изменение должно быть задокументированно. + * PR, который решает какое-то issue должен включать номер issue в заголовке. Например: `[#33] исправил ошибку` + * Назначте PR на себя. + * Когда PR готов к тому, чтобы стать частью основной ветки, вы должны запросить ревью у команды `nostalgic-css/NES.css`. +4. Когда изменения в вашем PR подтверждены, тот, на кого вы **назначили** ваш PR должен залить ваши изменения в основную ветку. + +### Форматирование коммитов + +Мы используем [Commitizen][commitizen] и [`commitlint`][commitlint] для того, чтобы все коммиты в репозиторий легко читались, и [`semantic-release`][semantic-release] чтобы наши релизы были автоматизированы, [неромантичны и несентиментальны][sentimental-versioning]. + + + + + +[code-of-conduct]: CODE_OF_CONDUCT.md +[commitizen]: https://github.com/commitizen/cz-cli +[commitlint]: [https://github.com/marionebl/commitlint] +[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github +[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose +[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop +[semantic-release]: https://github.com/semantic-release/semantic-release +[sentimental-versioning]: http://sentimentalversioning.org/ diff --git a/.github/README-pt-BR.md b/.github/README-pt-BR.md index 66b70314..89dc14f1 100644 --- a/.github/README-pt-BR.md +++ b/.github/README-pt-BR.md @@ -23,7 +23,7 @@ yarn add nes.css ``` Nosso `package.json` contém alguns metadata adicionais, sob as seguintes chaves: -* `sass` - caminho para nosso arquivo fronte Sass principal +* `sass` - caminho para nosso arquivo de código fonte principal Sass * `style` - caminho para nosso CSS não-minificado ### via CDN diff --git a/.github/README-ru.md b/.github/README-ru.md new file mode 100644 index 00000000..e60c2fb5 --- /dev/null +++ b/.github/README-ru.md @@ -0,0 +1,106 @@ +
+ NES.css: NES-style CSS framework + + English / 日本語 / 简体中文 / Português +
+ +NES.css - это CSS фреймворк в стиле **NES(8bit)** + +[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen] + +## Установка + +### С помощью стилей + +NES.css доступен через npm (более предпочтительный), Yarn, или CDN. + +#### Через менеджер пакетов + +```shell +npm install nes.css +# или +yarn add nes.css +``` + +Наш `package.json` содержит дополнительную информацию в этих полях: +* `sass` - Путь до главного Sass файла +* `style` - Путь до неминифицированного CSS + +#### Через CDN + +Использования через тэг ``: + +```html + + + + + + +``` + +### Шрифты + +NES.css не предоставляет никаких шрифтов, но мы поддерживаем следующие шрифты, которые рекомендуются к использованию с этой билиотекой + +| Язык | Шрифт | +|--------------|--------------------------------------------------------------------| +| По умолчанию | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | +| Английский | [Kongtext](https://www.dafont.com/kongtext.font) | +| Японский | [美咲フォント](http://littlelimit.net/misaki.htm) | +| Японский | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) | +| Корейский | [둥근모꼴](http://cactus.tistory.com/193) | + +## Использование + +NES.css предоставляет компоненты. Вам нужно будет определить собственный лейаут. + +Рекомендуемый для NES.css шрифт - [Press Start 2P][press-start-2p-font]. Однако, [Press Start 2P][press-start-2p-font] поддерживает только латинские символы. Когда вы используете NES.css не с английским языком, используйте другой шрифт. Cледуйте [инструкции][google-fonts-guide] Google Fonts про то, как их использовать или используйте их так: + +```html + + + + + + +``` + +## Только CSS + +Для NES.css нужен только CSS и совсем не нужен JavaScript + +## Поддержка браузерами + +NES.css совместим с новейшими версяями следующих браузеров: +* Chrome +* Firefox +* Safari + +Работоспособность не гарантируется: +* IE/Edge + +## Лицензия и защита авторских прав + +Código y documentación copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Код выпущен под лицензией MIT. Документация выпущена под лицензией Creative Commons. + + +## Разработка + +Мы всегда рады вкладам! Обратите внимание [`CONTRIBUTING.md`][contributing-document] для большего количества деталей о том, как вы можете помочь нам делать NES.css более крутым! + + + + + +[commitizen]: http://commitizen.github.io/cz-cli/ +[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg +[contributing-document]: ./CONTRIBUTING-es.md +[gitter]: https://gitter.im/nostalgic-css/Lobby +[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg +[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started +[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b6528dee..9d44d6d5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,7 @@ # Contributing View this document in another language: -[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) +[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) / [Русский](.github/CONTRIBUTING-ru.md) You want to contribute to the project? Awesome! diff --git a/README.md b/README.md index 5dc399c7..409f8e1c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@
NES.css: NES-style CSS framework - 日本語 / 简体中文 / Español / Português + 日本語 / 简体中文 / Español / Português / Русский
NES.css is a **NES-style(8bit-like)** CSS Framework. diff --git a/docs/script.js b/docs/script.js index 5d270197..4a2cb7f5 100644 --- a/docs/script.js +++ b/docs/script.js @@ -11,7 +11,7 @@ const sampleCollection = [ { title: 'buttons', showCode: false, - code: `Normal + code: `Normal diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss index c93d05cc..99a7285a 100644 --- a/scss/elements/buttons.scss +++ b/scss/elements/buttons.scss @@ -12,9 +12,8 @@ box-shadow: inset -4px -4px $shadow; } - &:hover, - &:focus { - color: inherit; + &:hover { + color: $color; text-decoration: none; background-color: $hover-background; @@ -23,6 +22,10 @@ } } + &:focus { + box-shadow: 0 0 0 6px rgba($shadow, 0.3); + } + &:active:not(.is-disabled)::after { box-shadow: inset 4px 4px $shadow; } diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss index 945a3266..962b8103 100644 --- a/scss/form/checkboxes.scss +++ b/scss/form/checkboxes.scss @@ -53,6 +53,8 @@ -moz-appearance: none; appearance: none; + @include visually-hidden(); + & + span { position: relative; cursor: $cursor-click-url, pointer; diff --git a/scss/form/radios.scss b/scss/form/radios.scss index f5546267..ae005369 100644 --- a/scss/form/radios.scss +++ b/scss/form/radios.scss @@ -27,6 +27,8 @@ -moz-appearance: none; appearance: none; + @include visually-hidden(); + & + span { position: relative; cursor: $cursor-click-url, pointer; diff --git a/scss/icons/instagram.scss b/scss/icons/instagram.scss index ba8e8b25..5ac00db7 100644 --- a/scss/icons/instagram.scss +++ b/scss/icons/instagram.scss @@ -3,18 +3,18 @@ $icon-instagram-colors: (#fff, #8005c8, #d40075, #e98c25, #d84646); $icon-instagram: ( ( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0), ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0), - ( 2,2,0,0,0,0,0,0,0,0,0,0,0,0,2,2), - ( 2,2,0,0,0,0,0,0,0,0,0,2,2,0,2,2), - ( 2,2,0,0,0,0,0,0,0,0,0,2,2,0,2,2), - ( 2,2,0,0,0,0,2,2,2,2,0,0,0,0,2,2), - ( 3,2,0,0,0,2,0,0,0,0,2,0,0,0,2,3), - ( 3,3,0,0,0,2,0,0,0,0,2,0,0,0,3,3), - ( 3,3,0,0,0,3,0,0,0,0,3,0,0,0,3,3), - ( 3,3,0,0,0,3,0,0,0,0,3,0,0,0,3,3), - ( 4,4,0,0,0,0,3,3,3,3,0,0,0,0,3,3), - ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,3,3), - ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,5), - ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,5), + ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2), + ( 2,2,1,1,1,1,1,1,1,1,1,2,2,1,2,2), + ( 2,2,1,1,1,1,1,1,1,1,1,2,2,1,2,2), + ( 2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2), + ( 3,2,1,1,1,2,1,1,1,1,2,1,1,1,2,3), + ( 3,3,1,1,1,2,1,1,1,1,2,1,1,1,3,3), + ( 3,3,1,1,1,3,1,1,1,1,3,1,1,1,3,3), + ( 3,3,1,1,1,3,1,1,1,1,3,1,1,1,3,3), + ( 4,4,1,1,1,1,3,3,3,3,1,1,1,1,3,3), + ( 4,4,1,1,1,1,1,1,1,1,1,1,1,1,3,3), + ( 4,4,1,1,1,1,1,1,1,1,1,1,1,1,5,5), + ( 4,4,4,1,1,1,1,1,1,1,1,1,1,5,5,5), ( 0,4,4,4,4,4,4,4,4,5,5,5,5,5,5,0), ( 0,0,4,4,4,4,4,4,5,5,5,5,5,5,0,0) ); diff --git a/scss/icons/twitter.scss b/scss/icons/twitter.scss index dfd004c9..78f6bc58 100644 --- a/scss/icons/twitter.scss +++ b/scss/icons/twitter.scss @@ -3,7 +3,7 @@ $icon-twitter-colors: (#fff, #2c9ceb); $icon-twitter: ( ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ), ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ), - ( 2,0,2,2,2,2,2,2,2,1,1,1,2,2,2,2 ), + ( 2,1,2,2,2,2,2,2,2,1,1,1,2,2,2,2 ), ( 2,1,1,1,2,2,2,2,1,1,1,1,1,2,2,2 ), ( 2,1,1,1,1,1,2,1,1,1,1,1,1,1,1,2 ), ( 2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2 ), diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss index f41374f3..aad6e053 100644 --- a/scss/pixel-arts/ash.scss +++ b/scss/pixel-arts/ash.scss @@ -4,12 +4,12 @@ $ash: ( (0,0,0,0,4,4,4,4,4,4,0,0,0,0), (0,0,0,4,2,2,2,1,1,3,4,0,0,0), - (0,0,4,2,2,2,2,1,1,1,1,4,1,0), + (0,0,4,2,2,2,2,1,1,1,1,4,0,0), (0,0,4,2,2,2,2,1,1,3,3,4,4,0), (0,4,4,4,2,2,2,2,2,2,2,2,2,4), - (0,4,4,4,4,4,4,4,2,2,2,4,4,1), - (4,4,4,4,4,4,4,5,5,4,5,4,1,1), - (0,4,4,5,5,5,4,5,5,4,5,4,1,1), + (0,4,4,4,4,4,4,4,2,2,2,4,4,0), + (4,4,4,4,4,4,4,5,5,4,5,4,0,0), + (0,4,4,5,5,5,4,5,5,4,5,4,0,0), (0,0,4,5,5,5,5,5,5,5,5,4,0,0), (0,4,7,4,4,5,5,5,5,5,4,0,0,0), (0,4,7,4,4,4,4,4,4,4,0,0,0,0), diff --git a/scss/utilities/_index.scss b/scss/utilities/_index.scss index 84834150..6531acfe 100644 --- a/scss/utilities/_index.scss +++ b/scss/utilities/_index.scss @@ -3,3 +3,4 @@ @import "animations.scss"; @import "icon-mixin.scss"; @import "rounded-corners-mixin.scss"; +@import "visually-hidden.scss"; diff --git a/scss/utilities/visually-hidden.scss b/scss/utilities/visually-hidden.scss new file mode 100644 index 00000000..4941073f --- /dev/null +++ b/scss/utilities/visually-hidden.scss @@ -0,0 +1,13 @@ +/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */ +@mixin visually-hidden() { + // position: absolute; + // margin: -1px; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; + clip-path: inset(50%); +}