Twitter引导自定义最佳实践

我正在使用LESS使用Bootstrap 2.0.3。我希望广泛地定制它，但我希望尽可能避免对源代码进行更改，因为对库的更改非常频繁。我是LESS的新手，所以我不知道它的编译完全是如何工作的。使用LESS或基于LESS的框架的一些最佳实践是什么?

96752 次浏览
小开

这也是我一直在挣扎的事情。一方面，我想高度定制变量。更少的文件与我自己的颜色和设置。另一方面，我想稍微改变一下Bootstrap文件，以简化升级过程。

我的解决方案(目前)是创建一个addon LESS文件，并在导入变量和mixins后将其插入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";


...

这样，如果我想重置引导颜色，字体或添加额外的mixins，我可以。我的代码是单独的，但将在Bootstrap导入的其余部分中编译。这并不完美，但这是一种权宜之计，对我来说效果很好。

小开

我的解决方案与jstam的类似，但我尽可能避免对源文件进行更改。考虑到对bootstrap的更改将是频繁的，我希望能够拉下最新的源代码，并通过将修改保存在单独的文件中来进行最小的更改。当然，它并不是完全防弹的。

  1. 复制引导。少和变量。Less to父目录。重命名引导。不太符合主题。少一点，随便你。你的目录目录结构应该是这样的:

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

  2. Update all the references in theme.less to point to bootstrap sub-directory. Ensure that your variables.less is referenced from the parent and not the bootstrap directory like so:

    ...
// 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";

    …< / p >

  3. 在主题中添加CSS覆盖。更少的文件后立即包括他们。

    ...
// 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. Link to theme.less instead of bootstrap.less in your HTML pages.

Whenever a new version comes out, your changes should be safe. You should also do a diff between your custom bootstrap files whenever a new version comes out. Variables and imports may change.

小开

如果(仅当)你有时间，你就能像我一样做这件事。我保留了我自己修改过的框架版本，每当框架更新时，我都会阅读文档并检查源代码是否有修改。

乍一看，这个解决方案可能听起来不那么理想，但我有理由这么做。我使用的不是单一的框架，而是许多框架、最佳实践、重置/规范化样式表等的混合体，我总是确信没有更新会以我没有看到的任何方式改变现有的项目。

出于以下原因，我正在使用自己的自定义框架。

  1. 我去掉了所有我不需要的东西保持模块化和小
  2. 我使用我的框架来处理客户的工作，我想a)知道我到底在做什么，b)拥有我卖给客户的所有东西。我不是简单地复制和使用框架，而是尝试理解和重新创建框架
  3. 我将我的框架与CMS结合使用，不能简单地将框架丢弃并忘记到项目中/从头开始
小开

我得到了和乔尔一样的解决方案:

自定义较少文件

就像上面描述的:我为所有我正在定制的Less文件创建本地副本:例如:"variables-custom. "”、“alerts-custom少。”、“buttons-custom.less”少。所以我可以使用一些标准，并有我自己的补充。缺点是:当Bootstrap更新时，它真的很难迁移。

但还有一件事:

覆盖方式

在寻找工作流程时，我经常看到有人建议简单地重写样式。因此，您首先导入标准的Less文件，然后在底部添加自定义声明。这样做的好处是:更容易更新到新版本。缺点是:编译后的CSS文件包含所有重写。一些CSS选择器定义了两次。因此浏览器需要做一些改进来找出实际应用的内容。这不太干净。

我想知道为什么预处理器不够聪明来解决这样的双重声明?我在这里还缺少什么更好的工作流程吗?

小开

在我这边，我只有一个名为theme.less的文件，其中导入了boostrap.less，在下面我重写了我不想更新的变量值(即使使用LESS看起来很糟糕，但是，它更容易维护)。

这对于在variables.less中为变量设置自定义值非常有效

之后，我用bootstrap.less来编译我的theme.less文件

示例theme.less:

@import "path/to/my/bootstrap.less";
@linkColor: #MyAwesomeColor;
小开

一个更好的(恕我冒犯)方法是从名为swatchmaker的Bootswatch github项目中获得线索。这个项目是专门为建立和管理网站上的数十个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还建议你安装watchr gem，它会在.less文件更改时自动构建项目。

小开

只需添加@import "../../styles.less";(或任何你的样式表)来引导。底部少一些。这允许你在自己的styles.less中使用.gradient或.border-radius之类的Bootstrap mixins。


提交答案