当前位置: 首页 > 工具软件 > Flexboxgrid > 使用案例 >

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

卢骏俊
2023-12-01

dribbble扩展程序

使用网格进行构建已成为前端开发人员的日常需求。 网格不仅在设计中提供了节奏感和一致性,而且当使用众所周知的网格结构时,它为跨团队工作提供了一种简单的集体设计语言。

Flexboxgrid是一个新框架,它使您可以将网格系统的可预测性和通用语言结构与flexbox的灵活性和简单性结合起来。 今天,我们将逐步讲解使用Flexboxgrid的基础知识,并使用它来构建一个简单的Dribbble feed组合页面。 让我们开始吧!

Flexboxgrid CSS入门

Flexboxgrid入门的第一步是获取CSS。 为了进行开发,请使用未缩小的版本

接下来,让我们谈谈Flexboxgrid的工作方式。 该文档完全包含在Flexboxgrid.com的主页上,但是我们将重点介绍这些内容。

响应列

Flexboxgrid的构建可支持四个主要断点,可以随意命名,以避免出现像素特定的断点维护问题。 这些断点是handlapdeskwall ,以可视为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指示每个块将为四列宽,因此我们将能够在一行中容纳三列。

更多动态标记

假设我们要使网格更加动态。 这是使用自动宽度和可变宽度的网格行的示例。

<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可使您轻松地完成网格之前复杂的工作。

翻译自: https://webdesign.tutsplus.com/tutorials/build-a-dribbble-portfolio-grid-with-flexboxgrid-and-jribbble--cms-20423

dribbble扩展程序

 类似资料: