CSSフレームワークをあなたに与える

CSSフレームワークの問題に取り組む多くの記事は、議論するか、潜在的オプションの落とし穴に深く掘ります.私の経験から、それより少しのニュアンスがあります.CSSフレームワークは、アクセス可能性の懸念、モーダル/ポップアップの視覚性、デスクトップ対モバイルNBバーなどのように、維持するのが難しい成長するCSSロジックのすべてを管理するための明確な場所を持っています.
しかし、どこでフレームワークを注入する必要がありますし、何をカスタムする必要がありますラインを描画しますか?詳細については、どのようにので、あなたが作る何も特別なタッチを持っているフレームワークによって制御感じを停止するのですか?

哲学

私は私の大学、ジョージア工科大学の良い組織のビットのプロジェクトチームに参加するときに最近この問題に遭遇しなければならなかった!🐝). フィニッシュラインを打つために帆の中にいくつかの深刻な風を必要とする進行中の学期をプロジェクトを継承したが、1つの小さなヒッチがあったBootstrap .
私は個人的には、新しいプロジェクトのための小さなデザインシステムをwhipping大好きなので、CSSのフレームワークへの切り替えは少し雑用のように感じた.しかし、私はそれにいくつかの明確なユーティリティを発見しました:それは今、はるかに簡単に言う、バックグラウンドフェードを使用してpopover modalsを含むか、またはタブフォーカスを気にせずにまともなボタンとドロップダウンを使用します.これによって、私のチームのLEGO BRICKアプローチですべてのものをカスタマイズする私の世界を和解させる最良の方法を発見しました.
CSSフレームワークは、要素がどのように見えるかの背後にある駆動力であるべきではありません.また、異なる画面サイズでサイトの柔軟性を管理する必要もありません.むしろ、カスタムメイドの解決が意味をなさないとき、それらはそれらの小さいビットと部分をつかむ場所でなければなりません.私は、この哲学が彼らが昨日までにされるそのホームページを必要とするとき、正当化する若干のために難しいと理解します;それでも、これはどこでカスタムが止まるか、フレームワークユーティリティが始まるところの少しの調整でどんなレベルででも働くことができると思います.ここでは、メインのポイントを拡大したいです.

クッキーカッターレイアウトに依存しないでください。

かなり単純なレイアウトがフレームワークレイアウトスタイルの制約によって過度に複雑になるので、これは私が見たかなり大きな問題です.最近のような努力Semantic UI 折り目に柔軟性を加えるより良い仕事をしました、マークアップを必要とするより長く書くことができる若干の厳しいラフな端が、あります.
私は、最近、チームメートが我々のアプリのためにかなり率直なスクリーンに取り組んでいたとき、この例を見ました:申請者情報ビュー.これは、誰かの名前、電子メール、アドレス、個人的なバイオなどを記述するヘッダーと段落のリストであることを意味していた.しかし、ブートストラップの呪いは、ドキュメントが発生しました.これ.

<Container>
  <Row>
    <Col>
      <Heading>{`${applicant.bio.first_name} ${applicant.bio.last_name}`}</Heading>
    </Col>
  </Row>
  <Row>
    <Col>
      <h5>
        <Label for="email">Email</Label>
      </h5>
      <p className="content">{applicant.bio.email}</p>
    </Col>
    <Col>
      <h5>
        <Label for="phoneNumber">Phone Number</Label>
      </h5>
      <p className="content">{applicant.bio.phone_number}</p>
    </Col>
    <Col>
      <h5>
        <Label for="birthDate">Birth Date</Label>
      </h5>
      <p className="content">{applicant.bio.date_of_birth}</p>
    </Col>
  </Row>
... a lot more row / columns

これは「スプレッドシート・ヘル」として参照しているものです.ページ上のすべてのものは、サイトを定義するいくつかの壮大なテーブルの行または列でなければならないように感じられます.ありがたいことに、これは人気のあるコンポーネントのフレームワークを使用しているので、私はあなたにより多くの労力を惜しませることができます<div class="col xs-4-72-57-sqrt(pi)"> すべてのタグ😉
はい、コンテナをゼロからクラフトすることは難しいことができます.しかし、一度使用を開始Flexbox or CSS grid より頻繁に、あなたのHTMLチャンクを取得する場所を表示するには、はるかに簡単にCSSを書くだけで感じるように開始することができます.
合計では、オーバーヘッドを減らすためにレイアウトをうまくするために、フレームワークをあなたのためにそれを行う前にいくつかのカスタムスタイリングで刺す.

それが正しいと感じるならば、その境界半径を微調整してください

CSSフレームワークによるもう一つの問題は、彼らが「ウインドウショッピング」を奨励する方法です.これは、高速で起きて、走るために働きます、しかし、私はあなたが少しも感じない無数のサイトを訪問したと確信します..ブートストラップ- Y.
これは、フレームワーク特定のことができるより困難なハードルです.ほとんどの色やフォントのオーバーライドのオプションを提供していますが、明らかにそれを超えて少し.それで、私はそれがサイトのどのコンポーネントがよりユニークな感じを持つことができて、フレームワークランドにとどまることができるかについて選ぶのを始めるのを助けるとわかります.これはあなたのデザインの好みに最もよく残されていること、そしてあなたのCSSスキルを使って何を構築できるかということです.しかし、テクスチャの背景や劇的なドロップシャドウとのアクションボタンへの呼び出しを追加するようなものを小さく変更すると、サイトのように自分自身のように感じることができます.
我々自身のサイトからの単純な例は、ここにあります.我々は、ちょうどアプリケーションのビューアにコンテンツの検索機能を追加したすべてのフロントエンドとバックエンドロジックを配線する方法を我々が望んで動作するように.しかし、私たちのクライアントに提示すると、我々は問題を発見した:それはあなたが検索しているものを変更する方法不明であった.これは、ドロップダウンアイコンのデフォルトのブートストラップボタンを使用していたためです.そこで、我々はいくつかのカスタムCSSをボタンの背景色を変更し、入力ボックスに近い、完全な境界線の半径でそれをプッシュするために勃発した.最後の結果は、はるかにクリーナー感じた!

フレームワークにあなたの機能を決定させないでください

これは、CSSフレームワークがあなたのサイト上で持つことができるあらゆる可能な要素をカバーすることはまれであるので、家をドライブする最大のポイントです.
我々のチームは、我々の管理者ダッシュボードを造るとき、かなり早くこれに乗りました.一言で言えば、我々は管理者のビューアビューアビューア情報を表示し、その承認ステータスを変更するボランティアのアプリケーションを迅速に切り替えることができる場所を設計していた.いくつかの議論の後、私たちは、電子メールパネルに似ているものは、アプリケーションの概要と左に沿ってのステータス、および右側のすべての完全なアプリケーションのためのスペースで最高の動作する可能性があることを決めた.
我々は確かにインスピレーションを見つけるためにブートストラップコンポーネントの海を介してウィンドウショッピングを行っていた可能性があります.しかし、おそらくこれはおそらくいくつかのオプションの撤退メニューまたはタブビューに向かって私たちを導いていたが、マークをかなりヒットしなかった.これは私のポイントに戻るフレームワークは、実際のユーティリティの最後の日です彼らはあなたを助けることができない場合は、それらのために到達しないでください!

我々の最終的な管理者ダッシュボード、魅力的に繰り返しダミーデータで完全です!

まとめる

建物のウェブサイトは難しいです.それは誰も驚かせるべきではない.それはCSSのフレームワークをキャッチし、すべてのゼロからのサイトを構築する必要はありません経験が必要ですが、彼らはすべてあなたのサイトの品質を妨げることができるgotchasとlimiationsの独自のセットが付属しています.新しいページで作業するときは、次のことを考えてみてください.

何をしたいのですか.

どのようなナビゲーション、レイアウト、ボタンなどは最高のあなたはそれを助けることができる?

使用しているCSSフレームワークの間に重複がありますか?

もしそうならば、スタイリングはあなたのニーズに合っていますか🌶 スイッチアップ?

少し何かを学ぶ？

聞くのが良い.あなたがそれを逃した場合はmy "web wizardry" newsletter このような知識ナゲットを探索する!
このことは"first principles" Web開発言い換えれば、すべてのJankyブラウザAPI、曲げられたCSS規則、およびすべてのWebプロジェクトをティックにするセミアクセス可能なHTMLは何ですか?あなたがフレームワークを越えて行くことを探しているならば、これはあなたのためです🔮
Subscribe away right here . 私はいつも教えて、決してスパム❤️