README

使用 gulp 构建 css

设置

为每个网站添加特定的颜色方案，创建一个 $siteColours 映射（名称：十六进制，名称：十六进制），它将被自动添加到基本颜色中。

设备

• $devices: (平板：541px，桌面：1025px)

网格

• $grid-width: 1280px
• $grid-columns: 12

全局

• $global-line-height: 100%
• $body-background-colour: map-get($colours, white)
• $body-text-colour: map-get($colours, darkgrey)
• $body-font-size: 12px
• $body-font-family: Arial, Helvetica, sans-serif

类名

• $class-left: left
• $class-right: right
• $class-top: top
• $class-bottom: bottom
• $class-vertical: vertical
• $class-horizontal: horizontal
• $class-middle: middle
• $class-center: center

填充/边距

• $padding-class: padding
• $padding: (极小：6px，小：12px，默认：18px，大：24px，无：0)
• $margin-class: margin
• $margin: (极小：6px，小：12px，默认：18px，大：24px，无：0)

边框

• $border-class: border
• $border-width: 1px
• $border-style: solid
• $border-colour: #cccccc
• $border-radius-size: 5px

排版

• $titles: (h1：40px，h2：32px，h3：24px，h4：16px)
• $weights: (轻：300，非粗体：500，粗体：700)

表单

• $button-background-colour: $primary-colour
• $button-text-colour: map-get($colours, white)
• $button-border: 1px solid $primary-colour
• $button-padding: map-get($padding, small)
• $button-background-colour-hover: darken($button-background-colour, 10)
• $button-text-colour-hover: darken($button-text-colour, 10)
• $button-border-hover: 1px solid darken($primary-colour, 10)
• $field-background-colour: map-get($colours, whitesmoke)
• $field-text-colour: map-get($colours, darkgrey)
• $field-border: 1px solid map-get($colours, lightgrey)
• $field-padding: map-get($padding, tiny)
• $field-width: 100%
• $label-display: block

CSS 3

• $transition-duration: .5s

颜色

• $white: #ffffff
• $black: #000000
• $red: #990000
• $green: #009900
• $blue: #000099
• $yellow: #999900
• $cyan: #009999
• $magenta: #990099
• $grey: #666666
• $darkgrey: #333333
• $lightgrey: #999999
• $whitegrey: #eeeeee
• $whitesmoke: #f5f5f5
• $primary-colour: map-get($colours, darkgrey)

图标

包含一些基本的SVG格式图标

• info.svg
• search.svg