布局 / Layout v1.0.0

可复用的页面冻结,外内边距、可定义的 flex 及灵活的 grid 网格布局......

基本的 HTML 元素均可以通过 class 设置样式并得到增强效果。重要的是,它们都支持自适应。

全局变量 / Gobal variable

通过 --name: value:root 创建自定义变量,它们将通过 var(--name) 被 GQUI 的各个组件调用。

目前,所有变量均为颜色,其中包括 17 种不同的基色:

:root {
    --base-0: rgb(0,0,0);
    --base-1: rgb(12,13,14);
    --base-2: rgb(20,23,25);
    --base-3: rgb(47,51,55);
    --base-4: rgb(60,65,70);
    --base-5: rgb(83,90,96);
    --base-6: rgb(106,115,124);
    --base-7: rgb(132,141,149);
    --base-8: rgb(145,153,161);
    --base-9: rgb(159,166,173);
    --base-10: rgb(187,192,196);
    --base-11: rgb(200,204,208);
    --base-12: rgb(214,217,220);
    --base-13: rgb(228,230,232);
    --base-14: rgb(239,240,241);
    --base-15: rgb(250,250,250);
    --base-16: rgb(255,255,255);
}


两种底色,背景色和前景色:

:root {
    --bg: rgb(245,245,245);
    --bg-1: rgb(255,255,255);
}


主色以及各类状态色,这类颜色因为需另用于 RGBA 处理,所以仅接受 RGB 值。

:root {
    --primary: 249,239,94;
    --primary-1: 211,192,63;

    --success: 41,199,95;
    --info: 60,150,255;
    --cancel: 230,230,230;
    --warn: 240,173,78;
    --danger: 217,83,79;
}

页面冻结 / Freeze

也称布局容器,类名为 .container,用于固定宽度并支持响应式布局的容器。

...

边距 / Padding & Margin

得益于边距系统,通过简短的 class 即可控制元素每个方向的边距,在绝大多数的布局位置调整中都表现优异。

内外边距 class 可为 p*-*m*-*,如 pr-2 则将右内边距设置为两个等级;py-3 将上下内边距设置为三个等级;mx-0 将左右外边距设置为零级,即消除边距;m-5 将四个方向的外边距设置为五个等级,即最大等级。

mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
-
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
-
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
-
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
-

并且,可通过 p*-sm-*m*-sm-* 单独对移动端小屏下的边距进行设置。

弹性布局 / Flex

Flexbox 是 flexible box 的简称(注:意为“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与传统布局方法相比,flex 可更简便、完整、响应式地实现各种页面布局。

GQUI Flex 布局系统支持通过简短的 class 配合叠加实现其属性效果:

类名作用效果
.flex将元素类型设置为 flex,flex-wrap 设为 wrap
.flex.nwpflex-wrap 设为 nowrap
.flex.edalign-items 设为 center,justify-content 设置为 end
.flex.ctalign-items 设为 center,justify-content 设置为 center
.flex.btalign-items 设为 center,justify-content 设置为 space-between
.flex.adalign-items 设为 center,justify-content 设置为 space-around

例如,利用 flex 实现垂直居中非常简单:

网格布局 / Grid

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定“项目”针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。

GQUI Grid 提供了一套简单实用、响应式、移动设备优先的网格布局系统,系统将每行网格均分为 12 份。借助不同类,可以自定义每个元素的占比。网格行与列之间的间隙默认为 12px,可通过 grid-gap: 0; 取消间隙。

1
2
3
4
5
6
7
8
9
10
11
12
1
1
1
1
1
1
1
1
1
1
1
1


网格布局需要 .grid 容器支撑,可与页面冻结并用:.container.grid。其中 col-* 控制一行的份数,默认为 1;row-* 则用于控制列的份数,默认为 1。

.col-1
.col-2
.col-3
.col-4
.col-2
.col-8
.col-4
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-6
.col-6
.col-1
.col-2
.col-3
.col-4
.col-2
.col-8
.col-4
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-6
.col-6


.col-3
.col-3 .row-2
.col-3
.col-3 .row-3
.col-3
.col-3
.col-6
.col-3
.col-3
.col-3 .row-2
.col-3
.col-3 .row-3
.col-3
.col-3
.col-6
.col-3



若要针对移动端小屏进行设置,请使用 col-sm-*row-sm-*

.col-2 .col-sm-4
.col-2 .col-sm-3
.col-3 .col-sm-5
.col-5
.col-2 .col-sm-4
.col-2 .col-sm-3
.col-3 .col-sm-5
.col-5


另外,还可通过 col-md-* 针对中等屏幕进行设置。