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

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

Xcode 8.0 がリリースされていたので早速インストールして Swift 3.0 を試してみた。 拙作のライブラリ swift_combination を開いてみると既存のコードを Swift 3.0 のシンタックスにコンバートするか聞かれたので、とりあえずつっこんでみる。 memowomome.h…

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた…

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

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

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

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

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

<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>…

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

前の投稿で作ったデモをElectronで包んでアプリにしてみた。 memowomome.hatenablog.com Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。 （超優秀な同僚が組んだ物を流用している） アカベコマ…

GWはこれを作ってました。 時計と世界各地のライブカメラの映像を組み合わせたものです。 YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。 以下の操作が行えます。 時刻を表す文字のシルエットをShift+Kで…

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。 たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてび…

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