Pure.css提供了Bootstrap的一个有趣替代方案

最新推荐文章于 2024-05-10 09:47:03 发布

cunjie3951

最新推荐文章于 2024-05-10 09:47:03 发布

阅读量1k

点赞数

文章标签： python java html css web

什么是Pure.css？

尽管Bootstrap接管了大量的网络，但它可能会给您的下一个项目不必要的站点带来一些性能负担。 Pure.css是Yahoo的响应框架。它提供了一个极简的，有据可查的灵活选择。

在本教程中，我将向您介绍Pure，“一组可在每个Web项目中使用的小型响应式CSS模块”。我们将回顾使用Pure的功能集和优点，然后逐步介绍一些基本的示例用法。

如果您对将来的教程有任何要求，或者对今天有任何疑问和意见，请在下面发布。 您也可以 直接 通过Twitter @reifman与 我联系。

选择平台

Pure提供了标准Web设计框架中所需的所有常用功能。因此，无论您是为WordPress构建主题还是自己的自定义网站，这都是一个不错的选择。

对于项目经理，通常至关重要的是，客户项目必须使用易于理解和维护的标准工具来构建，最重要的是，很容易招募平台经验中附带的人才。 Bootstrap非常适合此操作。在我看来，Pure似乎很简单，因此它也是一个很好的起点。

纯功能摘要

这是Pure的优点和功能的摘要。它提供：

可定制的响应式网格
内置的垂直和水平菜单，包括下拉菜单
与<a>和<button>元素一起使用的<button>
灵活的表格对齐
常用表格样式
干净，极简的外观，可以轻松扩展

但是，最令人印象深刻的是，Pure.css很小，只有4.5KB压缩+ gzip压缩 。这是Pure的不同组件在生产环境中占用的空间：

Pure也经过了良好的测试，可在IE 8 +，Firefox，Chrome，Safari，iOS 6-8和Android 4.x中使用。

而且，您仍然可以将其与Bootstrap元素一起使用，并在需要的地方添加它们。我将在下面显示一个示例。

Pure基于Normalize.css构建，该规范标准化了跨浏览器的框架性能。规范化提供了默认CSS重置：

保留有用的默认值
规范各种元素的样式
修正错误和常见的浏览器不一致
通过细微的改进来提高可用性
使用详细注释解释代码的作用

Pure入门

Pure的网站是使用其框架构建的，因此其简约，完善的代码可带来易于导航，易于使用的指南。这是Pure在操作中的左侧菜单示例：

您可以通过Yahoo的免费CDN将Pure添加到您的页面。只需在项目的样式表之前将以下<link>元素添加到页面的<head> ：

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

要初始化网站的响应宽度，请将视口的meta标签设置为设备宽度：

<meta name="viewport" content="width=device-width, initial-scale=1">

版面

在其“ 布局”页面上，Pure提供了一些示例示例下载，可满足常见应用程序需求的不同示例页面：

您可以浏览并下载您要尝试的任何应用程序，或将其添加到应用程序中。这些包括：

博客
电子邮件
照片库
登陆页面
定价廊
响应式侧面菜单
响应式水平到垂直菜单
响应式水平滚动菜单

纯碱

“ 基础”页面简要介绍了Pure框架下的基础知识，主要是Normalize.css ：

Normalize.css是一个小CSS文件，可在HTML元素的默认样式中提供更好的跨浏览器一致性。它是一种现代的，支持HTML5的版本，可以替代传统CSS重置。

您也可以使用Yahoo的CDN单独加载Normalize以独立使用：

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

还有其他一些小的基础功能，例如告诉Pure通过视口响应加载图像的类：

<img class="pure-img" src="...">

现在，让我们看一下Pure提供的一些示例布局。

格网

网格是网站布局的关键方面，Pure使网站布局相当简单。这是台式显示器上四列纯网格的快速示例：

以下是将平板电脑大小的视口缩小一半的方法：

最后，智能手机上的一列：

纯网格包括两种类型的类：网格和单位。网格div的子元素必须是单位div。您的内容在单元div中。命名单位类以表示其宽度。例如，纯u-1-4的宽度为25％。

这是上面的自适应四分之一代码：

<div class="grids-example">
    <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
        </div>
    </div>

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Dolor Sit Amet</h3>
            <p>
                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
            </p>
        </div>
    </div>

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Proident laborum</h3>
            <p>
                In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
        </div>
    </div>

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Praesent consectetur</h3>
            <p>
               Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
            </p>
        </div>
    </div>

如您在上面看到的， <div class="pure-g">代表外部网格类。然后， <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">指示浏览器为最小视口显示单列，为中视显示半列，四分之一列用于大宽度。

您可以在此处了解有关纯网格的更多信息。

形式

Pure支持在表单中对齐输入字段并设置样式专用字段，例如：

内联表格
堆叠式
两栏式
多列表格（如上所示）
分组输入
所需输入
禁用的输入
只读输入
舍入输入
复选框和收音机

您可以在此处看到所有描述的内容。让我们探索一个两列形式，Pure称为对齐形式：

通过将pure-form-aligned类与pure-control-group(s) ，Pure可确保正确设置每组字段，如上所示。

form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>

        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>

        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>

        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

这是构建高度可用，布局合理的表单的非常简单的方法。

桌子

Pure也使构建和格式化表格变得非常容易。这是水平条纹表的示例：

PureCSS Example Horizontal Striped Tabled

您可以通过简单地在代码中交替添加pure-table-odd类行来更改条带来看到上面的表已编码：

<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>

    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>

        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>

        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>

        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>

        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>

        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>

        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

这里显示了许多其他Table示例。

选单

Pure中的菜单也很容易使用，包括：

垂直菜单
水平菜单
选定和禁用项目
下拉菜单
带有子菜单的垂直菜单
可滚动的水平菜单
可滚动的垂直菜单
响应式垂直菜单
响应式水平滚动菜单
响应式水平到垂直菜单

请参阅此处说明的所有菜单。这是编写下拉菜单的方式：

基本上，这只是一个pure-menu-horizontal的pure-menu-list ， pure-menu-item 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">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

Pure提供了示例JavaScript，用于在菜单中实现其他辅助功能。