Preboot

是一组用LESS语法书写的混合(mixin)和变量(variable)的集合,目的是辅助用户书写更优美的CSS。作者:@mdo

Preboot 由Bootstrap中文网翻译整理

Preboot介绍

Preboot是一套完整且灵活的LESS 工具集。其早期的变量(variable)和混合(mixin)演变为了Bootstrap的前身。从那时起,这两个项目就互为补充。

经过两年的间断,Preboot从Bootstrap中吸收了更多LESS变量和mixin之后重生了,并且带来了更多的增强功能。Preboot是已知的最轻量、强大的CSS开发辅助工具,这套工具中不包含任何预置的组件(例如:button、dialog、tab等)。

如果你需要的是完整的、带有预置组件的工具,请使用Bootstrap

下载 Preboot 2 GitHub project

What's included

下面列出的就是Preboot提供的所有工具。点击链接可以查看文档和代码片段。

变量(Variables)

CSS中没有变量这一概念,但是在LESS或其他CSS预处理器中是存在的。Preboot包含了几组有意义并且有用的变量,这些可以被用到任何项目中。

颜色(Colors)

Preboot中提供了两中颜色命名方式:灰度命名(grayscale) 和语义命名(semantic)。灰度色提供了快速使用黑色. Grayscale colors provide quick access to shades of black (in increments of 10%) while ;语义命名包含了一些有意义的颜色值。

@black-10: darken(#fff, 10%);
@black-20: darken(#fff, 20%);
@black-30: darken(#fff, 30%);
@black-40: darken(#fff, 40%);
@black-50: darken(#fff, 50%);
@black-60: darken(#fff, 60%);
@black-70: darken(#fff, 70%);
@black-80: darken(#fff, 80%);
@black-90: darken(#fff, 90%);
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;
@brand-info:    #5bc0de;

在你的项目中,这些颜色变量可以直接使用,或者重新将它们赋值给更有意义的变量。

// Use as-is
.masthead {
  ...
  background-color: @brand-primary;
  ...
}

// Reassigned variables in LESS
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

脚手架(Scaffolding)

一组用于快速自定义页面轮廓中关键元素的变量。

// Scaffolding
@body-background: #fff;
@text-color:      @black-50;

仅仅使用一个值就可以很容易的重新给链接设置你所希望的颜色。

// Variables
@link-color:       @brand-primary;
@link-color-hover: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-color-hover;
    text-decoration: underline;
  }
}

注意: @link-color-hover 变量是通过一个函数赋值的,这是LESS中另一个非常好的工具,它能自动产生正确的颜色。还可以使用的函数由:darkenlightensaturatedesaturate

排版(Typography)

这组变量能帮你很容易的设置字体(type face)、字号(text size)、行距(leading)等。Preboot还在用于排版的mixin中使用到了这些变量。

// Typography

// Font stacks for easy inclusion and customization
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

// Generate a straightforward type scale
@font-size-base:          14px;
@font-size-large:         @font-size-base * 1.25; // ~18px
@font-size-small:         @font-size-base * 0.85; // ~12px
@font-size-mini:          @font-size-base * 0.75; // ~11px

// Baseline for the line-height of the body
// To be used in conjunction with @font-size-base
@line-height-base:        20px;

// Enable the option to customize headings
@headings-font-family:    inherit; // From @font-family-base
@headings-font-weight:    500;

栅格系统(Grid system)

Generate semantic, mobile-first grid layouts with a few variables and mixins, all without superflous markup.

栅格变量(Grid variables)

下面是三个Preboot中用于栅格mixin(grid mixin)的变量。

// Specify the number of available columns
@grid-columns:          12;
// Inner padding on each side of a column to create gutters
@grid-column-padding:   15px;
// Point at which the floats kick in and horizontally align columns
@grid-float-breakpoint: 768px;

定制这些变量可以自动影响到栅格mixin(grid mixins)。

栅格mixin(Grid mixins)

这里有三个可以使用的mixin,对应于标准栅格系统中的每一部分:

Heads up! These grid columns are mobile first, meaning by default they stack vertically. Floating only kicks in with viewports of 768px or higher.

.make-row() {
  // Negative margin the row out to align the content of columns
  margin-left: -@grid-column-padding;
  margin-right: -@grid-column-padding;
  // Then clear the floated columns
  .clearfix();
}

.make-column(@columns) {
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    // Calculate width based on number of columns available
    width: percentage(@columns / @grid-columns);
  }
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Set inner padding as gutters instead of margin
  padding-left: @grid-column-padding;
  padding-right: @grid-column-padding;
  // Proper box-model (padding doesn't add to width)
  .box-sizing(border-box);
}

.make-column-offset(@columns) {
  @media (min-width: @grid-float-breakpoint) {
    margin-left: percentage(@columns / @grid-columns);
  }
}

使用案例

使用这些mixin可以很容易的生成所有列。下面就是HTML和CSS共同组成的一个实例

<div class="wrapper">
  <div class="content-main">
    ...
  </div>
  <div class="content-sidebar">
    ...
  </div>
</div>
.wrapper {
  .make-row();
}
.content-main {
  .make-column(8);
}
.content-sidebar {
  .make-column(3);
  .make-column-offset(1);
}

Need another example? Our table of contents at the top of the page uses a custom grid as well. In the source docs.less file you'll find it's super lightweight implementation:

.row { .make-row(); }
.grid-4 { .make-column(4); }

That's it. No need for additional classes as we just don't need them in this simple of a site.

特定厂商的mixin(Vendor mixins)

通过一行有效的mixin代码可以省去书写N行带有特定厂商前缀的属性。

Box-sizing

通过一个mixin可以重置组件的盒模型(box model)。要想了解更多,请参考来在Mozilla的文章

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

圆角(Rounded corners)

如今所有现代浏览器都能支持不带前缀的border-radius 属性。因此,Preboot中没有提供类似命名为.border-radius()的mixin,但是Preboot提供了快速给元素某一侧设置所有圆角的速记方法。.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) shadows

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required -webkit prefix.

Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

过渡(Transitions)

Preboot中定义了三个灵活的mixin。可以一次设置transition的所有属性,或者根据需要单独设置delay和duration属性

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
     -moz-transition-delay: @transition-delay;
       -o-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
     -moz-transition-duration: @transition-duration;
       -o-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}

Transformations

Rorate, scale, translate (move), or skew any object.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y);
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
  -webkit-backface-visibility: hidden;
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

透明度(Opacity)

设置透明度。除了兼容现代浏览器,还有兼容IE8的filter滤镜。

.opacity(@opacity) {
  opacity: @opacity;
  @opacity-ie: @opacity * 100;
  filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
}

Placeholder text

Provide context for form controls within each field.

.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; } // Firefox 4-18
  &::-moz-placeholder           { color: @color; } // Firefox 19+
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Columns

Generate columns via CSS within a single element.

.content-columns(@width, @count, @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

渐变(Gradients)

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

#gradient > .vertical(#333, #000);
#gradient > .horizontal(#333, #000);
#gradient > .radial(#333, #000);

You can also specify the angle of a standard two-color, linear gradient:

#gradient > .directional(#333, #000, 45deg);

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

#gradient > .striped(#333, #000, 45deg);

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:

#gradient > .vertical-three-colors(#777, #333, .25, #000);
#gradient > .horizontal-three-colors(#777, #333, .25, #000);

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using .reset-filter() mixin alignside background-image: none;.

一些有用的mixin工具

除了上面特定厂商的mixin,下面这些mixin提供了一些常用的、甚至经常重复书写的CSS代码片段。

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallager.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

水平居中(Horizontal centering)

Quickly center any element within its parent. Requires width or max-width to be set.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Sizing helpers

Specify the dimensions of an object more easily.

// Mixins
.size(@width, @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size, @size);
}

// Usage
.image { .size(400px, 300px); }
.avatar { .square(48px); }

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Truncating text

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

// Mixin
.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-truncate();
}

Retina images

Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

// Mixin
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}