Bootstrap CSS をハックして Web サイトの見栄えを良くする方法

Bootstrap は、サイトの作成に関して多くのフルスタック開発者の手を握っています。私たちの多くは、Figma の使い方を知らず、優れた「デザイン」とは何かがわからず、CSS プロパティに精通していません。

しかし、私たちはデータベース スキーマを作成し、コントローラーとモデルを構築し、Google で見つけたブートストラップ テーマをビューに適用して、1 日と呼ぶのが得意です。

最終結果は、通常、サイトを作成した効率には満足していますが、結果には満足していません。

「問題ないように見えますが、最近見た素晴らしいデザイナーの素晴らしいサイトとは異なります」 -- 一般的なフルスタック開発者。

この記事は、ブートストラップをテーマにしたサイトの外観を満足させるための実用的なデザインのヒントに関するチュートリアルです。

設定

この無料のブートストラップテーマから始めます。では、改善していきましょう！

あなたの色を広げる

カラー パレットを更新する

Bootstrap には、あなたが知らなかったかもしれないカラー パレット全体が付属しています。それを利用して、他の型にはまらないブートストラップ サイトとは異なる外観を実現してください。

これらの色にアクセスするには、 scss/_variables.scssブートストラップ ファイルに追加するだけです。

 $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;

または、Bootstrap に npm セットアップを使用している場合は、コンパイルされるカスタム sass ファイルを更新します。

 @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";

これで、開始ボタンの全体的なブートストラップ プライマリ ブルーを素敵なソフト ティールに更新できます。また、 text-whiteクラスを削除して、テキストを白から黒に変更します。これは、明るい背景色で読みやすくするためです。

ヒーロー セクションの上部に色のヒントを追加します

ナビゲーションの上部に小さな境界線を追加して、 border-primaryを介して新しい青緑の原色でページに生命を吹き込むことができます。

文章

行の高さを共通要素に変更する

多くの人が知らない微妙な変更は、テキストが大きくなるにつれて行の高さを減らすことです。 CSS ファイルの一般的な HTML 要素のデフォルトの行の高さを上書きしましょう。

 h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; } 

文字間隔の更新

通常、大きな見出しはデフォルトで文字間隔が広すぎます。行の高さについて行ったように、CSS ファイルを更新して、h1 タグと h2 タグの文字間隔を縮めます。

 h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; } 

太い見出しの補足テキスト

これで、ヒーローのサポート テキストを強化できます。それと H1 タグの対比は極端です。 Leadクラスを削除して、 fs-5クラスにします。これには、より太いフォントウェイトが付属しています。

概要

これまでのところ...

このテーマのリファクタリングを 1 つのブログ投稿で行いたかったのですが、内容が多すぎます。いくつかの記事に分けています。

来週また記事 2 をチェックするか、 thefreelancedev.comで私のニュースレターを購読してください。テーマの機能セクションを更新し、いくつかの 🔥 ヒントを提供します。

また、 Refactoring UIも確認することを強くお勧めします。それは、開発者としてのデザインに対する私の見方を完全に変えました。

✌️

ここにも掲載されています。