无法与pure模块链接_使用Pure构建模块化仪表板界面

无法与pure模块链接

今天，我们将使用Yahoo!的新mini-CSS模块库Pure （制作一个漂亮，最小的仪表板）（在GitHub上查看项目）。我们将讨论和使用SMACSS的一些原理（CSS的可伸缩和模块化体系结构）。我们还将使用WeLoveIconFonts.com中的图标。

注意：在继续进行操作之前，我们将最小化将要创建的仪表板的图形。图形最好使用JavaScript较多的东西来执行，并且为了始终专注于CSS和最小JavaScript，本教程通常会避免图形绘制技术。

关于纯净的一点

Pure由Yahoo!的团队构建。和YUI是一组非常轻量级的模块（小于6k）。可以将其视为扩展的Normalize ，它还包含非常常见的样式，例如网格，窗体，按钮，表格和菜单。

YUI团队将Pure作为起点，而不是一个完整的解决方案。从这个起点开始，他们希望开发人员扩展和构建其自定义CSS，以此作为该基础的扩展。

因此，本教程中讲授的很多技术都是用于扩展基本基础库（如Pure）以适应应用程序交互（例如使用仪表板时）的技术。

SMACSS简介

SMACSS是CSS的可伸缩和模块化体系结构的缩写，是Jonathan Snook的聪明之子，它是一组旨在构建CSS的实践，这些实践易于理解，易于扩展，并且避免了CSS特异性战争。

通过不使用ID来设置样式并尽可能限制选择器的嵌套，这将进一步得到帮助。基本思想是CSS可以分为基础，布局，模块，状态和主题 。在这些类别周围构造CSS，并遵循暗示这些类别的命名约定，可使SMACSS具有可读性并立即有意义。这样可以避免类名称具有任意关联的样式。分类的基本思想遵循此命名约定。

基本：无名称（默认元素，无类）
布局： .layout，.grid，.grid-column，.grid-column.five.columns
模块： .btn（模块名称）、. btn-default，.btn-calltoaction; .modal，.modal-header
状态： .is隐藏，.is活跃（暗示JavaScript触发类更改）
主题： .theme-background，.theme-border，.font-1，.font-2

这些类型的类描述了它们的功能和类别。 SMACSS的规则更多是“指南”和思维方式。查看Pure CSS的源代码，以了解实际中使用SMACSS的示例。

潜水

首先，让我们使用HTML5 Boilerplate创建一个简单的项目目录，然后将Pure替换为Normalize.css。对于本教程，我们将使用Pure的YUI CDN链接<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css"> 。我们还将放入Twitter的图标字体集合Font Awesome，并在CSS中添加一行（取自weloveiconfonts的说明）。在整个标记过程中，您将看到由“ fontawesome-calendar”之类的类定义的图标。

/* in main.css */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}

<!-- in index.html, in place of normalize -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome">

我们准备开始在设计中使用这些工具！让我们先定义一些骨骼CSS来容纳我们的元素。将其放入“ body”中。

<header>
<nav></nav><!-- this is where our nav menu will go -->
</header>
<section class="dashboard">
<!-- our dashboard pieces will go here -->
</section>
<footer>
<!-- copyright information can go here-->
</footer>

我们决定使用用户LJK在色迷上发现的称为Yellow Tree Frog的调色板。

现在，我们将在CSS文件顶部的注释中引用它们。

/*
red: #E73F3F
orange: #F76C27
yellow: #E7E737
blue: #6D9DD1
purple: #7E45D3
*/

提示：您可能会从使用CSS color关键字开始并从中受益，然后在以后查找/替换十六进制代码，因此不必不断复制和粘贴十六进制代码。

定义菜单

PureCSS为我们提供了一个下拉菜单模块，可用于为仪表板定义菜单。我们首先按照SMACSS的指导使用Pure的基于类的模块命名。

<nav class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="pure-menu-heading">WebDesignTuts</a>
<ul>
<li class="pure-menu-selected"><a href="#">Dashboard</a></li>
<!-- other items ... -->
</ul>
</nav>

请注意，此菜单在本教程中将不起作用。查看页面，我们可以看到菜单是使用默认的水平样式创建的。让我们继续，将菜单的背景更改为半透明的黑色。

.pure-menu {
font-weight: lighter;
}
.pure-menu.pure-menu-fixed {
position: fixed;
}
.pure-menu.pure-menu-blackbg {
background: #222;
}
.pure-menu.pure-menu-blackbg .pure-menu-heading:hover {
color: #efefef;
}
.pure-menu.pure-menu-blackbg a {
color: #fff;
}
.pure-menu.pure-menu-blackbg a:hover {
background: #666;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a {
background: #7E45D3;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a:hover {
color: #efefef;
}

在这里，我们看到了SMACSS和Pure使用的约定的采用。我们定义了两个新类，“ pure-menu-blackbg”和“ pure-menu-fixed”，然后定义了支持该类的子样式。我们还看到了基础类的一些重载（例如将现有的“ pure-menu”类更改为较轻的字体粗细）。

创建仪表板模块

接下来，我们将创建一个仪表板模块。我们将在基本级别的仪表板“块”中使用一些基本样式。

.dashboard-piece {
min-height: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
text-align: center;
position: relative;
padding-bottom: 40px;
}

现在我们已经定义了这个基本模块，我们将通过创建带有“ dashboard-piece”前缀的新类来扩展它。首先，我们将创建背景颜色类。

.dashboard-piece-redbg {
background-color: #E73F3F;
}
.dashboard-piece-orangebg {
background-color: #F76C27;
}
.dashboard-piece-yellowbg {
background-color: #E7E737;
}
.dashboard-piece-bluebg {
background-color: #6D9DD1;
}
.dashboard-piece-purplebg {
background-color: #7E45D3;
}
.dashboard-piece-graybg {
background-color: #798388;
}

接下来，我们将为不同的仪表板块定义标记。我们包含Envato徽标的嵌入式SVG，它将延伸网格的整个宽度。

<section class="dashboard pure-g-r clearfix">
<div class="pure-u-1 dashboard-piece dashboard-piece-redbg dashboard-piece-logo">
<h1>
<svg x="0px" y="0px" width="132.89669167px" height="120px" viewBox="0 0 73.351 82.791" enable-background="new 0 0 73.351 82.791" xml:space="preserve">
<g><path fill="#FFFFFF" d="M7.372,27.487C-1.903,39.206-2.261,55.13,5.369,67.05c6.858-17.611,15.499-37.423,26.14-55.114
C21.514,16.159,12.19,21.405,7.372,27.487z M73.333,2.971c-0.11-0.924-0.589-1.7-1.276-2.216C71.4,0.204,70.53-0.084,69.612,0.021
c0,0-2.738,0.589-7.093,1.704C41.722,21.698,24.654,48.459,11.43,74.155c0.492,0.427,0.991,0.857,1.512,1.268
c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g>
</svg>
</h1>
</div>
<div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg">
<div class="dashboard-content">
<h2><i class="fontawesome-twitter"></i></h2>
<p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p>
</div>
</div>
<div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg">
<div class="dashboard-content">
<h2><i class="fontawesome-github"></i></h2>
<p class="dashboard-metric">
142 Commits
<div class="light bar-horizontal">
<div class="bar-horizontal-bar" style="width:57%">
57% Capacity
</div>
</div>
</p>
</div>
</div>
<div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg">
<div class="dashboard-content">
<p class="dashboard-metric">
<h2><i class="fontawesome-check"></i></h2>
<div class="dashboard-metric">
<strong>63 / 90</strong><br><small>Tasks Complete</small>
</div>
</p>
</div>
<div class="bar-vertical" style="height:70%;"></div>
</div>
</section>

此标记包含很多内容。首先，我们在网格行元素“ pure-g-r”内使用“ pure-u-1-3”（和其他pure-u- *类）。这些类是Pure网格系统的一部分。要完全理解这些内容，请查看完整的YUI网格文档；基本概念是，栅格类pure-u-1-3是整个栅格宽度的1/3；一类纯u-3-4将是网格宽度的3/4。带有徽标的模块的类为pure-u-1，这使它可以跨越网格的整个宽度。

仪表板部分的其他元素用于显示不同类型的指标。以下CSS规则用于显示这些指标以及仪表板部分的其他内部部分。

.dashboard-piece-logo h1 {
line-height: 100px;
}
.dashboard-piece-logo svg {
margin-top: 80px;
}
.dashboard-piece h1 {
line-height: 300px;
font-size: 3.6em;
margin: 0;
}
.dashboard-content {
position: relative;
z-index: 999;
}
.dashboard-content p {
font-weight: lighter;
}
.dashboard-content .light {
opacity: 0.4;
display: block;
}
.dashboard-content h2 i {
font-size: 4em;
opacity: 0.4;
}
.dashboard-metric {
text-transform: uppercase;
font-size: 1.6em;
line-height: 1;
}
.dashboard-metric i {
margin-right: 0.6em;
}

我们还与仪表板内容模块分开定义了水平和垂直条类。

.bar-horizontal {
height: 36px;
background-color: rgba(255,255,255,0.4);
position: relative;
display: block;
margin-top: 20px;
}
.bar-horizontal-bar {
background: #fff;
height: 36px;
line-height: 36px;
color: #444;
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
letter-spacing: 0.2em;
position: absolute;
top: 0;
left: 0;
}
.bar-vertical {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: rgba(200,200,200,0.5);
}

最后，我们使用Pure的更多内置模块为“事件”模块创建样式表，并为天气模块重用水平条类。我们还使用自定义CSS扩展了这些类。这是最后两个模块的标记。

<section class="dashboard pure-g-r clearfix">
<div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">
<div class="dashboard-content">
<p class="dashboard-metric">
<h2><i class="fontawesome-calendar"></i></h2>
<h3>Upcoming Events</h3>
<table class="pure-table pure-table-center pure-table-horizontal pure-table-dark">
<thead>
<tr>
<th>With:</th>
<th>Where:</th>
<th>When:</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>WDTuts Office</td>
<td>Jun 20, 9:30AM</td>
</tr>
<tr class="pure-table-odd">
<td>George Bluth</td>
<td>Sudden Valley</td>
<td>Jun 23, 4PM</td>
</tr>
<tr>
<td>Michael Scott</td>
<td>Scranton, PA</td>
<td>Jun 24, 2:45PM</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
<div class="pure-u-1-3 dashboard-piece dashboard-piece-purplebg weather weather-rain">
<div class="dashboard-content">
<p class="dashboard-metric">
<h2><i class="fontawesome-umbrella"></i></h2>
<div class="dashboard-metric">
<strong>80% Chance</strong><br><small>of Precipitation</small>
<div class="light bar-horizontal">
<div class="bar-horizontal-bar" style="width:80%">80%</div>
</div>
</div>
</p>
</div>
</div>
</section>
<footer>
&copy; 2013 Envato
</footer>

以及扩展的Pure表类。

.pure-table-center {
margin: 0 auto;
}
.pure-table-dark { color: #ddd; }
.pure-table-dark .pure-table-odd { color: #444; }

最后，我们想稍微垫一下天气模块的顶部，以使其更适合事件模块。我们只需使用额外的“天气”类并调整顶部填充即可。除了这些最后的片段，我们还将添加一些简单的页脚样式以匹配顶部导航菜单。

.weather {
padding-top: 60px;
}
footer {
background: rgb(20,20,20);
color: #aaa;
padding: 10px;
font-size: 0.6em;
font-weight: bold;
}

扩展响应能力

Pure带有内置的响应式网格元素。它们通过以下选择器定义。

.pure-g-r>[class ^="pure-u"]

这是一个棘手的期待选择（看看30个CSS选择你必须记住深入解释了），这第一点“纯-GR”元素的直接子 。这些孩子必须具有以“ pure-u”前缀开头的类属性。 ew

例如，它指向该div：

<section class="dashboard pure-g-r clearfix">
<div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">

在@media查询中使用此选择器来折叠网格。但是，这些单位元素会崩溃到低于767px的100％。我们希望对此进行更改，以允许元素在480和767之间折叠到50％。我们使用以下@media查询来做到这一点。

@media only screen and (max-width:767px) {
.pure-g-r>[class ^="pure-u"]{width:50%; float: left;}
}
@media only screen and (max-width:480px) {
.pure-g-r>[class ^="pure-u"]{width:100%; }
}

飞溅JavaScript

在“ main.js”中，我们将编写一些JavaScript以确保同一行上的所有模块的高度相同。

(function(){
var to;
function pieceHeights(){
to = setTimeout(function(){
$(".pure-g-r").each(function(i,el){
var contentPieces = $(el).find(".dashboard-piece");
var max = 0;
contentPieces.css("min-height","");
$.grep(contentPieces, function(el,i){
max = Math.max($(el).outerHeight(),max);
});
contentPieces.css("min-height", max);
});
}, 400);
}
$(window).on("resize", function(){
clearTimeout(to);
pieceHeights();
}).trigger("resize");
}());

该JavaScript定义了一个函数，该函数在每一行中循环通过具有“仪表板”类的每个元素，然后在该行中找到最高的模块。然后，将该行中的所有元素设置为该行中最高元素的高度。

结论

本教程仅显示Pure中定义的一些模块。使用本教程中使用的模式，您可以创建易于维护，可读和可扩展CSS。使用像Pure这样的小型库，您可以利用功能强大，经过测试且记录良好的解决方案来解决常见问题。

您还要对Pure做些什么？让我们在评论中知道！

翻译自: https://webdesign.tutsplus.com/tutorials/build-a-modular-dashboard-interface-with-pure--webdesign-13314

无法与pure模块链接