dribbble扩展程序
使用网格进行构建已成为前端开发人员的日常需求。 网格不仅在设计中提供了节奏感和一致性，而且当使用众所周知的网格结构时，它为跨团队工作提供了一种简单的集体设计语言。
Flexboxgrid是一个新框架，它使您可以将网格系统的可预测性和通用语言结构与flexbox的灵活性和简单性结合起来。 今天，我们将逐步讲解使用Flexboxgrid的基础知识，并使用它来构建一个简单的Dribbble feed组合页面。 让我们开始吧！
Flexboxgrid CSS入门
Flexboxgrid入门的第一步是获取CSS。 为了进行开发，请使用未缩小的版本 。
接下来，让我们谈谈Flexboxgrid的工作方式。 该文档完全包含在Flexboxgrid.com的主页上，但是我们将重点介绍这些内容。
响应列
Flexboxgrid的构建可支持四个主要断点，可以随意命名，以避免出现像素特定的断点维护问题。 这些断点是hand ， lap ， desk和wall ，以可视为hand，lap，desk和wall的视口宽度来命名（即：设备很可能会找到自己的位置）。 列类本身的结构如下：
column-[number]--[breakpoint]
column-4--hand
column-auto--wallFlexboxgrid是一个十二列的网格，将基于百分比的列与flexbox的功能结合使用，可用于坚如磐石的网格。
注意 ： 浏览器对flexbox的支持仍不完整 ； 需要完全跨浏览器实施的项目不应依赖Flexboxgrid。
示例行
直接从文档中获取，使用Flexboxgrid对示例行进行标记看起来像这样：
<div class="row">
<div class="column-12--hand
column-8--lap
column-6--desk
column-4--wall">
<div class="box">Responsive</div>
</div>
</div>自动列
每个断点处都有一个“自动”列宽。 这与传统的width: auto有所不同width: auto规则。 无论在行中放置多少列，Flexbox都会自动用偶数大小的列适当地填充行。
<div class="row">
<div class="column-auto--hand">
<div class="box">auto</div>
</div>
<div class="column-auto--hand">
<div class="box">auto</div>
</div>
<div class="column-auto--hand">
<div class="box">auto</div>
</div>
</div>例如，在上面的示例中，各列将占据三分之一。
对准
Flexboxgrid可以做很多事情，包括水平对齐行的列：
<div class="row start"></div>
<div class="row center"></div>
<div class="row end"></div>以及垂直方向：
<div class="row top"></div>
<div class="row middle"></div>
<div class="row bottom"></div>Flexboxgrid还利用了Flexbox的简单重新排序技术和动态间距选项，但现在我们将继续创建Dribbble网格！
盘带网格
我们将从一个简单的空HTML文档开始，包括jQuery和Normalize 。 随意使用类似HTML5样板与像工具Modernizr的 ，但对于这个项目，我们将继续专注于JavaScript的，HTML和CSS，你需要自己写。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/flexboxgrid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>从这里开始，我们将构建要使用HTML的结构，然后将所有内容与Dribbble API挂钩。
我们的网格标记
首先，假设我们要建立一个网格，该网格至少从每水平行两个块开始，然后在wall断点处每行最多移动六个块。 这是我们将如何实现的方法：
<div class="row">
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
</div> column-6--hand指示在hand断点处（对于hand设备），每个块将填充十二列中的六列。 因此，我们现在可以在布局的一行上容纳两个Dribbble缩略图。
在单lap断点处，第column-4--lap指示每个块将为四列宽，因此我们将能够在一行中容纳三列。
更多动态标记
假设我们要使网格更加动态。 这是使用自动宽度和可变宽度的网格行的示例。
<div class="row">
<div class="column-6--hand column-3--lap column-2--desk column-auto--wall"></div>
<div class="column-6--hand column-3--lap column-4--desk column-auto--wall"></div>
<div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div>
<div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div>
<div class="column-6--hand column-6--lap column-5--desk column-auto--wall"></div>
<div class="column-6--hand column-6--lap column-7--desk column-12--wall"></div>
</div>注意：在墙的断点处，我们实际上有一个跨过五个网格； 在没有添加自定义类的十二列网格系统中，这通常是不可能的，因为十二不能被五整除。 但是，使用Flexbox可以轻松地自动计算列宽。
带进Jribbble
现在我们已经有了网格结构，让我们编写引入Dribbble内容所需的代码。 我们将使用jQuery插件Jribbble 。 您可以从GitHub获取源代码。 Jribbble将使从Dribbble拍摄照片变得极为容易。
将Jribbble包含在单独的JS文件中，或在script.js的顶部。 在Jribbble下面，此代码将带入所需的Dribbble镜头。
(function(){
var playerId = "envato";
$.jribbble.getShotsByPlayerId(playerId, function(data){
var shots = data.shots;
var h = '';
$(shots).each(function(i, shot){
h += '<div class="column-6--hand column-4--lap column-3--desk column-2--wall">';
h += '<a href="' + shot.url + '"><img src="' + shot.image_teaser_url + '"></a>';
h += '</div>';
});
$('.dribbble-shots').html(h);
});
}()); 我们首先将代码包装在立即调用的函数表达式中 ，以确保保护我们JavaScript范围。 接下来，我们设置玩家ID，然后使用Jribbble进行投篮。 拍摄完照片后，我们通过遍历每张照片来构建html，并用该html类的dribbble-shots填充元素。
我们HTML结构应如下所示：
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/flexboxgrid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>My Dribbble Shots</h1>
<div class="row center dribbble-shots">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>请注意，我们还包括了Google字体。
最小样式
接下来，我们将在style.css提供一些最小的样式：
body {
font-family: 'Maven Pro', sans-serif;
background-color: #f1faff;
}
h1 {
font-weight: 400;
}
*[class^=column] {
/*max-height: 100px;*/
overflow: hidden;
margin-bottom: 12px;
}
*[class^=column] img {
width: 100%;
}
.container {
width: 80%;
margin: 0 auto;
position: relative;
padding-top: 100px;
}
a {
display: block;
opacity: 0.9;
}
a:hover {
opacity: 1;
}您的最终产品应类似于以下内容：
结论
Flexboxgrid提供了非常灵活的网格解决方案，允许对元素的间距，大小，显示甚至顺序进行一些非常有趣的控制。 与引人入胜的内容结合使用时，Flexboxgrid可使您轻松地完成网格之前复杂的工作。
dribbble扩展程序