AstroBlaster
ABUI - AstroBlaster User Interface

ABUIは、ユーザーインターフェースの標準化および開発の効率化のためのデザインライブラリです。レスポンシブでモバイルファーストなWebのためのHTML、CSS、JavaScriptのフレームワークであるBootstrapをベースとして独自に拡張とチューニングを施し、業務システムのUIに求められる様々な入力コントロールやUIパターンを揃えています。ここではそのごく一部を抜粋して掲載しています。

基本コンポーネント

テキスト入力

※注釈

エラーメッセージ

ドロップダウン

チェックボックス & ラジオボタン

チェックボックス

ラジオボタン

ボタン

スライダー

プログレスバー

パジネーション

テーブル

1 2 3 thの強調
1 2 3 4
1 2 3 4
文字色変更 文字色変更 文字色変更 文字色変更
セル色変更 セル色変更 セル色変更 セル色変更
ソート降順 ソート降順 現在基準 ソート昇順 7

ツールチップ

タブ

1のコンテンツ

2のコンテンツ

3のコンテンツ

画像

ダイアログ

モーダル

通知

グラフチャート

スタイル

カラー

primary/success
astro-blue#029df4
info
turquoise#11b7a8
warning
olive#b9ca14
 
orange#ffa531
Danger
rose#f55361
 
violet#826bd3
 
gray-darker#121618
本文テキスト など
gray-dark#2d383c
 
gray#45545b
デフォルトボタン など
gray-light#657a84
注釈テキスト など
gray-lighter#98a9b0
枠線 など
gray-subtle#d0d6da
地色など
gray-subtler#e4e9ea

タイポグラフィ

Lato
Spica Neue
heading1

といっても、大げさに言うほどの

heading2

ことでもない。ご存じのとおり、地球、

heading3

木星、火星、金星みたいに名前のある大きな星の

heading4

ほかに、望遠鏡でもたまにしか見えない小さなものも、何100倍とある。

heading5
たとえばそういったものがひとつ、星博士に見つかると、番号で呼ばれることになる。
body

〈小惑星325〉という感じで。ちゃんとしたわけがあって、王子くんお住まいの星は、小惑星B612だと、ぼくは思う。前にも、1909年に、望遠鏡を覗いていたトルコの星博士が、その星を見つけている。それで、世界星博士会議、というところで、見つけたことをきちんと発表したんだけど、身につけている服のせいで、信じてもらえなかった。

section-title

おとなの人って、いつもこんな風だ。でも、

section-text

小惑星B612は運がよくて、そのときのいちばん偉い人が、みんなにヨーロッパ風の服を着ないと死刑だぞ、というおふれを出した。

label

1920年にその人は、お上品な召しもので、発表をやりなおした。すると今度は、どこもだれもがうんうんとうなずいた。

note

こうやって、小惑星B612のことをいちいちいったり、番号の話をしたりするのは、おとなのためなんだ。おとなの人は、数字が大好きだ。この人たちに、新しい友だちができたよといっても、中身のあることはなにひとつきいてこないだろう。

blockquote

すっごくかんたんなことなんだ。
心でなくちゃ、よく見えない。
かんじんなことは、目では見えないってこと。

サン=テグジュペリ 『LE PETIT PRINCE』より

アイコン

パターン

ステッパー入力

 

スライダー入力

cm
  • -3.0
  • -2.0
  • -1.0
  • ±0
  • +1.0
  • +2.0

ログイン