| /* | |
| A simple little SCSS mixin for creating scrim gradients | |
| Inspired by Andreas Larson - https://github.com/larsenwork | |
| https://css-tricks.com/easing-linear-gradients/ | |
| */ | |
| @mixin scrimGradient($startColor: $color-black, $direction: 'to bottom') { | |
| $scrimCoordinates: ( |
デザインレビューとは、減点方式である。レビュアーがクライアントであれディレクターであれ代理店であれ、往々にして良いところよりも悪いところが目につき、一度ついたマイナス査定を覆すのはプラス査定をとるよりも難しかったりする。（デザインそのものの完成度とは別に）
ちょっとした手抜きやミスでつまらない指摘を受けないように、自戒を込めて。
デザインカンプは原則として全て完成した状態で見せる。ワイヤーフレームがなかったり指示が不明瞭なセクションでも、「多分こんな感じだろう」でいいのでとりあえずきちんと作る。例えそれで正解でなくても、それを元に修正の指示をもらえるので効率がいい。何より、一度不完全なものを見せてしまうと、第一印象の悪さが後々まで尾をひいてしまいやすい。
「途中でもいいので見せて」と言ってくるディレクターやクライアントがいたらできるだけ拒否する。難しければ、メールに添付し忘れたフリをする、わざとぶっ壊したZIPファイルを送るなどして時間を稼げ。
デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。
このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。
基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。
ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。
| $width-comp-size: 640px; | |
| @function strip-unit($n) { | |
| @return $n / ($n * 0 + 1); | |
| } | |
| @function w($size) { | |
| $width: $size / $width-comp-size * 100%; | |
| @return $width; |
| @font-face { | |
| font-family: Emoji; | |
| src: local('Hiragino Kaku Gothic ProN'), | |
| local(Meiryo); | |
| } | |
| @font-face { | |
| font-family: Emoji; | |
| src: local('Segoe UI Emoji'), | |
| local('Segoe UI Symbol'), |
| # ==== Emojis ==== | |
| # 🐛 :bug: バグ修正 | |
| # 👍 :+1: 機能改善 | |
| # ✨ :sparkles: 部分的な機能追加 | |
| # 🎉 :tada: 盛大に祝うべき大きな機能追加 | |
| # ♻️ :recycle: リファクタリング | |
| # 🚿 :shower: 不要な機能・使われなくなった機能の削除 | |
| # 💚 :green_heart: テストやCIの修正・改善 |
| プロパティ名 | Chrome | Safari | Firefox | Edge | IE |
|---|---|---|---|---|---|
| writing-mode | △*1 | △*1 | ○ | ○ | △*2 |
| text-orientation | △*3 | - | ○*4 | - | - |
| text-combine-upright | △*5 | △*5 | - | △*6 | △*6 |
sidewaysをサポートしないsidewaysはFirefox v44からサポート予定
※ 「基本問題なし」と書いているのはIE8以降/Android4.1/iOS8以降なら大体問題無いでしょうという意味です。
http://caniuse.com/#search=font-smoothing
Make it easy to include SVG strings inline via node-sass.
Escapes SVG (via encodeURIComponent + node-sass custom function).
Wraps <svg/> with appropriate url(data...) which I can never remember.
Call:
node-sass --source-map=true --functions=./node-sass-functions.js in.scss out.css
| mixin meta(name, content) | |
| - | |
| var attrs = {}; | |
| var httpEquivRegExp = /^content-(?:encoding|length|language|type|(?:style|script)-type)|default-style|refresh|set-cookie|pragma|cache-control|expires|allow|date|last-modified|location|www-authenticate|x-(?:ua-compatible|dns-prefetch-control|rim-auto-match)$/i; | |
| var ogpRegExp = /^og:/i; | |
| name = typeof name === "string" ? name.trim() : null; | |
| content = typeof content === "string" ? content.trim() : null; | |
| if name && content |
