引入Pure.css –轻量级响应框架

景哲

2023-12-01

Frameworks make it easy to design websites. You may already have been using popular frameworks like Bootstrap in your projects. Today I will introduce you to Pure.css (simply referred to as “Pure”), a small framework made up of CSS modules. All its modules put together weigh less than 4.0KB if served minified and gzip’d. You can save even more bytes if you decide to use only one or two of the modules.

框架使设计网站变得容易。您可能已经在项目中使用了流行的框架，例如Bootstrap。今天，我将向您介绍Pure.css (简称为“ Pure”)，这是一个由CSS模块组成的小型框架。如果将它们压缩并压缩，则所有模块的总重量都小于4.0KB。如果决定仅使用一个或两个模块，则可以节省更多的字节。

Pure’s minimal styling ensures that you can customize the look of elements to suit your needs without much effort. You can include Pure in your projects using the following line:

Pure的最小样式确保您可以自定义元素的外观以适合您的需求。您可以使用以下行在项目中包含Pure：

<link rel="stylesheet"
      href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

网格系统介绍 (Introducing the Grid System)

The grid system in Pure differs considerably from that of Bootstrap and it is powerful and easy to work with once you get past the basics. There are a few things that you need to keep in mind before proceeding:

Pure中的网格系统与Bootstrap的网格系统有很大不同，一旦您掌握了基础知识，它的功能强大且易于使用。在继续操作之前，需要牢记以下几点：

Pure has a wrapper grid class called pure-g and unit classes named pure-u-* . Make sure all your content is inside the grid units for proper rendering.
Pure具有一个称为pure-g的包装器网格类和一个名为pure-u-*单元类。确保所有内容都在网格单元内以进行正确渲染。
Widths are calculated based on fractions. The fractions themselves are decided by class names. For example, pure-u-2-5 has a width of 40%.
宽度是基于分数计算的。分数本身由类名称决定。例如， pure-u-2-5的宽度为40％。
All child elements within a pure-g element must have the class name pure-u or pure-u-* .
pure-g元素内的所有子元素必须具有类名称pure-u或pure-u-* 。

By using additional class names like pure-u-md-2-3 you can control the width of different elements at specific breakpoints. Take a look at the following HTML:

通过使用其他类名称(例如pure-u-md-2-3您可以控制特定断点处不同元素的宽度。看一下以下HTML：

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-5"> One </div>
  <div class="pure-u-1 pure-u-md-2-5"> Two </div>
  <div class="pure-u-1 pure-u-md-2-5"> Three </div>
</div>

The above code does the following: When the screen size is smaller than 568px, all divs will be 100% wide. When the screen size is above the medium screen category (768px) the first div is set to a width of 20% while others are 40% wide each.

上面的代码执行以下操作：当屏幕尺寸小于568px时，所有divs均为100％宽。当屏幕尺寸超过中等屏幕类别(768px)时，第一个div的宽度设置为20％，而其他div的宽度分别为40％。

The grids are based on a 5th and 24th fraction system. For example, in the class name pure-u-x-24, x can be anything between 1 and 24 inclusive. Furthermore, pure-u-1-12 and pure-u-2-24 are the same. For a more detailed discussion of the grid system, refer to the official documentation.

网格基于第5和第24分数系统。例如，在类名称pure-ux-24 ，x可以是1到24之间的任何数字。此外， pure-u-1-12和pure-u-2-24是相同的。有关网格系统的详细讨论，请参阅官方文档。

Pure provides vertical menus by default. Minimal styling and use of low-specificity selectors make it a lot easier to customize the menus. Here is the code to create a vertical menu:

Pure默认情况下提供垂直菜单。最小的样式和低特异性选择器的使用使自定义菜单变得容易得多。这是创建垂直菜单的代码：

<div class="pure-menu">
  <span class="pure-menu-heading">Brand Name</span>

  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Products</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Contant</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Blog</a>
    </li>
  </ul>
</div>

To change the above menu to horizontal, add the class name pure-menu-horizontal. Additionally, you can mark a menu item as selected or disabled using the class names pure-menu-selected and pure-menu-disabled, respectively.

要将以上菜单更改为水平菜单，请添加类名称pure-menu-horizontal 。此外，您可以分别使用类名称pure-menu-selected和pure-menu-disabled将菜单项标记为选中或禁用。

Creating dropdown navigation requires small changes in the markup. You need to add the class name pure-menu-has-children to the appropriate menu item. To display the submenu on hover, include the class name pure-menu-allow-hover. The code snippet below should clear things up:

创建下拉导航需要对标记进行少量更改。您需要将类名称pure-menu-has-children到适当的菜单项。要在悬停时显示子菜单，请包括类名称pure-menu-allow-hover 。下面的代码段应清除所有内容：

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">About</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="#" class="pure-menu-link">Services</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Designing</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Marketing</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">SEO</a>
          </li>
        </ul>
    </li>
  </ul>
</div>

You can also include this example script written in vanilla JavaScript to make the menu more accessible. It provides ARIA support, submenu arrow key navigation, and menu dismissal based on outside events.

您还可以包括用JavaScript编写的示例脚本，以使菜单更易于访问。它提供ARIA支持，子菜单箭头键导航以及基于外部事件的菜单关闭。

Below is a demo of Pure’s navigation menu with a dropdown.

以下是带有下拉菜单的Pure导航菜单的演示。

See the Pen Navigation Menu with Dropdown using Pure.css by SitePoint (@SitePoint) on CodePen.

见笔导航菜单使用Pure.css下拉由SitePoint( @SitePoint上) CodePen 。

使用Pure创建表单 (Creating Forms Using Pure)

To create a form with Pure you need to add the class name pure-form to the <form> element, as shown below:

要使用Pure创建表单，您需要将类名称pure-form到<form>元素，如下所示：

<form class="pure-form">
  <fieldset>
    <legend>Pure Login Form</legend>

    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">

    <button type="submit" class="pure-button">Sign in</button>
  </fieldset>
</form>

Here’s a demo of Pure’s login form:

这是Pure登录表单的演示：

See the Pen Login Form with Pure.css by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上带有 SitePoint( @SitePoint )的Pure.css的笔登录表单。

To create a stacked form, you can include the class name pure-form-stacked along with pure-form. You have the option to create an aligned form as well by adding the class name pure-form-aligned to your original form. The labels in an aligned form would be right aligned against the input controls. On smaller screens, however, the aligned form changes to a stacked form.

要创建堆叠表单，可以将类名pure-form-stacked与pure-form一起包括在内。您还可以通过将类名pure-form-aligned到原始表单中来创建对齐的表单。对齐形式的标签将与输入控件正确对齐。但是，在较小的屏幕上，对齐的表单将变为堆叠的表单。

创建多列表单 (Creating Multi-Column Forms)

You can use the form module along with the grid system to create multi-column forms. To do this, you need to wrap the controls in a pure grid and then specify the width of each of them using pure unit classes. The sample code below should help you understand the concept:

您可以将表单模块与网格系统一起使用来创建多列表单。为此，您需要将控件包装在纯网格中，然后使用纯单元类指定每个控件的宽度。下面的示例代码应帮助您理解概念：

<form class="pure-form pure-form-stacked">
  <fieldset>
    <legend>Registration Form</legend>

    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-2-5">
        <label for="name">Name</label>
        <input id="name" type="text">
      </div>

      <div class="pure-u-1 pure-u-md-1-5">
        <label for="country">Country</label>
        <input id="country" type="text">
      </div>

      <div class="pure-u-1 pure-u-md-2-5">
        <label for="email">E-Mail</label>
        <input id="email" type="email">
      </div>
    </div>

    <button type="submit" class="pure-button">Register</button>
  </fieldset>
</form>

To group many input controls together you have to wrap them in a <fieldset> element and add the class name pure-group. You can also set the size of input controls using the class pure-input-*. For example, pure-input-1-2 sets the width of the form to 50%.

要将许多输入控件组合在一起，必须将它们包装在<fieldset>元素中，并添加类名称pure-group 。您还可以使用类pure-input-*设置输入控件的大小。例如， pure-input-1-2将表单的宽度设置为50％。

Here’s a demo of a multi-column, grid-based form:

这是一个多列，基于网格的表单的演示：

See the Pen Multi-column Grid-based Form with Pure.css by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上带有 SitePoint( @SitePoint )的Pure.css 的基于 Pen 多列网格的表格。

扩展和定制Pure (Extending and Customizing Pure)

If you are not satisfied with the grid system that Pure provides you are free to create your own. You can use the starter kit tool on the official website to create your grid system. You may define your own breakpoints and grid units and you can specify the class names to use.

如果您对Pure提供的网格系统不满意，则可以自由创建自己的网格系统。您可以使用官方网站上的入门工具包工具来创建网格系统。您可以定义自己的断点和网格单元，还可以指定要使用的类名称。

Like any framework, you can add additional styling on top of minimal styling that Pure provides. For example, you can define the styling of a “success” button:

像任何框架一样，您可以在Pure提供的最小样式之上添加其他样式。例如，您可以定义“成功”按钮的样式：

.success-button {
  background: rgb(28, 184, 65);
  color: white;
  border-radius: 0px;
}

Then all you have to do is add the .success-button class from that rule set to a button element, to go along with Pure’s existing styles:

然后，您要做的就是将规则集中的.success-button类添加到button元素中，以与Pure的现有样式保持一致：

<button class="pure-button success-button">Success</button>

If you’re familiar with CSS, then this is nothing new, but beginners can see how this and other frameworks allow you to customize the base look of existing components with new styles.

如果您熟悉CSS，那么这并不是什么新鲜事物，但是初学者可以了解此框架和其他框架如何使您使用新样式自定义现有组件的基本外观。

在其他框架上使用Pure (Using Pure with Other Frameworks)

Pure has no issues with simultaneous use of other frameworks like Bootstrap. For example, you can use Bootstrap’s modal.css and modal.js with Pure. This provides a lightweight way to create a modal. Here is the sample code:

Pure在同时使用其他框架(如Bootstrap)方面没有问题。例如，您可以将Bootstrap的modal.css和modal.js与Pure modal.js使用。这提供了创建模态的轻量级方法。这是示例代码：

<button data-target="#myModal" 
        class="pure-button" data-toggle="modal">
  Launch The Modal
</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 id="myModalLabel">A Functional Bootstrap + Pure Modal</h1>
      </div>

      <div class="modal-body">
        <p>To create the modal you just need to include the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap. Pure will take care of all low level styling. The result is a fully-functional Modal using just a fraction of the CSS.</p>
     </div>

      <div class="modal-footer">
        <button type="button" class="pure-button"
                id="success-button" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Below is a demo of this modal:

以下是此模式的演示：

See the Pen Custom Button with Pure.css and Bootstrap Modal by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上具有 SitePoint( @SitePoint )的Pure.css和Bootstrap Modal的钢笔自定义按钮。

结论 (Conclusion)

Irrespective of its small size, Pure can meet most of your UI design needs. I suggest you give it a try and see how it fares. To follow the development of the framework visit Pure on GitHub.

无论其尺寸小小，Pure都可以满足您大多数UI设计需求。我建议您尝试一下，看看效果如何。要跟踪框架的开发，请访问GitHub上的Pure 。

翻译自: https://www.sitepoint.com/introducing-pure-css-lightweight-responsive-framework/

引入Pure.css –轻量级响应框架

网格系统介绍 (Introducing the Grid System)

Pure中的导航菜单 (Navigation Menus in Pure)

使用Pure创建表单 (Creating Forms Using Pure)

创建多列表单 (Creating Multi-Column Forms)

扩展和定制Pure (Extending and Customizing Pure)

在其他框架上使用Pure (Using Pure with Other Frameworks)

结论 (Conclusion)

相关阅读

相关文章

相关问答

相关文档

引入Pure.css –轻量级响应框架

网格系统介绍 (Introducing the Grid System)

Pure中的导航菜单 (Navigation Menus in Pure)

创建下拉导航 (Creating Dropdown Navigation)

使用Pure创建表单 (Creating Forms Using Pure)

创建多列表单 (Creating Multi-Column Forms)

扩展和定制Pure (Extending and Customizing Pure)

在其他框架上使用Pure (Using Pure with Other Frameworks)

结论 (Conclusion)

相关阅读

相关文章

相关问答

相关文档