2012-06-19 8 views
9

カスタムクラス名を必要とせずに最小限のフォーマットを適用する単純なHTML5/CSS3フレームワークを知っている人はいますか?理想的には、適切にレイアウトされたHTML5のみを使用し、サイドバーの幅などに共通のルールを使用して、最小の柔軟性で要素を配置することが理想的です。HTML5/CSS3クラスレスフレームワーク

HTML5では、カスタムクラス名は、header,navasideのような要素を必要としませんが、これを最大限に活用したフレームワークはまだ見ていません。何か案は?

明確化:私はすべての通常の容疑者(ブートストラップ、HTML%ボイラープレート、シムなど)を経験しましたが、誰も私のかゆみを傷つけません。そのかゆみは、実際のレイアウトを定義するシンプルなCSS3スタイルシートを使用して、デザインについては何も想定せず、すべてを意味的に定義する単純なHTML5構造の単純なコンボです。私はいくつかのスタイルシートを使ってそれを想像することができます。基本的なスタイルシートは要素のレイアウトを定義し、実際のデザインのために別のものを定義します。後で個別にカスタマイズすることができる、さまざまなプロジェクトの簡単な出発点として使用されます。

どうやら、私はウェズリーによって提案された道を行くと1を自分で記述する必要があります...

+0

あなたはクラスのないCSSフレームワークをしたいですか? –

+1

私は個人的に私はTwitterのブートストラップを使用しています。私の意見では非常にうまく設計されていて、かなり柔軟です。http://twitter.github.com/bootstrap/ – Dale

+1

子供と兄弟のセレクタで可能だと思いますが、 HTMLを変更する必要があります。 –

答えて

3

CSSフレームワークが、単純なカスタムスタイルシートではありません。

既に存在するものを探すのにあなたの努力を落胆させてはいけませんが、自分で書く方が良いです。おそらく多くの既存のreset.cssの1つから始めましょう。クラス名を使ってフックイン(またはアウト)することができないデフォルトのスタイルはあまり柔軟性がありません。

あなたは本当にクラスを避けるべきではありません。クラスを利用するべきです。あなたのHTML要素がどこにどのように入れ子になっているのか、タグ名だけに基づいてどのように見えるのかを知るフレームワークはありません。それが私たちが通常クラスを使用する理由の1つです。

新しいHTML5要素のセマンティクスに細心の注意を払うと、headerは必ず「あなたのページの上部があなたのロゴである」という意味ではないことがわかります。footerは単なるページ全体とasideが必ずしも「サイドバー」と同じではありません。

+1

あなたは正しいです、 "スタイルシート"は "フレームワーク"より正確な用語です。 –

1

自分でそれほどの経験はありませんが、Twitter Bootstrapが役に立ちます。グリッドシステムを使用して、ページ上の要素を簡単に配置することができます。これは、ページ上のサイドバーやその他の一般的な機能の領域を作成する場合に特に便利です。

しかし、それはクラスをかなり重く使用するので、あなたが示唆しているものとは幾分反対です。私が見たことから、クラスは非常に構造化された方法で扱われるので、あなたが探しているものに近いかもしれません。

+0

私は同じことを考えていました。非常にクラスの重いですが、素晴らしいUIコンポーネントを提供します。 –

1

https://github.com/herrshuster/style.css

これは私の現在のプロジェクトです。それはまだ展開の準備が整っていませんが、それはあなたが探しているものです。私は、あなたが持っている提案があれば、それについて話したいと思っています。 This is a test page where you can see the semantic layout

+0

ありがとう、これは素晴らしいプロジェクトのように思えます、私はもう少しそれを調べます! –

1

は、このトピックに興味がある人のために、私は、任意のクラスを使用せずにhis blogテーマを建てarticles by Heydon Pickeringを、読んでお勧めします。


私はまた、上に、純粋なCSSテーマをブログやブログなどのウェブサイトのためのfundamental classless HTML template(ページ、記事やセクションとタイトルと著者、とのすべてのウェブサイト)を作成して追加することを目指しmy projectをチェックアウトをお勧めしますそれの。このテンプレートは、HTML5のセクション、ヘッダーとフッター、および各セクションにどのWebサイトのコンテンツを配置すべきかという小さな前提を大量に使用します。 themesは、インターネット上の他のフレームワーク固有のテーマのポートです。

playground基本テンプレートに基づいてさまざまなHTMLページでテーマをテストできます(テーマ名をボックスに書き込むか、CSS URLを貼り付けるだけです)。また、その件について考えようとしているときに書いたbad old articleもあります。