KOR UIを使用したDED . TOクローンの構築

この物語は、我々が既存のウェブサイトやWebアプリのフロントエンドをクローン化するシリーズの最初のです.

🗺️ 概要

Dev . toは、ソフトウェア開発に関連した話題のまわりでコミュニティ議論に集中したウェブサイトです.我々は、レイアウトとコンテンツの豊かさのために我々のプロジェクトの基礎としてホームページを選択している.

オリジナル曲右:KOR UIクローン
合計で、34のKor構成要素、8つの標準的なHTML要素(例えばdiv、Br)が使われました、そして、27のCSS規則だけが適用されました.
プロジェクトのために我々によって選ばれるテクノロジーは角度(SCSSスタイルシートで)で、コードベースはStackblitz projectで見つかります.

🎨 第1部：テーマの設定

DEV . toビジュアル言語は既にKor UIの既定のスタイルにかなり近いですが、色、フォント、およびコンポーネントのスタイルの3つのレベルでカスタマイズを介して処理されているいくつかの違いがあります.
多くのスタイルが共有されて、ゼロから定義される必要がないので、このケースでは、我々はデフォルトの暗いテーマを広げるのを選びました.

左:標準的なKOR UI暗いテーマ;カスタムテーマ

色

デフォルト色とDED . TOによって使用されるものとの間の最も明白な発散は、青色のishベース色に関するものです.両方のスキームの明るさは似ていますが、色は正確に意図された視覚的外観に合うように調整されました.
そのうえ、主なアクセント色はDEV . TOで使われる紫のトーンにマッチするために調整されました(例えばボタンまたは活動的なタブハイライトに関して見てください).

*[theme="dark"] {
  /* accent colors changed from blue to purple */
  --accent-1: 123, 120, 255;
  --accent-1b: 133, 130, 255;
  --accent-1c: 113, 110, 245;{
  /* base colors changed from dark gray to dark blue tones */
  --base-0: 26, 38, 52;
  --base-1: 13, 19, 26;
  --base-2: 20, 29, 39;
  --base-3: 26, 38, 52;
  --base-4: 45, 45, 45;
}

フォント

フォントのサイズとフォントファミリ:dev . toの2種類のデフォルトのKor UIのテーマとは異なります.
フォントはdev . toで大きいので、フォントサイズの値はすべてのテキストスタイルで2 pxで増加しました.例えば、本体フォントは14 pxから16 pxに変更されている.
フォントファミリもオープンサンからサンセリフ(カスタムフォントは便宜のために読み込まれていない)に変更されました.

*[theme="dark"] {
  /* font sizes and family have been tweaked */
  --body-1: normal 16px/24px sans-serif;
  --body-2: normal 14px/16px sans-serif;
  --header-1: bold 18px/24px sans-serif;
  --header-2: bold 16px/24px sans-serif;
  font-family: sans-serif;
}

コンポーネント

いくつかのコンポーネントは、dev . toで使用されるもののデザインにマッチするようにカスタマイズされたデフォルトのスタイルを持たなければなりませんでした.ここでは完全なリストです.

主要なボタンは、黒の代わりに黒に設定されたフォントの色があった.

タブは底の境界線を削除し、タブ項目の垂直/水平サイズは

メニューアイテムは、

のホッキング時にテキスト色を紫色(アクセント)に変えました

タグは、境界線が削除され、フォントの色がライターシェードに変更されました

/* standard component style changes */
kor-button[color="primary"] {
  color: var(--neutral-2);
}
kor-tabs {
  border: unset;
  kor-tab-item {
    height: 40px;
    padding: 0 12px;
    min-width: unset;
  }
}
kor-menu-item:hover {
  --text-1: rgb(var(--accent-1));
}
kor-tag {
  border: unset;
  &:not(:hover) {
    --text-1: var(--text-2);
  }
}

📐 パート2 :レイアウトの定義

1280 pxより広いビューポートでは、ウェブサイトのコンテンツは、エッジからエッジにまたがる代わりにページに集中します.このため、水平パッドはkor-app-barとkor-grid自体に追加されている.
DEV . TOのホームページは2次元グリッドに基づいているので、kor-gridコンポーネントが使用され、以下のイメージに示すようにgrid-template-columns: 240px 2fr 1frに設定されています.

🏁 結論

このポストでは、KOR UIの柔軟性と開発者とデザイナーがどのようにテーマをカスタマイズすることができます.
どのように色とフォントを変更することができるかについて示すのに加えて、個々のコンポーネントが彼らのふるまいを彼らのふるまいを損なうことなく修正することができるのを見ました.
さらに、最小の設定とグリッドのようなコンポーネントの使用を通して、どのように複雑なレイアウトを達成できるかを示しました.
このシリーズの次の話では、モバイルアプリケーションを含む、より多様なユースケースをカバーします.私たちはあなたが有益な情報を見つけて、次回お会いすることを期待!