Milligram: 見出しのサイズを調整する必要があります。

作成日 2016年11月23日  ·  18コメント  ·  ソース: milligram/milligram

私は主にドキュメントを生成するための素晴らしいスタイルシートのためにミリグラム1.2.0を使い始めました。 多くのCSSフレームワークと比較すると、紙の上では見栄えがします。

しかし、ヘッダー! 率直に言って、 <h2><h3>の違いはわかりません。 Chromeは<h2>4.2remを取得し、 <h3>3.6rem取得していると言っていますが、それを見てもわかりません。

Milligramは、実際には徐々に小さく見える見出しサイズに切り替えることができますか? あるいは、ドキュメント向けの優れたスタイリングをすでに提供しているCSSフレームワークを教えてください。 ありがとう

improvement question

最も参考になるコメント

@nateberkopecそれは理にかなっています。 このためのPRをします。 彼らがどのように見えるか見てみましょう

全てのコメント18件

私は同意すると言わなければなりません。 フレームワークの熱心なユーザーですが、ヘッダーには何かが必要です。

こんにちは@ garretwilson @ nateberkopec

いい問題だ、みんな! これをどのように改善できるかを確認するために、いくつかのテストを行います。 これについて何か提案はありますか?

ところで、フレームワークの品質を確保するために最近追加された新機能を皆さんと共有したいと思います。 フレームワークに加えられた変更を分析して報告します。 見過ごされている詳細がある場合は、古いバージョンと比較した後に識別されます。 これは視覚的な回帰テストであり、次のバージョンの視覚的な改善に役立つはずです。

@cjpatoilo伝統的な活版印刷のスケールはここここでカバーさています

ここでの主な問題は、h1とh2のスケールが守られていないことだと思います。これらはもっと大きくする必要があります。

それらのリソースに基づいて、ここに提案があります:

h1
    font-size: 6.0rem

h2
    font-size: 4.8rem

h3
    font-size: 3.6rem

h4
    font-size: 2.4rem

h5
    font-size: 2.1rem

h6
    font-size: 1.8rem

こんなに大きなものが好きかどうかは定かではありません。 しかし、とにかく私はまだh2とh3の違いをあまり見分けることができません。 サイズを早く小さくする必要があると思います。

たぶんここでアイデアを探してください:

体型のサイズを大きくしたい場合(ミリグラムが16pxで行うように)、h1はおそらくかなり大きくなります。 それはタイポグラフィがどのように機能するかの一種です。 小さなヘッダーと大きな本文テキストを含めることはできません。5つの異なるヘッダーサイズを狭い範囲に詰め込もうとすると、ヘッダーを区別できなくなります(現在のように)。 Milligramは、本文を小さくするか(私はそれを支持しません)、ヘッダーを大きくする必要があります。

活版印刷のスケールをいじるための別のツールがあります。

H6が本文のコピーと同じサイズで問題ない場合は、次の方法があります。

h1
    font-size: 4.8rem

h2
    font-size: 3.6rem

h3
    font-size: 2.4rem

h4
    font-size: 2.1rem

h5
    font-size: 1.8rem

h6
    font-size: 1.6rem

H6が本文と同じサイズでよければ…

私はそれらの最初の3つを試したところです、そして私はそれらがずっと好きです!! そして、H6はボディと同じサイズで大丈夫です。 デフォルトでは、H6を太字にすることをお勧めします。 しかし、あなたがそうしなくても、私は個人的にはとにかくH6に行くことはめったにありません。

モバイルフォントのサイズも修正する必要があります-それらはあまりにも似すぎて使用できません。 モバイルにも同じスケールを使用することをお勧めします。

それで、これはすぐに新しいリリースに入る予定ですか?

したがって、これはv1.2.2に組み込まれなかったことがわかります。 理由は何ですか? プルリクエストを行う必要がありますか?

こんにちは@ garretwilson @ nateberkopecお疲れ様でした。 これは私にとって大きな意味があります♥

議論は開かれています! このフレームワークはオープンソースプロジェクトであり、誰でも貢献できます。 もっと多くの人があなたと同じ興味を持って貢献してくれることを願っています。 ここで話されていることはすべて調べて、できるだけ早く取り組みます。

ねえ@garretwilson npm install ..そして冷やして!

ねえ@garretwilsonnpmインストール

それが何を意味するのか明確にできますか? サイトからv1.2.2をダウンロードしましたが、含まれていないようです。 「npminstall」はまだリリースされていない最近のものを私に与えると言っているのですか? バージョンv1.2.3ですか? 私はコンピューターのようなもので、あなたが私にそれを綴らない限り、簡単に混乱します。

..そして冷やす!

これが予定されているのか、リリースされるのか、それとも何なのかわからなかったので、ステータスをチェックしていました。 私はまた、私が支援を申し出ていることを明確にしようとしていましたが、誰かがすでにこれを行っているかどうかはわかりませんでした。 どうすれば手伝うことができるか教えてください。

@nateberkopecは5.0rem(50px)の既存のh1ではありませんか? 減らすことを提案していますか? 4.8レムまで?

@sudheerDev私はタイポグラファーではなく、インターネットで何を読んだかを知っています。 活版印刷のスケールに関する上記のリンクを読むと、5ではなく4.8である理由がわかります(基本的に、ヘッダーサイズ間の間隔はパターンに従います)。

@nateberkopecそれは理にかなっています。 このためのPRをします。 彼らがどのように見えるか見てみましょう

@nateberkopec PRに感謝します!。 忙しくなったのでプッシュしません

@garretwilson @nateberkopec @sudheerDevついに、私はこれらの貢献で新しいバージョンを立ち上げることができました。 私は主要なフレームワークに基づいて見出しのサイズを検索し、最終的に要求されたもののより適切な状況に到達しました。 気に入ってくれるといいな!

見出しのサイズはもっと理にかなっています、今、ありがとう。

このページは役に立ちましたか?
0 / 5 - 0 評価