読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

Stylus

Stylus JavaScript API とプラグインの仕組みについて

先日 foovar という Stylus のライブラリを公開しました。 Stylus の変数を JS ファイルにエクスポートするためのライブラリです。 memowomome.hatenablog.com その時に調べた Stylus JavaScript API の詳細や、プラグイン作成の方法です。 仕様の変更などに…

Stylus の変数に JS からアクセスする方法を考える

transition 、animationが使えるようになり、擬似セレクタの種類も増えてきたことで、スタイル周りの多くのことがCSSだけ(あるいはclassListのadd、remove程度の操作)で書けるようになってきた気がする。 それでも、どうしても JavaScript で操作したい時…

Case Studies in Flexbox - flex-grow, flex-shrink, flex-basis

flexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。 各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。 あれもこれもと入れていたら無駄に長くなりました。 See the Pen Case …

CSSの先頭に書くやつ

// Stylus * position relative リセット系CSSと併用することを前提にしています。 使用するライブラリにbox-sizingの設定がない場合は以下も追加します。 // Stylus :root box-sizing border-box * box-sizing inherit box-sizingに関してはsanitaze.cssを…

flexアイテム内のスクロールを有効にする

やりたいこと display: flex内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1。 そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示…

width、heightがautoの要素にtransitionを適用する

CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheight…

Stylusのあまり知られていない機能

というより、自分が最近知った機能。 ハッシュをCSSのプロパティ名と値に展開できる Stylusではハッシュが使えます。 シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。 以下のように、値に10px…

button要素にはflexboxを使わないほうが良さそうです

<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。 IEではまだ試していない。 調べてみるとどうやらこういう事らしい。 stackoverflow: Flexbox not working on <button> element in some browsers The problem is that the <button> element</button></button></button>…

chokidarを使ってファイルの変更をwatchする

Riot.jsの話。 カスタムタグが増えるにつれ、Riot CLIによるコンパイル時間がバカにならなくなってきた。 特にwatchの立ち上げ時に時間がかかる。 コンパイルオプションとしてBabelとStylusを使用しているので、最初これらを疑ったが、buildのみだとさほどか…

CSSをStylusの構文にコンバートする

CSSをStylusの構文にコンバートするオプションがStylusに用意されていることに今日気づいた。 既存のプロジェクトでCSSからStylusに移行したい時とかにはいいかもしれない。 -Cもしくは--cssオプションを使用する。 $ stylus -C path/to/source.css ./source…

話題の五輪エンブレムをCSSで動かしてみた

今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…

StylusでスキューモーフィックなCSS3ジェネレータを作った(続き)

前回のエントリー githubにアップしました。 github: all-user/stylus-skeuomorphic npm: @alluser/stylus-skeuomorphic Demo: Cassette Deck Controls 各ボタンの記号はFont Awesomeです。 このブログでも使用しています。 PlayとRecのボタンは<input type="checkbox" style="display: none;">と<label>を組み合わ</label>…

StylusでスキューモーフィックなCSS3ジェネレータを作った

ゴールデンウィーク中はずっとStylusを触ってた。 CSS3を使ったスキューモーフィックデザインで実用性を気にせず行けるとこまで行く、という実に連休らしい課題に取り組んでいた。 実際にページ内で使う事を考えると、全部画像にした方が結局出来ることも多…