【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

栏目: CSS · 发布时间: 4年前

内容简介:CSS 网格布局和 CSS 自定义变量为前端开发人员带来了很大的好处。前者使我们创建网站布局非常简单,而后者则是我们可以在 CSS 样式表使用变量。我们使用的示例直接取自我的免费课程,内容是关于如何使用如果你不想阅读文章,想看录屏视频,

CSS 网格布局和 CSS 自定义变量为前端开发人员带来了很大的好处。前者使我们创建网站布局非常简单,而后者则是我们可以在 CSS 样式表使用变量。

在本教程中,我将向你展示如何将它们结合使用以快速构建应用程序设计原型。

我们使用的示例直接取自我的免费课程,内容是关于如何使用 React.js 和Chatkit API 构建聊天应用程序

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型
点击获取教程

如果你不想阅读文章,想看录屏视频, 看看我这门课的第15和16节 ,在里面,你可以获取代码,以便自己进行试验。在学习本教程时,请尽情去自己试验。

设置网格容器

我们的 app 使用 CSS 网格布局, css gird 是个很强大的模块,,使用它可以很容易构造布局,并随意移动,如果使用 grid-template-areas 这个属性,将尤其实用,接下来我会展示给你看

首先我们来看看我们的聊天应用程序看起来是什么样子:

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

如果我们在 Chrome 中打开开发工具,我们将能够观察到底层网格的构建方式。 如您所见,它有六行六列:

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

创建这样一个网格布局的代码如下:

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}
复制代码

首先,我们将容器设置为网格,然后我们想要6列,每一列应该都是一个分数( 1fr )单位宽,一个分数单位表示可用空间的一部分。这里我们把宽度等分成六个同样宽的份数,给每一列一份。

至于行,我们没有将他们等分成和高度相等的份数,,因为最后一行没有其他行那么高。我们明确地将它设为 60px 高而不是 1fr 高。

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
复制代码

现在我们设置了网格的结构,我们可以进入下一个部分:定位

网格元素定位

网格容器的每个直接子元素都是一个网格项。我们有四个网格项,每项都被包裹在下图中的矩形中

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

为了让每一项都显示在上图中的相应位置,我们需要使用 grid-template-areas 这个属性,并在样式表中构建网格的可视化界面

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";
}
复制代码

每个字符串表示一行,每个字符表示网格中的一个单元格。字符与网格项(房间列表、消息列表、创建新房间和发送消息)具有语义关系。

现在为了根据 grid-template-areas 来定位网格内容,我们需要使用字符来作为 grid-area 的值,像这样:

.new-room-form {  
  grid-area: n;  
}

.rooms-list {  
  grid-area: r;  
}

.message-list {  
  grid-area: m;  
}

.send-message-form {  
  grid-area: s;  
}
复制代码

这些类名当然也应用于HTML中的网格项。但是,我不会详细介绍这一点,因为我假设您知道如何向 HTML 标签中添加类。

有了这些,我们就可以开始试验布局了。只需在 grid-template-areas 值中交换几个字符,我们就可以完全翻转布局。

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

在上面的动图中,我通过更改 room list itemthe new room form item 的位置来尝试四种不同的布局。 我唯一要改变的是 grid-template-areas 属性。

下面有四种不用的结构。 尝试看看是否你可以在脑海中想象每个相应的布局:

grid-template-areas:  
    "n m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r s s s s s";

grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";

grid-template-areas:  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s n";

grid-template-areas:  
    "m m m m m n"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s r";
    
复制代码

如果你学习了我的课程,你会有自己的代码,可以尝试更改你喜欢的布局

使用 CSS 变量改变颜色

现在我们要使用 CSS 变量来改变应用程序的颜色。如果您以前没有接触过 CSS 变量,请快速查看下面的图片,因为它们总结了 CSS 变量的核心

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型
【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

从上图中可以看出,这使得代码更易于阅读,因为变量名称比十六进制值更具语义。 其次,它还为您提供更多灵活性方便你更改颜色。

让我们看看我们如何使用 CSS 变量设置我们的应用程序,从我们的变量声明开始:

:root {  
  --main-color:            #5ea3d0;  
  --secondary-color:       white;  
  --main-text-color:       #3e5869;  
  --secondary-text-color:  #b0c7d6;  
  --new-room-form:         #d9e1e8;  
  --send-message-form:     #F5F5F5;  
}
复制代码

这些变量在整个样式表中重用了17次。但是,我们不需要遍历所有这些地方,让我们看看 ——main-color 是如何在消息框和左侧侧边栏中用作背景颜色的。

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

代码中我们可以这样使用:

.rooms-list {  
  background: var(--main-color);}

.message-text {  
  background: var(--main-color);  
}
复制代码

变量的美妙之处在于我们更改变量声明。会影响到整个app效果

:root {  
  --main-color: red;  
}
复制代码

现在看起来是这样:

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

我们只需要简单地在 :root 更改变量声明的值,就会改变整个 app 的样式

参考如下调色板,选择喜欢的颜色应用到 app

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

声明变量:

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}
复制代码

结果:

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

网格布局的变量相结合

如果我们将此与使用 CSS 网格更改布局相结合,就会得到两个互不相似的独特聊天应用程序。我们来做一下

【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型
【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

和最后的示例相比较,这是我们刚开始布局看起来的样子:

:root {  
  --main-color:           #ff66ff;  
  --secondary-color:      #fbd8fb; 
  --main-text-color:      #3e5869;  
  --secondary-text-color: #d8b2ff;  
  --new-room-form:        #ffb2ff;  
  --send-message-form:    #d8b2ff; 
}

.app {  
  display: grid;  
  grid-template-columns: repeat(6, 1fr);  
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m n n"  
    "f f f f f f"; 
}
复制代码

相当酷。

现在我建议你学习我的完整课程。我将引导你使用 react.jsChatkit API 创建这个应用程序。当然,我会共享完整的代码,你可以自己设计。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

用UML构建Web应用

用UML构建Web应用

科纳尔伦 (Conallen Jim) / 陈起 / 中国电力出版社 / 2003-11 / 39.0

用UML构建Web应用(第2版),ISBN:9787508315577,作者:(美)Jim Conallen著;陈起,英宇译;陈起译一起来看看 《用UML构建Web应用》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具