Skip to content

Commit

Permalink
Refresh SCSS, Add Stylus
Browse files Browse the repository at this point in the history
  • Loading branch information
qrac committed Jun 25, 2018
1 parent 89df047 commit b1a3387
Show file tree
Hide file tree
Showing 38 changed files with 12,580 additions and 16,434 deletions.
7 changes: 7 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
docs/
src/pug/
src/js/
src/img/
src/scss/style.scss
gulpfile.js
.prettierignore
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package.json
31 changes: 19 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,30 @@

## About

Material Design ColorをSassで使いやすいよう変数化しました
Material Design Color を Sass で使いやすいよう変数化しました

## Use

### デザインツールで使う場合

- ツールに合わせてスウォッチファイルをダウンロードして使用
- NSColorList形式のスウォッチ(※)はMacの様々なソフトウェアで共有利用が可能
- NSColorList 形式のスウォッチ(※)は Mac の様々なソフトウェアで共有利用が可能

| | Illustrator | Photoshop | Sketch | Keynote / Pages / Numbers |
|:---:|:---:|:---:|:---:|:---:|
| Swatches | [Download][link-dl-a1] | [Download][link-dl-a1] | [Download][link-dl-a2] (※) | [Download][link-dl-a2] (※) |
| | Illustrator | Photoshop | Sketch | Keynote / Pages / Numbers |
| :------: | :--------------------: | :--------------------: | :------------------------: | :------------------------: |
| Swatches | [Download][link-dl-a1] | [Download][link-dl-a1] | [Download][link-dl-a2] (※) | [Download][link-dl-a2] (※) |

### コーディングで使う場合

- CSS > [Demo Page][link-demo]の色コードを直接コピー
- SCSS > `/src/scss/variable/_mdtone.scss`を変数ファイルとしてinclude
- SCSS > `/src/scss/tone/_mdtone.scss` を変数ファイルとして include
- Stylus > `/src/stylus/tone/_mdtone.styl` を変数ファイルとして include

npm で `_mdtone.scss``_mdtone.styl` をインストールして使えます。

```bash
$ npm i -D mdtone
```

## Reference

Expand All @@ -34,9 +41,9 @@ Material Design ColorをSassで使いやすいよう変数化しました。
- Author: [Qrac][link-twitter]
- Author Group: [QRANOKO][link-qranoko]

[link-demo]:https://qrac.github.io/mdtone/
[link-dl-a1]:https://qrac.github.io/mdtone/dist/swatches-mdtone.ase
[link-dl-a2]:https://qrac.github.io/mdtone/dist/swatches-mdtone.clr
[link-dl-b1]:https://qrac.github.io/mdtone/dist/template-mdtone.ai
[link-twitter]:https://twitter.com/Qrac_JP
[link-qranoko]:https://qranoko.jp
[link-demo]: https://qrac.github.io/mdtone/
[link-dl-a1]: https://qrac.github.io/mdtone/dist/swatches-mdtone.ase
[link-dl-a2]: https://qrac.github.io/mdtone/dist/swatches-mdtone.clr
[link-dl-b1]: https://qrac.github.io/mdtone/dist/template-mdtone.ai
[link-twitter]: https://twitter.com/Qrac_JP
[link-qranoko]: https://qranoko.jp
Loading

0 comments on commit b1a3387

Please sign in to comment.