dribbble扩展程序_使用Flexboxgrid和Jribbble构建Dribbble投资组合网格

daique1908

关注

翻译最新推荐文章于 2026-11-09 21:32:40 发布 331 阅读 AI 写同款· GEO 优化 ›

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--wall

Flexboxgrid是一个十二列的网格，将基于百分比的列与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指示每个块将为四列宽，因此我们将能够在一行中容纳三列。

带进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;
}

您的最终产品应类似于以下内容：