README
Poplar CSS
一个轻量级、可扩展、适用于任何 Web
项目的公共样式库。
Base
如果把页面渲染的 CSS
树视作高楼,那么我会选择 normalize.css
作为高楼的第一层,同时我期望 poplar.css
可以作为第二层。
poplar.css
在 normalize.css
的基础上,重置了一部分元素的样式。当然,这些都是以可配置变量的方式来完成的。
Text
文本是页面中最基本的组成部分,而与文本关系最为密切的样式不外乎:字号、颜色和对齐方式。
在 $text-size
集合中声明文本的字号样式,支持扩展和重写。
// 默认配置
$text-size: () !default;
$text-size: map-merge(
(
'xl': 20px,
'lg': 18px,
'md': 16px,
'sm': 14px,
'xs': 12px
),
$text-size
);
// 指定集合
$text-size: (
'xxl': 24px,
'xl': 22px
);
// 输出
.text-xxl { font-size: 24px; } // 扩展
.text-xl { font-size: 22px; } // 重写
// other
也可以通过字号边界声明,来获取一个区间内的字号样式。
// 指定变量
$font-size-min: 30;
$font-size-max: 32;
// 输出
.fs-30 { font-size: 30px; }
// ...
.fs-32 { font-size: 32px; }
在 $text-color
集合中声明文本的颜色样式,丰富文本的不同语义表示,支持扩展和重写。
// 默认配置
$text-color: () !default;
$text-color: map-merge(
(
'black': $black,
'gray': $gray,
'white': $white
),
$text-color
);
// 指定集合
$text-color: (
red: #f00
);
// 输出
.text-red { color: #f00; } // 扩展
.text-black { color: #000; }
// other
在 $text-align
集合中声明文本的对齐样式,包含 center
、left
、right
和 justify
,支持重写,但不支持扩展。
.text-center { text-align: center; }
/* other */
Float
浮动和清除浮动,也是不能忽略的常用样式。
在 $float-side
集合中声明浮动的对齐样式,包含 left
、right
和 none
,支持重写,但不支持扩展。
.float-left { float: left; }
/* other */
.clearfix
用于清除容器内部元素的浮动影响;.clear-both
则是用于清除容器外部元素的浮动影响。
.clearfix::after {
clear: both;
content: '';
display: block;
}
.clear-both { clear: both; }
Flexbox
弹性盒子为我们提供了更加灵活、方便和强大的布局能力,是当下主流的布局方式。
指定容器使用弹性盒子布局。
.flex { display: flex; }
.flex-inline { display: inline-flex; }
指定元素在主轴上的布局方向(正方向或反方向),包含 row
、row-reverse
、column
和 column-reverse
,支持重写,但不支持扩展。
.flex-row { flex-direction: row; }
/* other */
指定元素在主轴上的排布,是收缩或溢出,还是在交叉轴上延伸,包含 nowrap
、wrap
和 wrap-reverse
,支持重写,但不支持扩展。
.flex-nowrap { flex-wrap: nowrap; }
/* other */
指定元素在主轴方向上的(元素之间及其周围的)空间分配,支持重写,但不支持扩展。
// 默认集合
$main-content: (
'stretch': stretch,
'between': space-between,
'around': space-around,
'evenly': space-evenly,
'start': flex-start,
'end': flex-end,
'center': center
) !default;
// 输出
.main-content-stretch { justify-content: stretch; }
// other
指定元素在交叉轴方向上的(元素之间及其周围的)空间分配,对单行弹性盒子无效,支持重写,但不支持扩展。
// 默认集合
$cross-content: (
'stretch': stretch,
'between': space-between,
'around': space-around,
'evenly': space-evenly,
'start': flex-start,
'end': flex-end,
'center': center
) !default;
// 输出
.cross-content-stretch { align-content: stretch; }
// other
指定元素在交叉轴方向上的对齐方式,支持重写,但不支持扩展。
// 默认集合
$cross-items: (
'stretch': stretch,
'baseline': baseline,
'start': flex-start,
'end': flex-end,
'center': center
) !default;
// 输出
.cross-items-stretch { align-items: stretch; }
// other
Button
按钮样式支持对其背景色、文字颜色和边框颜色进行配置。
设置灰度对比阀值,可以为不同的背景色匹配对应的文字颜色。
// 默认配置
$button-style: () !default;
$button-style: map-merge(
(
'black': (
'background-color': $black,
),
'white': (
'background-color': $white,
'border-color': $black
)
),
$button-style
);
// 输出
.button-black {
background-color: #000;
border: 1px solid #000;
color: #fff;
}
// other
支持在 $button-size
集合中声明按钮高度,支持扩展和重写。
// 默认配置
$button-size: () !default;
$button-size: map-merge(
(
'lg': 36px,
'md': 32px,
'sm': 28px
),
$button-size
);
// 指定集合
$button-size: (
'xl': 44px,
'lg': 40px
);
// 输出
.button-xl { height: 44px; } // 扩展
.button-lg { height: 40px; } // 重写
// other
Border
增加边框圆角样式,可以配合按钮或者其他带边框的元素使用,支持扩展和重写。
// 默认配置
$radius: () !default;
$radius: map-merge(
(
'lg': 4px,
'md': 3px,
'sm': 2px
),
$radius
);
// 输出
.radius-lg { border-radius: 4px; }
// other