ユーティリティを用いたラピッドプロトタイピング

私は柔軟性とリモートツールの共同創設者です.このポストでは、なぜ私のユーティリティの最初のCSSのフレームワークを使用して、私のウェブサイトのUIを構築することを選んだ高速、堅牢で低メンテナンスの方法です.
ここでは短いデモ＆Twitterのスレッドです(あなたが簡単に読むことを好む場合)-



ハリシッシュパルデシ
@ hrishiptweets

私は7日で私たちのコミュニティプラットフォームのV 1を構築しましたカスタムの上に構築lobste.rs 技術スタックによって:Railsの上のルビー(Truwind、JawsDB、Heroku -起動する時間):7日、コスト:17ドル/mohereの方法👇
午後11時11分

ユーティリティの最初の

1 .抽象化について前向きに心配しないラピッドプロトタイピング

私は、その実用的なクラスは、特にアプリケーション開発の最初の段階で、急速なプロトタイピングを行うときに非常に便利であると考えました.
私の第一の優先事項は、常にWord GoからCSSコンポーネントを構築することを心配することなく、ページ上でカスタムUI要素を急速に構築することです.後者のアプローチはしばしば古い抽象化につながります.すなわち、あるユースケースのためのコンポーネントを構築し、それを使用しないでください.

2 .必要なときにコンポーネントを抽出する

これらのユーティリティクラスをページ間の複数の要素に追加すると、一般的なユーティリティセットを見ることができます.

.btn-primary {
    @apply font-bold py-2 px-4 border rounded border-azure-radiance-500 hover:border-silver-500 bg-azure-radiance-500 hover:bg-silver-500 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105;
}

コアへのカスタマイズ

ウェブサイトの構築に2、3日、私はページの向こうの灰色の色合いが少し暗くなっていると気付きます.
私は灰色のための全く新しいパレットを持っています、そして、私がしなければならないすべてはTailwindの灰色のデフォルトを越えることです.

theme: {
 extend: {
  colors: {
   'gray': {
     100: '#F9F9F9',
     200: '#F0F0F0',
     300: '#E7E7E7',
     400: '#D6D6D6',
     500: '#C4C4C4',
     600: '#B0B0B0',
     700: '#767676',
     800: '#585858',
     900: '#3B3B3B',
    }
   }
 }
}

それは色だけではない.私は実質的にオーバーウインドで任意のデフォルトをオーバーライドしたり拡張したりすることができます.

簡単に反応する

Trewindは4つのブレークポイント(SM、MD、LG、XL)を提供します、そして、ブレークポイントがデフォルトで最初にモバイルであるという事実が好きです.したがって、未定義のユーティリティクラスはすべてのスクリーンに影響を及ぼします.
たとえば、このコードは右側のサイドバーのページです

<div class="w-full sm:w-1/4 sm:order-2">
  <div class="sm:mt-16 mt-4">
    <%= render "shared/right_sidebar" %>
  </div>
</div>
<div class="w-full sm:w-3/4 sm:order-1">
..
</div>

それで、DIVSの各々は640 pxと上記(SM)以外のすべてのスクリーンで全幅を占めます.

抽出されたコンポーネント以外のクラス名を指定する必要はありません

柔軟にコードを振り返るときはいつもイライラさせる1つのものはクラスの命名です.' dont - taku - words - text - content - content 'と' u - margin - bottom - big 'のような名前は、発明とみなされるべきです.
Tarwindの命名規則は直感的です.それ以上に、私は新しい名前のトンを思い付くために私の頭をかくする必要はありません.

インラインスタイルからこれはどのように異なりますか？

これは最初は私を悩ました.インラインスタイルを使うことはタブーです、そして、私がここで同じことをしているならば、私は心配しました.
しかし、両者の間には驚くべき違いがあります.インラインスタイルでは、あなたが望む何かを行うことができます.一方、Tarwindは制約を持つ設計システムを提供します、そして、あなたがしているすべてはその制約されたデザインシステムからスタイルを選ぶことです.
原子のクラスは、どんなに原子であっても、常に有限のリストのままです.
読書ありがとう!あなたがそれを好むならば、-私は、テクノロジー、製品とスタートアップについて定期的にそこで書きます.