用开放式道具设计一个现代UI主题

迪鲁宾
1,965 阅读6分钟

第一印象很重要。用户界面的风格可以极大地影响一个应用程序产生的流量，因为用户会在几秒钟内对一个应用程序形成印象。这就是为什么用户界面是每个现代网络应用的一个重要组成部分。

CSS库，如新发布的Open Props，使开发者能够在不需要过多编码的情况下实现专业设计。不过，拥有更多的样式选择并不总是更好。一些CSS库和框架可能过于复杂或僵化，导致学习曲线过长或限制了定制。

然而，Open Props是为灵活性而设计的，被描述为非规定性的。它是一个开源的、色彩方案优化的CSS库，提供快速、一致、定制的设计选项。Open Props使应用程序的CSS干净而简单，减少了模板代码。

与其他大多数CSS库或框架不同，包括Tailwind CSS，Open Props允许开发者为选择器创建自己的自定义类名。一些开发者喜欢灵活地使用自己的命名规则，而不是依赖预定义的类名。

Pollen也允许用户生成类，但缺乏Open Props所提供的一些动画效果。有了Open Props，开发者可以使用预制的关键帧效果来编排自己的动画。

在本教程中，我们将回顾如何利用Open Props来为一个示例项目设计用户界面。

开始学习

Open Props CDN可以通过各种方式添加到Web应用程序中，例如使用CSS、PostCSS或设计标记。在这篇文章中，我们将直接把Open Props CDN导入我们的CSS文件中。

下面是我们将在本教程中建立的用户界面样本。

Open Props Demo Project

我们将首先为UI设计创建文件夹结构。

首先，使用以下命令创建app文件夹。

mkdir Openpropsdemo && cd Openpropsdemo

接下来，创建以下文件夹和文件。

  • 用于图像的资产文件夹：mkdir assets/img
  • 用于CSS的资产文件夹。mkdir assets/css
  • HTML文件。touch index.html
  • 在assets/css 文件夹中的CSS样式文件。styles.css

现在，将UI设计中要使用的任何图片添加到assets/img 文件夹中。然后，在你最喜欢的代码编辑器中打开应用程序文件夹（VS代码用户可以使用code . 命令来完成）。

下面是文件夹结构应该是这样的。

openpropsdemo
│ assets
│ ├── css
│ │ ├── style.css
│ ├── img
│ index.html

创建用户界面标记

接下来，让我们开始制作用户界面标记。

打开index.html 文件，输入doc，然后按TAB键，创建以下标记片段。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

接下来，在<head> 标签内将style.css 文件与index.html 文件链接。

...
<link rel="stylesheet" href="./assets/css/style.css" />
...

现在，我们将使用<header> 和<section> 标签，将标记分成两部分。从<header> 开始，然后将下面的代码片段放入<body> 标签。

...
<header>
      <div class="content">
      <div class="nav-bar">
        <h4>LOGO</h4>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>       
      </div>
      <div class="container">
        <div class="info">
            <h4>DESIGNING MODERN UI THEME WITH OPEN PROPS</h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, excepturi.</p>
            <button>GET STARTED</button>
          </div>
        <div class="thumbnail">
          <img src="./assets/img/photo-1516321497487-e288fb19713f.jpeg">
        </div>
      </div>
    </header>
...

添加<section> 标签的标记。然后，在<body> 标签内，在关闭的<header> 标签后添加以下代码段。

 
...   
    <section>
       <div class="info">
         <h4>FEATURES</h4>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit soluta consequatur, perspiciatis quibusdam.</p>
      </div>
       <div class="content">
          <div class="features">
              <ul>
                <li>
                  <img src="./assets/img/erik-mclean-C3T8KTZxTFM-unsplash.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
                <li>
                  <img src="./assets/img/istockphoto-1294303625-170667a.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
                <li>
                  <img src="./assets/img/istockphoto-1312102723-170667a.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
                <li>
                  <img src="./assets/img/istockphoto-1257851030-170667a.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
              </ul>
          </div>
       </div>
     </section>
...

样式化用户界面

现在，我们准备用Open Props为UI标记样式。我们将为以下UI组件添加自定义样式。

为页眉设计样式

要设计用户界面的页眉，首先要打开style.css 文件。然后，将Open Props CDN导入到CSS文件中。

@import "https://unpkg.com/open-props";

我们将为标记中的所有元素添加全局样式。

首先，我们将删除自定义的padding 和margin ，用box-sizing 属性设置页眉的大小，并指定font-family 。

* {
  padding: var(--size-fluid-0);
  margin: var(--size-fluid-0);
  box-sizing: border-box;
  font-family: var(--font-sans);
}

接下来，我们将为header 元素中的所有内容设置样式。我们将center ，为文本指定一个color ，并为background-image ，设置一个Open Propsgradient 。我们还将指定padding ，在header 元素的底部添加一个边框（border-bottom ），并在元素下面添加一些额外的空间（margin-border ）。

header {
  text-align: center;
  color: var(--gray-9);
  --op-gradient-direction: to top left;
  background-image: var(--gradient-15);
  padding: var(--size-fluid-2);
  border-bottom: 4px solid var(--pink-3);
  margin-bottom: var(--size-fluid-3);
}

现在，我们将移动到header 元素中的.content 选择器。我们将通过把width 设为50%，把margin 设为0px，使所有的.content 居中。

header .content {
  margin: 0px auto;
  width: 50%;
}

设计导航栏的样式

为了设计UI导航，我们将首先移动到header 元素中的.nav-bar 选择器。

我们将设置display 属性为flex ，以便将标志和ul 元素并排对齐。默认情况下，flex 属性以列的形式显示内容，所以我们将通过将flex-direction 属性设置为row 来重置。

我们将使用justify-content 属性在标志和ul 元素之间添加空间。然后，我们将使用align-items 属性来center 对齐所有的导航项目。最后，我们将使用display 属性在inline-block 中显示导航项，并使用margin-left 属性在项之间添加间距。

header .nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header .nav-bar ul li {
  display: inline-block;
  margin-left: var(--size-5);
}

这就是风格化的导航栏。

Open props Demo Styled Navigation Bar

现在，我们将移动到header 元素中的.container 选择器。我们将使用margin-top,display, 和justify-content 属性来拉开内容项目的空间，并将它们并排显示。

我们将使用.info 选择器来指定width ，并使用text-align 来对齐文本。我们将使用font-size 来增加h4 元素的大小。最后，我们将使用width 和border ，在.info 选择器中的图像元素周围添加一个缩略图。

header .container {
  margin-top: var(--size-fluid-4);
  display: flex;
  justify-content: space-between;
}
header .container .info {
  width: 50%;
  text-align: left;
}
header .container .info h4 {
  font-size: var(--font-size-5);
  margin-bottom: var(--size-2);
}
header .container .info p {
  margin-bottom: var(--size-4);
}
header .container .thumbnail {
  width: 40%;
  border: var(--border-size-2) solid var(--gray-1);
}

这就是样式化的标题容器。

Open Props Demo Styled Demo Container

功能部分的样式

现在，我们将移动到section 元素中的.features 选择器。我们将使用margin-top,width,margin, 和text-align 属性来格式化这一部分的文本。

section .features {
  margin-top: var(--size-fluid-3);;
  width: 50%;
  margin: 0px auto;
  text-align: center;
}
section .features ul {
  display: flex;
  align-items: center;
}
section .features ul li {
  margin: var(--size-fluid-2);
  list-style: none;
}
section .features ul li h4 {
  font-size: var(--font-size-1);
}
section .info{
  text-align: center;
  margin-bottom:var(--size-fluid-4);
}

这里是样式化的特征部分。

Open Props Demo Styled Features

接下来，我们将使用inline-size,aspect-ratio,border-radius,width,height, 和border 属性为特征部分的圆形图像框架定型。

.circle {
  inline-size: var(--size-5);
  aspect-ratio: var(--ratio-box);
  border-radius: var(--radius-round);
  width: 100px;
  height: 100px;
  border: var(--border-size-3) solid var(--gray-1);
}

图片和按钮的样式

现在，我们将对图像和按钮进行造型。我们将指定所有图像的width 和height ，相当于父元素的100%。我们还将指定按钮的background,border,padding,color, 和border-radius 。

img {
  width: 100%;
  height: 100%;
}
button {
  background: var(--blue-4);
  border: 0px;
  padding: var(--size-3);
  color: var(--gray-1);
  border-radius: var(--radius-round);
}

这里是样式化的图片。

Open props Demo Styled Images

结语

在本教程中，我们演示了如何使用Open Props设计一个UI主题。本教程中使用的简单的UI主题可以在GitHub上找到。使用Open Props的CSS自定义属性的设计可能性几乎是无限的。请查看Open Props文档，为你的下一个UI设计项目获得一些灵感。

The postDesigning a modern UI theme with Open Propsappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝