Giter Club home page Giter Club logo

moftone's Introduction

MOFTONE

Site

About

Material Design Color をベースに、もふもふな優しい色を生成しました。「マテリアルデザインをそのまま使うとドぎつすぎるなー」と思ったときに参照する使い方を想定しています。

How To Use

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

  • ツールに合わせて dist/swatches のスウォッチファイルを使用
  • NSColorList 形式のスウォッチは Mac のさまざまなソフトウェアで共有利用が可能

コーディングで使う場合

  • CSS > デモサイトの色コードを直接コピー
  • SCSS > /src/scss/tone/_moftone.scss を変数ファイルとして include
  • Stylus > /src/stylus/tone/_moftone.styl を変数ファイルとして include

npm_moftone.scss_moftone.styl をインストールして使えます。

$ npm install moftone

Reference

License

  • CC0 1.0 Public Domain

Credit

moftone's People

Contributors

qrac avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

s-iwagishi

moftone's Issues

カラー調整

  • グリーン・イエロー系を中心に、明度・彩度が落ちすぎている部分を修正。
  • アクセントカラーの彩度を全体的に修正。

npmignoreの追加

.npmignore が無いと不要なデモもDLされてしまうので追加。

docs/
src/pug/
src/js/
src/img/
src/scss/style.scss
gulpfile.js

npm対応・プレフィックス削除

npmコマンドで _moftone.scss のみをインストール。

sass-dashi よりも前にインポートすることで、マテリアルデザインカラーを淡い「もふもふ色」に変えられる。

また、この機能を追加するために変数全体のプレフィックス mof- を削除。

色コードをJSON出力

SCSS変数データだけだと転用がもろもろ難しくなるので、JSONで出力しておく。

SCSSとStylusで色が異なる問題を解消

一括でSCSSからStylusのコードを置換出力したが、lighten などの効果が若干異なる(弱い?)ようで同じ色が出ているか怪しい。

SCSS版をマスターにして手動で色を合わせる。

スウォッチ生成の自動化

毎度、スウォッチファイル .clr .ase をIllustratorで人力制作していたもののメンテが厳しいので自動化する。

SCSS → JSON → .clr.ase

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.