web-dev-qa-db-ja.com

Twitterのブートストラップのカスタマイズのベストプラクティス

私はLESSを使ってBootstrap 2.0.3を使っています。私はそれを大規模にカスタマイズしたいのですが、ライブラリーへの変更は頻繁に行われるので可能な限りソースに変更を加えないようにしたいです。私はLESSが初めてなので、そのコンパイルが完全にどのように機能するのかわかりません。 LESSまたはLESSベースのフレームワークを扱うためのベストプラクティスは何ですか？

twitter-bootstrapless
285
Joel Rodgers

私の解決策はjstamと似ていますが、可能な限りソースファイルに変更を加えることは避けます。ブートストラップへの変更が頻繁に起こることを考えると、私は最新のソースをプルダウンして、私の変更を別々のファイルに保存することによって最小限の変更を加えることができるようにしたいです。もちろん、それは完全に防弾ではありません。

  1. Bootstrap.lessとvariables.lessを親ディレクトリにコピーします。 bootstrap.lessをtheme.lessまたはあなたが望むものに変更してください。ディレクトリのディレクトリ構造は次のようになります。

    /Website            
     theme.less
     variables.less
     /Bootstrap
     ...

  2. ブートストラップサブディレクトリを指すようにtheme.less内のすべての参照を更新します。 variables.lessが、次のようにブートストラップディレクトリではなく、親から参照されていることを確認します。

    ...
// CSS Reset
@import "bootstrap/reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";

// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";

    ...

  3. CSSのオーバーライドを、それらが含まれている場所の直後にtheme.lessファイルに追加します。

    ...
// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";

// overrides
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
    border-radius: 0 0 0 0;
    padding: 10px;
}

.nav-tabs, .nav-pills {
    text-transform: uppercase;
}

.navbar .nav > li > a {
    text-shadow: none;
}

...

  4. HTMLページでbootstrap.lessではなくtheme.lessにリンクします。

新しいバージョンが出るたびに、あなたの変更は安全であるべきです。新しいバージョンが出たときはいつでもあなたのカスタムブートストラップファイル間の差分をとるべきです。変数とインポートは変更される可能性があります。

180
Joel Rodgers

これも私が苦労したことです。一方では、私は自分の色と設定でvariables.lessファイルを高度にカスタマイズしたいです。一方、アップグレードプロセスを容易にするために、ブートストラップファイルをできるだけ変更したいと思います。

私の解決策は（今のところ）アドオンLESSファイルを作成し、変数とミックスインがインポートされた後にそれをbootstrap.lessファイルに挿入することです。だからこのようなもの：

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

この方法で、ブートストラップの色、フォントをリセットしたり、追加のミックスインを追加したりすることができます。私のコードは別ですが、残りのBootstrapインポート内でコンパイルされます。それは完璧ではありません、しかしそれは私のためにうまくいった一時停止です。

36
jstam

私の側からは、theme.lessのインポートを含むboostrap.lessという名前のファイルがあり、そのすぐ下にオーバーライドしています（LESSを使用するのが悪いように見えても、維持するほうが簡単です）。更新する。

これはvariables.less内の変数にカスタム値を持たせるのに適しています。

その後、theme.lessを使わずにbootstrap.lessファイルをコンパイルします。

例theme.less：

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;
25
sam

もっと良い（私見）アプローチは Bootswatch githubプロジェクト swatchmaker から手がかりを得ることです。このプロジェクトは、Webサイト上の多数のBootstrapテーマの構築と管理に特化しています。

プロジェクトの Makefile はswatchmaker.lessを構築します（customizations.lessのような名前に変更できます）。このファイルにはたくさんのインポートが含まれています。

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

swatchフォルダとbootswatch.lessファイルの名前は、必要に応じて変更できます。

自分のファイルに影響を与えずにBootstrapをアップグレードできるので、これは理にかなっています。実際、Makefileには、最新バージョンのBootstrapを取得するためのコマンドも含まれています。詳しくはプロジェクトページのREADMEをご覧ください。

おまけとして、READMEは.lessファイルが変更されたときに自動的にプロジェクトをビルドするwatchr gemをインストールすることをお勧めします。

5
aleemb

私はJoelと同じ解決策を見つけました：

カスタム簡易ファイル

上で説明したのと同じように：私はカスタマイズしているすべてのLessファイルのためにローカルコピーを作成します。だから私はいくつかの標準を使用して私自身の追加をすることができます。欠点は次のとおりです。ブートストラップがアップデートされるとき、それは本当に移行するのが難しいです。

しかし、他にもあります。

スタイルの上書き

ワークフローを見回すとき、私は人々が単にスタイルを上書きすることを提案しているのをしばしば見る。ですから、まず標準のLessファイルをインポートしてから、一番下にカスタム宣言を追加します。その利点は次のとおりです。新しいバージョンにアップデートする方が簡単です。欠点は次のとおりです。コンパイル済みCSSファイルにすべての上書きが含まれています。一部のCSSセレクターは2回定義されています。それで、ブラウザは実際に何を適用するべきかを見つけるためにいくらかのリフティングをする必要があります。それは本当にきれいではありません。

私はなぜプリプロセッサがそのような二重宣言を解決するのに十分賢くないのか疑問に思いますか？私がここで欠けているより良いワークフローはありますか？

4
Frank Lämmer

私がそうであるように（そしてあなただけが）あなたにはあなたがそれをすることができる時間があるならば。私は自分の修正したバージョンのフレームワークを保持しており、フレームワークが更新されるたびにドキュメントを読んでソースをチェックしています。

この解決策は一見するとあまり理想的ではないように思えるかもしれませんが、私はそうする理由があります。私は1つだけでは動作しませんが、多くのフレームワーク、ベストプラクティス、リセット/正規化スタイルシートなどを組み合わせたもので、更新によって既存のプロジェクトが変更されることは決してありません。

私は以下の理由で私自身のカスタムフレームワークで作業しています。

  1. 私はものをモジュール化して小さく保つ必要はありません
  2. 私はクライアントの仕事に私のフレームワークを使い、a）自分が何を扱っているのか正確に知りながらb）クライアントに売るものすべてを所有したいと思います。私は単にフレームワークをコピーして使うのではなく、それらを理解して作り直そうとしています
  3. 私は自分のフレームワークをCMSと組み合わせて使っていますが、フレームワークをプロジェクトに落としたり忘れたりすることはできません。最初から始めることはできません。
4
All Bits Equal

一番下のbootstrap.lessに@import "../../styles.less";（またはあなたのスタイルシートがあるところはどこでも）を追加するだけです。これにより、.gradientや.border-radiusのようなBootstrapミックスインをあなた自身のstyles.lessの中で使うことができます。

2
dallen