シンプルなテーマを作成するためのベストプラクティスは?

こんにちは!

私は、CSSに関する知識はそこそこありますが、少し古くなっています。デザイナーではありません。

CSSの上書きだけでシンプルなテーマを作成するには、どこから始めるべきでしょうか?ツール(discourse_themeなど)ではなく、純粋にデザインの観点からお尋ねします。

私がやりたいことの良い例は、ナビゲーションメニュー(nav-pills)の再設計です。
何かを達成するたびに、変更した要素が存在するコンテキストが異なるため、他の場所で何かを「壊して」しまいます。
パディングで寸法を変更すると、隣接するボタン(新規トピック)やセレクター(カテゴリ、タグ)と同じ高さにならず、不一致が生じます。
ピルにボーダーを追加すると、ナビゲーションバーはすでにボーダーで区切られているため、ユーザー設定ページでは見栄えが悪くなります。

select-kitにいくつかの変更を加えようと試みましたが、あらゆるselect-kitのバリエーションに対して変更を正しく適用するのは悪夢のようだとわかりました。

要素を再設計しようとすると、ほとんどの場合で問題が発生します。

したがって、特定のページから再設計を開始するのは正しい解決策ではないと思います。/styleguideページから始めることを考えましたが、問題が同じであることがすぐにわかります。スタイルガイドに表示される各要素は、実際のページで使用されるコンテキストを欠いています。

要素と要素間、ページ間の相互作用が非常に多いため、すぐに圧倒され、修正するために変更を指数関数的にパッチし始めます。これはまさに避けるべきことです。

私の問題の説明が曖昧すぎないことを願っています。

小さな変更を加えるのに役立つアドバイスがあれば、大歓迎です!:hugs:

私の質問はかなり広範ですが、どのような変更を目指しているかを示すために、フォーラムのデフォルトテーマと現在の作業を以下に示します。


視覚的には、表示されているものより少し多くなることはありませんし、このページは良く見えますが、現在の調整により、他のページにはグリッチが発生しているか、見栄えの悪い領域が多すぎます(もちろん、まだ発見していない領域もあります)。

「いいね!」 7

まだあなたがやろうとしていることを試したことはありませんが、試すとき(計画中です)には、あなたと同じ問題に直面するだろうと強く推測しています…なので、見守っています。

ええ、スタイルガイドから始めるのは、ここでの最も役立つアプローチではないようです。主な変更点は、背景の前にパネルを追加することのように見えますか?私のCanvas Theme Templateを見ましたか?それは出発点として役立ちますか、それともパネルのスタイルシートを借用するためだけですか?

ページレイアウトは全体で一貫していないため、かなりの数の例外を宣言する必要があります。Canvasのパネルは、これまでに私が実行した中で最も一貫した実装です。

「いいね!」 3

キャンバスを詳しく見ていなかったのは、まずそれが基盤の再設計を使用するか、互換性があるかを知りたかったからです :slight_smile:

でも、見てみます、ありがとう!

「いいね!」 2