近代的なUIをビルドするには

Nelson Michaelによって書かれます✏️
フロントエンドのウェブ開発は絶え間なく変化する分野であり、フレームワークやライブラリのようなツールは、我々の開発プロセスをより効果的で刺激的にするためにも継続的に進化する.
CSSフレームワークはフロントエンド開発の重要な側面です.それらは、私たちを現代のユーザーインターフェース(UI)を迅速かつ一貫して作成するのを助けます.そして、特定のタスクを実行するCSSクラスのセットを通して抽象化のレベルを提供します.
この記事では、Uniform CSS、完全に設定可能なユーティリティクラスジェネレータとCSSフレームワークをSynthetically awesome style sheet (Sass)で開発します.

ユニフォームCSSは何ですか？

それの背後にあるチームによると、ユニフォームCSSは“完全に設定可能なユーティリティジェネレータとCSSフレームワーク完全にsassに組み込まれているので、SASSの生産性を失うことなく、ユーティリティの最初のワークフローの電力を得る.”
ユニフォームCSSは、Tailwind CSSまたはStemCSSに似たワークフローを使用します.開発者は、フレームワークが提供する定義済みのCSSクラスを使用して、UIを見事に設計します.ユニフォームCSSは完全にそれは完全にSASSで構築され、機能的なCSSで完全に設定可能です.

均一なCSS

そのため、他のCSSフレームワークとは異なるCSSフレームワークを作るのでしょうか?まず、開発者がフレームワーク内のすべてをカスタマイズすることができますので、完全に設定可能です.彼らは、接頭辞と区切り文字をカスタマイズすることができます削除し、色を拡張し、さらに構文を変更し、プロパティを追加または削除します.
これが私の言いたいことです.

// All configs are done in the scss file 
// main.scss 
@use "uniform" as * with (
// add configurations here... 
 $config : (
   important : true,
   prefix : example,
   delimiter : "-",
   colors: (
      green-color : green,
      yellow-color : yellow
  ), 
   exclude : (
      padding,
      color,
      margin,
  ),
  include : (
      all 
      // includes all properties.
  )
 )
);

上のコードはCSSファイルに出力されます.

// main.css 
.example-bg-green-color {
   background-color : green !important; 
}

.example-bg-yellow-color {
   background-color : yellow !important; 
}

これで、これらのユーティリティをHTMLコードで使用できます.
均一なCSSがSASSに組み込まれているので、それはレギュラーCSSにコンパイルされます.しかし、それはまた、通常CSSのプロパティ、mixins、関数、および多くのためのベンダーの接頭辞などのSASSで動作するようになる利点を提供します.
そして、それらのperksが十分でないなら、均一なCSSを使用するとき、あなたはそれが新しいCSSプロパティへのアクセスを得るのを待つ必要はありません.
以下は、752479152からの例です.

// main.scss
@use "uniform" as * with (
  $config: (
    utilities: (
      leading-trim: (
        responsive: true,
        shorthand: leading,
        properties: (leading-trim),
        variants: (
          trim: both
        )
      ),
      text-edge: (
        shorthand: text,
        properties: (text-edge),
        variants: (
          cap: cap alphabetic
        )
      )
    )
  )
);

これは以下のようになります:

/* main.css */
.leading-trim {
       leading-trim: both;
 }
.text-cap {
       text-edge: cap alphabetic;
 }

制服 均一なCSSのインストール

制服は非常に簡単に設定することです.私たちのプロジェクトで均一なCSSを使用する3つの方法があります.一人一人見てみましょう.

Gitthubリポジトリのクローン化

単にGithubリポジトリをプロジェクトフォルダにクローンします

git clone https://github.com/ThinkUniform/uniformcss

今、我々は.scssファイルにユニフォームを追加し、コンパイルし、変更を監視する必要があります.次のようにします.

// add this to your .scss file
@use "uniform" as *;

// now we compile using one of the build scripts made available to us or just do it using a sass build process of your choice

yarn uniform

この方法をインストールすることで、私たちのニーズを満たすために完全にユニフォームを設定できます.

NPM経由でのインストール

ノードがある場合.JSがインストールされ、次にこのコマンドを使います.

npm install uniformcss
// add this to your .scss file
@use "uniform" as *;

ここでは、 のwatch Sassの拡張などの好ましいSASSビルドプロセスを使用して変更をコンパイルおよび監視できます.この方法を均等にインストールすると、完全に我々のニーズに合わせて設定することができます.

ビジュアルスタジオコード CDNからのインストール

あなたのHTMLドキュメントの先頭タグにcdnリンクを追加します.

https://cdn.jsdelivr.net/npm/[email protected]/dist/uniform.min.css

このオプションを使用すると、コンパイル前のバージョンを使用する場合は、基本的な調整を行うことができます.
CDNオプションを使用している場合は、ユニフォームを設定するには、以下のように単純に:rootの擬似要素でCSS変数をオーバーライドします.

:root{
  --font-sans : 'Poppins', sans-serif;
  --primary-700 : 255, 224, 249
}

これらの変数をHTMLドキュメントで使用できます.

<h1 class="font-sans color-primary-700">Hi there!</h1>

プロジェクトでの均一なCSSの使用

次に、ユニフォームユーティリティクラスを使用して簡単なカードコンポーネントを構築しましょう.
これは小さなプロジェクトですので、まずはCDNを使ってユニフォームをインストールします.しかし、追加の設定オプションが必要な場合は、NPM経由でインストールする必要があります.
次のcdnリンクをHTMLファイルの先頭タグに追加します.

https://cdn.jsdelivr.net/npm/[email protected]/dist/uniform.min.css

現在のCSSユーティリティクラスのすべてをHTMLカードコンポーネントに適用できます.

<main class="flex justify-content-center relative top-80 font-serif">
  <div class="flex flex-col justify-content-between shadow-lg w-448 radius-lg">
      <img src="https://images.unsplash.com/photo-1593990965215-075c1f918806?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="A black man with dark shades on" class="h-288 object-cover object-center radius-lg">

      <div class="text-center p-12">
        <h2 class="ultrabold text-2xl p-10">Nelson Michael</h2>        
        <p class="text-sm">thatsnotreallymyface@gmail.com</p>
      </div>

      <div class="flex justify-content-between m-auto w-320 p-20 text-center">
        <div>
          <h3 class="extrabold text-xl">25</h3>
          <p class="text-sm">Posts</p>
        </div>

        <div>
          <h3 class="extrabold text-xl">350</h3>
          <p class="text-sm">Following</p>
        </div>

        <div>
          <h3 class="extrabold text-xl">1.5k</h3>
          <p class="text-sm">Followers</p>
        </div>
      </div>
  </div>
</main>

以下は で、すべてのクラスが利用可能であることを示します.これは、最終的なビルドがどのように見えるかです.
我々は単にいくつかのクラスを追加することによって我々のCSSファイルに触れることなく、この単純なカードコンポーネントを作成することができた.
以下に例を示します:
上の例では、再利用可能なコンポーネントを統一的に作成する方法は簡単です.我々は設定を調整する必要がある場合を除き、我々のCSSファイルに触れることなくこれを達成しました.

API参照 ブラウザのサポート

ユニフォームCSSは現在、安定版のChrome、Firefox、EDGE、Safariをサポートしています.Internet Explorer 11を含む任意のバージョンでは動作しません.

結論

一方、カスタマイズと能力を追加し、クラスを削除することを可能にする間、ユニフォームCSSは大きなフロントエンド開発ツールです.このチュートリアルが役に立つことを願っています.

あなたのフロントエンドは、ユーザーのCPUをhoggingですか？

Webフロントエンドがますます複雑になるにつれて、リソース貪欲な特徴はブラウザからますます要求する.クライアント側のCPU使用量、メモリ使用量、およびすべてのユーザーの生産を監視し追跡することに興味があるなら、 .
try LogRocket
ウェブアプリのDVRのように、あなたのWebアプリケーションやサイトで発生するすべての記録.問題が発生する理由を推測する代わりに、集計することができますし、キーフロントエンドのパフォーマンスの測定については、アプリケーションの状態と一緒に再生ユーザーセッション、ログネットワークの要求を報告し、自動的にすべてのエラーを表面.
Webアプリケーションのデバッグ方法を近代化します.