Uncordingをアップグレードしました。

「Theme・Download|Uncording」
http://uncording.ma-san.org/theme/

コンポーネント一覧
http://uncording.ma-san.org/theme/uncording_2column/component.html

細かい改修とComponentの追加。
実装でよく使うようなレイアウトだったりを簡単に実装できるようにしたいな、と常々思っていたのでこれで少しは楽になる、かも。
とはいえ好き嫌いのあるような命名だったりするのと、classを細かく割り振ることでclass名の重複による不具合などは回避できるとはいえコード上ではちょっと見栄えが悪いかもなぁ、というのは目をつぶりたいところ。
タグに直接スタイルを反映するのはタグが変わった瞬間に破綻するのでそこはクラス付与で頑張ります。

Componentはごそっと削除しても基本的なModuleには影響がないので、不必要な場合は削除してもOKです。

ボタン周りとか二種類になるけどどうすんねんみたいな……。
案件やっていてデザイナーから上がってくるものに多いのって、ボタンの種類が結構豊富なんですよね。そこに良し悪しをはっきり決めることができない場合もあるので、面倒だから数種類程度には耐えられるようにしました。

また、ここのマークアップはhタグで、pタグで、みたいな意味を持たせるようなところでもほとんどdivかspanで構成しています。
理由としてはWebサイトの構成によってマークアップのルールも変わる場合も多いので、たいていの場合でも耐えられるようにdivとspanで構成しています。
hタグやろ!みたいなところは各々で自由にどうぞ。

以下Componentの簡単な説明。

▼appbar(アプリバー)

そのままですね。よくヘッダーとかについてくるあれです。
3種類用意しています。
ボタンが左右にある場合、片方にしかない場合、それとアイコンじゃなくってテキストの場合も用意しています。
え、ちゃんとスライドメニューも用意しろって?そこはご自由にどうぞ。

▼avatar(アバター)

これも最近需要がある。チャット機能だったりログインログオフの機能、はたまたコメント表示に使ったりするパーツです。

▼badge(バッジ)

これも必須になりつつある。アイコンにバッジを重ねるのが主流っぽいので重ねています。
また、インラインで使いたい場合もあると思うのでそちらも用意。

▼box(ボックス)

これはまぁ、Moduleそのままなわけですが。結構このタイプ使ったりします。

▼buttons(ボタン)

種類は豊富にあると見せかけて、色違いなだけなので事実上2パターン。特にクラス名を見てもらうと分かるのですがSuccessとかWarningとかなので単純に複数種類のボタンを用意って場合では耐えられないかも。
サイズ違いとかも用意しようかなぁと思ったのですが、ここで新たなクラスSとかMとかLとか用意するときりがないしということでこのままで。
buttonタグとaタグで用意してあります。

▼card(カード)

これもかなり需要があります。というか、大体のコンテンツはこれで表現できるのでは?
タイトルとか画像の表示とか、アイコンとかユーザーの名前からサブタイトル、ボタンの領域など。
また、Instagram的な見せ方も多いのでそれようにも作ってあります。

▼icons(アイコン)

SVGなので使いたい人はどうぞ。

▼nav(ナビゲーション)

縦並びのナビはかなり多いというか必須みたいなものなのでこちらをどうぞ。
また、チャット機能とか通知機能を利用する場合はバッジの表現も必須なので用意してます。右側に余白を多くとっているのですが、不必要な場合は改良しちゃってください。
横並びは下記のタブを改良してどうぞ。

▼pager(ページャー)

これも必須。大量のコンテンツ管理だとね。
あと鬼門なのはNext・Backの管理ね。文字数が増えると見栄えも悪くなるし、横並びにするとどうしても限界あるよね。
とはいえ1カラムにするのは正直どうよって感じなので、がんばってちょ。

▼paper(ペーパー)

部分的にボックスシャドウとか付けたい、とか意外と指示があったりするので、逃げ用。

▼table(テーブル)

これはなぁ、レスポンシブWebデザインの鬼門。というか本当、人によって最も見え方に差があるもの。
全体見えてないと見難いという人、横スクロールじゃないと嫌って人、1カラムにならないとダメって人とかすごい多い。
ということでシンプルな形で、overflowしたら横スクロール出るぜーって形にしております。
ちなみにModuleで用意しているテーブルはなにしようともoverflowしなくって飛び出ます。
表を扱うのに列が4とか5とかで収まらないこと多すぎワロタ。

▼tabs(タブ)

タブ(完)
これ、正直面倒くさいし誰にとって得するのか理解ができないのですが、ナビゲーションの代替機能的なもんだと割りきって用意しています。

▼form(フォーム)

Webサイトを作成するんだったらお問い合わせフォームとか必須やん?っちゅーことで用意。
よくある形で用意はしてみたものの、正直不本意な実装もあったりするのでそこはよしなに。

 

ちゅーわけで案件で、ほぼ個人で完結する場合によく使う奴らでした。

 

ma-san

日々ラーメンとWebについてぶちかましてます!!東北地方でもWebアクセシビリティやるぞ!!