Web開発
CSS Bed: Web開発の出発点として使えるクラスレスCSSテーマ集
CSS Bed: Classless CSS themes to use as starting points in web development (cssbed.com)
要約
CSS Bedは、Web開発の出発点として利用できるクラスレスCSSテーマのコレクションです。これらのテーマは、レスポンシブ対応、優れたブラウザサポート、軽量サイズ、学習コストの低さといった利点を提供します。HTML構造をそのまま利用できるため、フレームワークの学習やクラス名の管理に煩わされることなく、迅速に美しいデザインのウェブサイトを構築できます。
全文翻訳
CSS Bed
これは、Web開発の出発点として使用できるクラスレスCSSテーマのコレクションです。
ソースはこちら。
このテーマをどうやって入手しますか?
ウェブサイトの<head>にこのスニペットを貼り付けてください。
バグを見つけましたか?リストにテーマを追加したいですか?
githubでcssbedソースを見る
この同じページを別のクラスレステーマで見る
HTMLのみ
awsm.css
bahunya
bamboo
bootstrap
evenbettermotherfucking
holiday.css
kacit
marx
meyer
minicss
mvp.css
no-class
pico.css
sakura
sakura-vader
simple.css
stylize.css
tacit
thebestmotherfucking
tufte
vanillacss
w3c-chocolate
w3c-traditional
water.css-dark
water.css-light
writ
yorha
なぜクラスレステーマを使うのか?
レスポンシブ
優れたブラウザサポートeautiful
小型サイズ(数KB未満)- あらゆるウィジェットにバイトを無駄にしません。
学習曲線なし - ドキュメントに行ってどのクラスが何をするかを学ぶ必要がなく、そうでなければフレームワークと戦う必要もなく、通常のHTMLを使用します。
元のHacker Newsスレッド
レスポンシブですか?
ええ、そうです!派手なスタイルは含まれていないため、モバイルでも簡単にレスポンシブ対応できます。有名なレスポンシブビューポートタグを追加するだけで、うまくいきます!実際、このページをリサイズしてみてください。すべてが非常にうまく流れることがわかるでしょう。
要素のデモ
これはデモページであるべきなので、もっと多くの要素が必要です!
フォーム要素
メール
ユーザーID(読み取り専用)
ランダム無効入力
私について
ラジオボタンを選択してください:
John Doe
Jane Doe
Johnny Doe
チェックボックス
チェックなし
私を覚えていてください
コード
以下はコードです。Ctrl-Cでコピーできます。
知っていましたか、alert(1)はJavaScriptでアラートを表示できます!
// これはコンソールにメッセージをログ出力します
console.log('Hello, world!')
その他
ここに水平線と画像があります。他にどこに置けばいいかわからないからです。
これはボタンです、またはよりフォーマルなOKです。
これは引用ブロックです。
昔ながらの整形済みテキスト、コードは一切なし
|
/|
****************************
(\_/)
/ @ @ \
* "Purrrfectly pleasant" *
(='.'=)
( > º < )
* Poppy Prinz *
(