DRYな備忘録

Don't Repeat Yourself.

CSS書きたくなさすぎ問題2017

css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。

参考

Gridだけやりたいやつは除外した。

  • Bootstrap
  • Materialize
  • mui
  • (追記)UIkit
  • (追記)Semantic UI
  • Pure
  • Bulma
  • Skelton
  • Spectre.css
  • Kube
  • Vuetify
  • Fictoan
  • avalanche
  • Beuter
  • Vanilla
  • Milligram
  • InvisCSS
  • Look
  • mini
  • Cutestrap
  • Buefy
  • siimple
  • Mobi
  • Modulr
  • Grd
  • Frow
  • Picnic CSS
  • Basscss
  • Blaze CSS
  • Furtive
  • LOTUS
  • Leaf CSS

後半疲れたっていうのもあり、僕的には、Skelton、Spectre、Fictoan、Milligram、Look、あたりが今後使ってみたいです。

Bootstrap

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

大御所だし、最初に言っといてやるか感

Materialize

Documentation - Materialize

f:id:otiai10:20170530145913p:plain

material-uiのcssだけ版。個人事業で使ってるけど、部分的にjs要るし、ちょっとだるみ出てきた。これ使うならMaterial-UIでええやろ感ある。なお、Material-UIは個人趣味開発で使ってる。

mui

MUI - Material Design CSS Framework

f:id:otiai10:20170530150136p:plain

Materializeと同じ雰囲気を感じる。jsあるやん。

(追記)UIkit

Thanks to id:k-holy, id:kvx

UIkit

jQuery is required as well.

アッ、ハイ。

(追記)Semantic UI

Thanks to id:oukayuka, id:wazly

Semantic UI

Just link to these files in your HTML along with the latest jQuery.

アッ、ハイ。

Reactでやりたいんだったら Semantic UI React があるけど、僕が常日頃だるいなって思ってるのは、デザインとフロントのアーキテクチャがベタベタでいいのか?っていうアレ。変じゃね?なんでデザイン策定でReact使うかjQuery使うかみたいな二択せなアカンねんと。両方つかうとか論外。

Pure

Pure

f:id:otiai10:20170530150038p:plain

cssオンリーつったらいの一番に出てくるやつ

Bulma

Bulma: a modern CSS framework based on Flexbox

f:id:otiai10:20170530150843p:plain

わりといい感じ。demadoに使ってる。

Skelton

Skeleton: Responsive CSS Boilerplate

f:id:otiai10:20170530145504p:plain

こういうのでいいんだよ、こういうので。

Spectre.css

f:id:otiai10:20170530151001p:plain

よさそう。

Kube

f:id:otiai10:20170530151207p:plain

パンくずとかもあっておもしろそうだけど、JSけっこう書かされる気がする。

Vuetify

vuetifyjs.com

Vueコンポーネントベース。却下。

Fictoan

FICTOAN • Intuitive, minimalist responsive HTML+CSS boilerplate

f:id:otiai10:20170530151936p:plain

Overview読んで、あ〜これ好き、ってなった。今度使いたい

avalanche

avalanche | A package based CSS framework.

プロジェクト構成まで口出してこないでほしい

Beuter

Beauter | A simple framework for beautiful sites

f:id:otiai10:20170530152449p:plain

完全に好みで申し訳ないんだけど、トップページのUIがあんまり好きくなかったので印象悪い

Vanilla

Documentation

f:id:otiai10:20170530152631p:plain

menu itemがらみのクリック可領域がちょっと直感的ではない。そのへんもカスタマイズしろ、ってことなのかな

Milligram

Milligram - A minimalist CSS framework.

f:id:otiai10:20170530153019p:plain

一瞬Vaporかな?って思ったけどちがう。圧巻の2kb。良いかもしれない。

InvisCSS

Invis CSS

なんかそういうことじゃねえんだよなー、っていう。僕のペインとスタートラインが違う。

Look

Look | Minimalistic CSS framework

f:id:otiai10:20170530153833p:plain

FieldsetsとかSegmentsとかおもしろそう。最後のCubeワロタ。

mini

mini.css - Minimal, responsive, style-agnostic CSS framework

f:id:otiai10:20170530154652p:plain

全体的にカクカクしてた

Cutestrap

Cutestrap

f:id:otiai10:20170530154909p:plain

さすがに機能薄すぎるんじゃねえかなと思った。

Buefy

Buefy: lightweight UI components for Vue.js based on Bulma

Vueのコンポーネントかー、残念。

siimple

siimple - Minimal CSS framework for flat and clean websites

f:id:otiai10:20170530155216p:plain

名前がややこしい。Almost Flat UIに似た印象を受けた。

Mobi

Mobi.css

Mobile Firstらしいけど、たぶん使わない。見た目が無骨すぎて。

Modulr

Modulr.css Frontend Framework

f:id:otiai10:20170530155717p:plain

色に対する並々ならぬ関心が感じられるが、これ↑残念すぎるだろ。

Grd

Grd - A CSS grid framework using Flexbox

もう頭使いたくないんです。ゆるして。

Frow

Frow CSS

f:id:otiai10:20170530160100p:plain

ほぼほぼGridとFormだけって感じ。でもFormはスタイリッシュでいい感じ。

Picnic CSS

Picnic CSS

f:id:otiai10:20170530160404p:plain

なかなかよい。「ここはすまんやけどjs書いてくれ」っていう態度も好印象です。書かねえけどな。

Basscss

Basscss

f:id:otiai10:20170530160556p:plain

Form置いてけぼりでいいんならアリなんじゃないですかね。

Blaze CSS

Blaze CSS - Open Source Modular CSS Toolkit

f:id:otiai10:20170530161108p:plain

なんかどっかで見たことあるんだよなあこの雰囲気。

Furtive

Furtive CSS

f:id:otiai10:20170530161232p:plain

Skeltonをちょっとカラフルにした印象がある。よさそう。

LOTUS

f:id:otiai10:20170530161407p:plain

フォームはシュッとしてるけどぜんたいてきに柔らかい印象。

Leaf CSS

Leaf BETA 1.0 - CSS Framework

f:id:otiai10:20170530161656p:plain

Material Designの軽量実装っぽい。いい感じなのだけれど、あまりメンテされなさそう。

雑感

  • 調べればキリがないわコレ
  • なんか適当な軸でマッピングにしてビジュアライズしてくれ誰か頼む
  • プログラマCSS考えさせるデザイナと仕事すんのつらい。デザイナからCSSフレームワーク納品されたら泣いて喜ぶ。せめてガイドラインぐらい作ってくれ。「え?出来ないんですか?ww」じゃねえよ、おめえのsketchファイルmarginあちこちバラバラだから!