Posted at

「CSS Grid Layout Generator でレイアウト用CSSを生成する」をコピーしてみた

More than 1 year has passed since last update.

出典 : CSS Grid Layout Generator でレイアウト用CSSを生成する

大体3日で目コピしたものの紹介です。

これが今回わたしがつくったやつ

https://miyamoen.github.io/elm-grid-generator/

こっちがコピー元のmizchiさんがつくったやつ

https://mizchi-sandbox.github.io/grid-generator/

(見た目を寄せてるので気を付けてください)


これは何

mizchiさんが作ってたCSS Grid GeneratorをElmで作りました

viewライブラリとしてstyle-elementsを使っています

mizchiさんがElmでやってみてくださいとか言ってて、ちょうどCSS Gridしてたしで作りました

見た目や機能をほぼそのまま再現しました

落としてる機能としてはcontainerのサイズ指定、オートセーブ(代わりにキーボードショートカットでセーブできます)、styled-components用の書き出しです

元のと同様にinvalidなarea name指定するとぐちゃっと壊れます

IEの話は知らん


使い方

こっちみて

Ctrl-SでSave、Ctrl-LでLoad


中身の話

Elmです

Elmが何って人は今年のAdvent Calendarまとめがあるので見てください

Discordでリモートもくもく会もやっているのでちょっと覗いていってください

宣伝終わり

1日半くらいで見た目を目コピして、1日くらいでがーっと処理を書いていった感じで作りました

view部分にはstyle-elementsを使っています

gridもこれ使ってやってるんですが結果的にはcss-in-jsになる感じです


実装比較

ここでコードの比較をしようと思うんですが、いかんせんreduxとかいろいろ読めないので比較できません

比較してくれる人募集中です