Twitter启动的垂直节奏

Question

是否有任何现有的插件/扩展/方法来维护Twitter启动项目的垂直节奏？

创建好的垂直节奏模板是一项相当辛苦的任务，我宁愿使用预焙的解决方案。我愿意接受有创意的建议，我只是希望我的页面最终能很好地对齐。

编辑:澄清我想要的是什么。

垂直节奏是一种技术，用于确保页面上的每个元素按照水平网格排列。这是通过设置每个项目的高度、填充和边距以符合标准单位线大小来实现的。如果段落中的一行文本是20 is高(包括页边距和填充)，那么标题4也可能高20 is，标题1可能高40 is。这保持了跨列文本的节奏。

我想结合使用这种技术和引导(从twitter)，但这将是相当多的工作，以使一切看起来很好。例如，所有按钮都需要符合与段落文本相同的垂直高度定义。在引导中使用的其他标准控件也都需要规则来适当地定义它们的高度。

我可以从垂直节奏的通用解决方案开始，这对于实现我想要的东西有很长的路要走，但我想知道是否还有其他人开始这样做，或者有其他方法来实现这个目标。

编辑:假设没有我想要的东西.

也许一个好的垂直节奏的css模板将是一个很好的起点。最好是继续发展的东西，已经是可用的，深思熟虑的，可适应的。

Answer 1

因为没有人像你建议的那样链接到实际的垂直节奏样板，所以我选择了我使用的模板，对其进行了注释，并在这里为它创建了一个github回购程序，https://github.com/jonschlinkert/vertical-rhythm

正如自述的那样，这是您自己项目的起点。

Answer 2

我想你要追求的东西是可以理解的。问题是:您正在寻找一维的网格模式(例如，按照比例线heights...which设置的“垂直节奏”，也就是说，测量和对齐给定页面的Y轴上的事物)，以这种方式执行的...but可能会与Bootstrap先前存在的12列网格系统(相比之下，测量和对齐页面的X轴)不一致。您希望将框架中每个“行”的高度“成比例”。但是:请记住，Bootstrap的设计不仅仅是为了让页面看起来好看，而且也是为了让页面具有响应性--也就是说，允许页面元素相互垂直地“流动”，并流畅地嵌套。在这个意义上，与沿Y轴测量的元素高度有关的问题可能已经被考虑.我记得，基本CSS文件中的大多数排版元素都有比例em大小，和/或同样比例的顶部和底部填充等等。一般来说，情况并不是如此武断，框架要求以您正在考虑的方式进行额外的样式设计。

即使如此:引导程序的基本CSS文件并不是那么广泛，以至于您不可能自己调整各种元素类和ID的高度，而不会遇到太多麻烦。在任何情况下，这是非常不可能的，你真的需要用每个样式的元素，对吗？事实上，作为一个框架，Bootstrap包括许多元素的样式，这些元素甚至可能不在您正在为其设计前端的应用程序中。(例如:你的应用程序有下拉菜单吗？太棒了。您可以样式的“垂直节奏”的下拉菜单。但是:你也在你的导航栏里使用药片或标签吗？你说不吃药？那么，您可以删除样式表中的几百行代码，这样就省去了将“垂直节奏”应用于那些不需要的元素的麻烦。)另外，对于仍然存在且实际上需要的元素，只需使用文本编辑器来查找-替换行高、顶部和底部填充、边距、字体大小、etc...and值。作为一个CSS框架，很清楚Bootstrap是如何布局的；相关元素得到了很好的排序，并在样式表的大部分代码中组合在一起。一旦您完成了基本CSS文件的调整，只需缩小您的修改后的stylesheet...to替换先前存在的小型化version...or，也许，如果您想要优化的话，只需从CloudFront中提供它即可。

Answer 3

Compass CSS创作框架对基于垂直韵律的排版有明确的支持。首先，您可以查看这个简短的视频教程。