🏘️ 👳 👩🏾‍🤝‍👨🏻 CSS BlueTripフレームワーク 🤝 ✍🏽 👨🏻‍🔬

プロトタイピングに便利なものを選択するために（そして理想的には共同開発者を植えるために）Wikipedia上で既存のcssフレームワークのリストを開いて、その数に驚かされました。リンクを学習する過程で、当時はブログエントリという形でのみ存在していたBlueTripプロジェクトが特に際立っていました。著者によれば、BlueTripの概念は「他のフレームワークから最も便利なものを自分用にカスタマイズする」と表現できます。残念ながら、当時のフレームワークは湿っていたので、私は手でたくさん編集しなければなりませんでしたが、しばらくして戻った後、彼は自分のウェブサイトを取得し、小児疾患を取り除きました。

BlueTripは、 BlueprintとTripoli 、 Hartijaの印刷スタイル、 960.gsのシンプルさ、およびリンク用のElementsアイコンの組み合わせです。

BlueTripの仕組み

BlueTripは、ページを幅950pxの24列のグリッドに変換します。 Divは、クラス名の特別な規則を使用して、このグリッドに「マウント」できます。

最も簡単な理解のための小さな例：

<body> 
      

        
        
        
      

     <div class="container showgrid"> 
      

        
        
        
      

     <div class="span-24 last"></div> 
      

        
        
        
      

     <hr /> 
      

        
        
        
      

     <div class="span-18 suffix-1"> </div> 
      

        
        
        
      

     <div class="span-5 last"> </div> 
      

        
        
        
      

     <div class="span-24 last"></div> 
      

        
        
        
      

     </div> 
      

        
        
        
      

     </body>

スタイルの意味：

container-処理されたBlueTripのルート要素

showgrid-グリッドの可視性を有効にします

span-24、span-18、span-5-それぞれグリッドの24、18、5列を占める要素を示します

last-文字列の最後の要素の識別子（実際にはbrのように動作します）

suffix-1-要素の後に1列のパスを残します（通常の各列にはスキップ列もあります）

このコードは、ヘッダー、地下室、18と5列の間に2つの列があり、それらの間にギャップがあるページを作成します。さらに、フレームワークによって設定されたクラスに加えて、任意のクラスを要素に自然に適用できます。

したがって、ページフレームを作成するのは非常に簡単ですが、BlueTrip機能はそこで終わりません。

ページ上のコンテンツを設計するために、BlueTripは以下のスタイルを提供します

H1-H6ヘッダー（すべての文字を大文字にするヘッダーを含む）
引用符
リスト
テーブル（ヘッダーセルを含む）
リンク（リンクタイプのサポート付き）
フォーム（確認/キャンセルボタンとステータスメッセージを含む）
それらを共通のスタイルに導く他のすべての要素

ページはxhtml 1.0検証を受け、対応するdoctypeを持ちます

結論

BlueTripは、特にスタイルの装飾を処方するのが嫌いなプログラマーにとって、ページのプロトタイピングに非常に役立ちます。 :)同時に、独自の独自のスタイルセットを作成するための基礎として正常に使用でき、内部の利点が明確かつ整然とされています。

親フレームワークに精通することをお勧めします。これらも非常に興味深いものです。

CSS BlueTripフレームワーク

BlueTripの仕組み

結論

More articles: