太原做网站:使用Gumby框架安装、配置和构建响应网站

2019.05.28 太原做网站

100

我的名字是亚当·钱伯斯,我是一名高级工程师数字外科医生以及我们的开源项目的首席开发人员Gumby框架.

太原做网站在本教程中,我将向您介绍Gumby项目的安装和配置过程,然后将一个简单的网页放在一起。

太原做网站

首先,我要为我的搞笑同事和同事Gumby Leaddev道歉,克雷格·凯勒。他对我的国籍和所有英语事物的热情和钦佩总是让我感到惊讶,因此我们要建造这个(稍微有点赞助的)设计。

不管怎样,抛开免责声明,让我们跳进去吧。

下面是我们要在它完成的状态下构建的内容:

Gumby Framework Tutorial demo Screenshot
查看演示

甘比响应前端框架建在Sass和Compass上。随着Gumby2.5的发布,我们推出了ClayMate,一个NPM模块,它与Bower和Ugulify接口,以帮助安装和优化Gumby。正因为如此,开始工作有许多先决条件。说明每个依赖项的安装都超出了本教程的范围,但是有大量的信息,所以我假设您有最新的版本,并对以下内容有了基本的理解:Ruby、Sass、Compass、Node.js、Bower&Git。

安装

克莱米目前有两种功能,安装优化。太原做网站稍后将讨论优化,但现在让我们设置我们的Gumby项目。使用一个简单的命令,Claymet将安装Gumby并设置一个基本的项目支架。

# install Claymate globally via npm$ npm install -g claymate# bootstrap Gumby project$ claymate install

您可以在我们的文档中阅读更多关于Claymeate安装的内容,但是为了本教程的目的,我们将使用一个示例git存储库,这样我们就可以在组成Gumby构建的各个阶段之间来回跳跃。

# create and cd into project directory$ mkdir gumby-tutorial
$ cd gumby-tutorial# clone the tutorial git repo and checkout step 1$ git clone git@github.com:GumbyFramework/Tutorial.git
$ git checkout step-1

现在看看这里的目录结构。

├── bower_components/│   └── gumby/├── css/│   └── gumby.css├── fonts/│   └── icons/│       ├── entypo.eot│       ├── entypo.ttf│       └── entypo.woff├── img/├── sass/│   ├── var/│   │   └── _settings.scss│   ├── _custom.scss│   ├── _fonts.scss│   └── gumby.scss├── config.rb├── gumby.json├── index.html└── ui.html

这就是你跑完后会看到的$ claymate install。为了引导Gumby项目,这里发生了许多事情,所以让我们详细介绍一下。

首先,Gumby使用的工具是Bower。您将在bower_components目录,好像您已经直接克隆了Gumby的GitHubrepo。Bower允许您安装、更新和管理前端依赖项;通过一个简单的命令,您可以将依赖项更新为最新版本。这意味着bower_components目录应该保持不变,这样就不会覆盖任何内容。然而,这是一个问题。

我们鼓励Gumby用户编辑settings.scss为了在覆盖和扩展Gumby之前将框架定制到尽可能接近某个需求。然而,如果我们更新到最新的Gumby,我们的更改将被覆盖。幸运的是,Clayate通过将需要编辑的文件复制到bower_components目录并进入项目的根目录。

你会注意到sass, css, js, imgfonts旁目录config.rb, ui.htmlindex.html档案。字体目录是Gumby的直接副本,包含图标字体,而js/img目录是空的,为了您的方便。

这就是真正的魔法发生的地方。打开sass目录中,您将发现从Bower的Gumby副本中复制的各种部分。如果你打开gumby.scss在文本编辑器中,您将注意到原始路径已被更新为指向bower_components目录,除_settings.scss_fonts.scss指向新复制的文件。

您需要编辑的唯一核心文件是_settings.scss_fonts.scss,将这些文件从bower_components目录允许您在Gumby之上工作,而不是在Gumby中。更新时唯一需要进行的手动更改是将任何新变量复制到您的_settings.scss收到。

这个设置允许Bower在更新的时候真正地弯曲它的肌肉。

看看这个新的安装,了解一下文件结构是如何设置的,以及准备好之后,查看教程的步骤2。

$ git checkout step-2

配置

就像我说的,_settings.scss是你唯一需要编辑的Gumby核心文件,这是Gumby真正的力量所在。如果您打开该文件,您会注意到,从第一步开始,我已经修改默认变量的加载.

在准备开始构建任何标记之前,我已经更改了网格宽度、列数、字体面、标头颜色、肚脐颜色和原色/第二色。像这样构建站点的基本主题可以让开发人员和设计人员在编写任何标记或特定样式之前在核心样式上进行真正的协作。我们发现这种开发方法极大地提高了可维护性。

事实上,这就是我们建议您开始使用Gumby进行任何开发的方法。在开始覆盖任何内容之前,您可以调整设置变量以将项目的核心主题组合在一起,或者至少尽可能接近。

如果你打电话给罗盘表命令,您可以从项目的根目录中播放设置变量,并在ui.html。处理变量,了解它们在整个框架中的使用方式。一旦您准备好了,请签出教程的第三步(您需要撤消或提交您为继续前进所做的任何更改)。

$ git checkout step-3

扩展

好的,现在我们已经安装了Gumby并配置了设置,使我们的构建尽可能接近站点主题。在我们开始构建站点之前,我们需要安装更多的软件包。Gumby扩展目前有4个,是托管在单独的GitHub存储库中的模块,并通过Bower单独安装。我们将在这个设计中使用所有这些扩展。

如果您查看项目根目录,您将看到一个新的bower.json文件和文件中的bower_components目录现在gumby-parallax, gumby-images, gumby-shufflegumby-fittext目录。这些包都是使用$ bower install命令。

# install all a package$ bower install --save gumby-parallax# update all packages$ bower update# update gumby parallax only$ bower update gumby-parallax

一旦安装,这些扩展需要导入到我们的Gumby项目。敞开gumby.scss你会看到我之前添加的新行_custom.scss 进口视差Sass从…bower_components。一次compass compile已被调用,我们的CSS将包含视差样式。

@import "../bower_components/gumby-parallax/parallax";

检查…的底部index.html去看新的script标签。这个增加了视差、图像、洗牌和适配文本JavaScript之前的其他UI模块gumby.init.js,这是Gumby JavaScript必须执行的顺序。

gumby.js -> modules -> gumby.init.js

<!-- Gumby and Gumby modules --><script gumby-touch="js/libs" src="bower_components/gumby/js/libs/gumby.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.retina.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.fixed.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.skiplink.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.toggleswitch.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.checkbox.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.radiobtn.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.tabs.js"></script><script src="bower_components/gumby/js/libs/ui/gumby.navbar.js"></script><script src="bower_components/gumby/js/libs/ui/jquery.validation.js"></script><!-- Gumby extensions --><script src="bower_components/gumby-parallax/gumby.parallax.js"></script><script src="bower_components/gumby-images/gumby.images.js"></script><script src="bower_components/gumby-shuffle/gumby.shuffle.js"></script><script src="bower_components/gumby-fittext/gumby.fittext.js"></script><!-- Gumby Init --><script src="bower_components/gumby/js/libs/gumby.init.js"></script>

调试模式

太原做网站在这一步中做的最后一个改变是]打开Gumby调试模式。这是由向gumby.js脚本标记添加Gumby-DEBUG属性。在调试模式下,Gumby将信息记录到控制台,包括模块安装和事件触发器。在开发过程中,这可能是一个非常有用的工具。打开index.html在浏览器中(将为空白)。然后打开控制台(Chrome中的alt+命令+i)并刷新以查看Gumby的调试信息。如果愿意,可以在整个JavaScript中使用Gumby的调试方法。

<script gumby-debug gumby-touch="js/libs" src="bower_components/gumby/js/libs/gumby.js"></script>Gumby.debug('Print debug message to the console');
Gumby.info('Print information to the console');
Gumby.warn('Print warning to the console');
Gumby.error('Print error to the console');

建房

好了,现在是开始构建示例站点的时候了。签出步骤4以查看完整的构建,并按照提交GitHub日志或者,如果您知道如何绕过Git,签出每个提交来查看特定阶段的代码。

$ git checkout step-4

标记

第一,我构建了基本标记.

网格作为列放在行中-除非需要容器元素,否则不需要容器元素。网格系统已经存在了足够长的时间,所以我将避免在这里讨论太多的细节,但是我们已经.row, .columns, .centered, .push_x,和.pull_rightpull_left给你上课玩。其中大部分都是在整个示例项目中使用的。

<div class="row">
    <div class="seven columns"></div>
    <div class="four columns push_three"></div></div>

Gumby的设置文件包含许多颜色变量,其中几个是我们为示例站点编辑的。每个变量都有一个相应的类,可应用于按钮、标签、徽章或警报。你会注意到带有预置图标的按钮在整个设计过程中使用。可以用几个简单的类来创建这些类。

<p class="btn primary medium"><a href="#">Primary Medium Button</a></p><p class="btn primary medium icon-left icon-location"><a href="#">Primary Medium Button</a></p>

Gumby的响应导航包含在页面顶部,使用下拉菜单完成。看看它的反应-不错,是吧?稍后我们将讨论移动导航栏切换背后的逻辑。如果你检查标志<img>你会注意到它有一个gumby-retina属性。在相同的图像目录中,我们有一个视网膜就绪版本的图像@2x附加到文件名后。添加gumby-retina属性初始化Gumby的视网膜模块,该模块将在支持设备上加载视网膜版本。

沙斯

下一次我写了一些自定义的Sass来格式化我的标记并覆盖一些Gumby默认值。

Sass的细节可以很容易地成为一个单独的教程,所以我将简短。然而,有一些甘比混合我想要学习。

花式瓷砖

花式瓷砖用于样式页脚链接,最好将其描述为瓷砖格网。如果你发现#foot-links在……里面_custom.scss你会看到混音器在使用中。

/* scss */@include fancytiles(8,8,4);/* compiles to */@media only screen and (min-width: 320px) { #foot-links ul { width: 25%; } }@media only screen and (min-width: 768px) { #foot-links ul { width: 12.5%; } }@media only screen and (min-width: 1100px) { #foot-links ul { width: 12.5%; } }

我要传递给混合器的数值参数指定了我希望在三个预定义断点(桌面、平板和移动)上每一行的列数。调整浏览器窗口的大小,并查看它们如何相应地作出响应。花式瓷砖是令人敬畏的脂肪脚像这样,产品网格和任何动态网站,所需的行数和列是未知的。不再担心开行和收行,省去了很多时间和压力!

回应

接下来是Gumby开发中非常重要的混合蛋白。响应混合器允许您在许多预定义的断点上定义响应样式。方法中的断点的完整列表。混和定义。只需包括混音,传递它所需的断点,并插入您的样式。在编译时,Sass将把这些转换成丑陋的媒体查询。

/* scss */@include respond(portrait-tablets) {
    background: red;}/* compiles to */@media only screen and (max-width: 768px) {
    background: red;}
字体大小

最后,字体大小混和。EM是一种很好的格式,但是可以用它来处理,我们都喜欢PX,对吗?好吧font-size()混音让我们转换。只需输入px大小或预定义的px大小即可。模尺度变量变量。

/* scss */@include font-size(18px);/* compiles to */font-size: 16px;font-size: 1.125em;

FitText

这里是我首先使用了Gumby的一个扩展,在这个例子中,FitText。FitText分机是从可怕的FitText.jsjQuery插件,用于使字体大小灵活。添加.fittext类设置为带有可选元素的任何元素。gumby-rategumby-sizes属性。这个gumby-rate属性的工作方式如下Fittex.js压缩机并控制字体大小增加/减少的速度。这个gumby-sizes属性允许您指定由管道分隔的最小字体大小和maxiumum字体大小。调整您的浏览器大小,并观看适配文本,做这件事。

<h2 class="fittext" gumby-rate="2" gumby-sizes="30|60">Traverse the time vortex with precision.</h2>

固定位置

下一次我将固定位置模块应用于肚脐当它到达视口顶部时,要使其“修复”,而当它到达mashad底部时,则使其成为“pin”。这样的修复和固定是一个常见的UI需求,固定位置模块作为CSS 3属性的一种多功能position: sticky;有一些高级功能。这个模块很适合导航,侧边栏如我们的文档所示以及许多其他UI功能。

<!-- fix when top of viewport is reached
     pin when window scrolled 500px --><div gumby-fixed="top" gumby-pin="500">My fixed content</div>

跳过链接

跳过链接将窗口滑动到特定的垂直点。它们速度快,易于设置,并且在本设计的不同地点使用。导航条下拉菜单包含一组跳过链接,内容区域顶部的三个特色图像也跳到了内容的各个部分。若要初始化跳过链接,请添加.skip任何元素,虽然通常是锚。然后,您所需要做的就是添加一个gumby-goto包含PX值、字符串“top”或CSS选择器的属性,您的跳过链接将带您到那里。你也有gumby-durationgumby-easing(需要jQuery轻松插件)来玩,所以玩得开心点!

<!-- on click slide to #main --><a href="#" class="skip" gumby-goto="#main">Skip to main</a>

开关开关

开关开关真的需要一个专用教程。它们是Gumby最酷的特性之一,它确实允许您在无需编写JS一行的情况下获得创造性和构建UI元素。其基本思想是使用HTML属性添加/删除CSS类,以便CSS转换可以用于增强UI美学。我们可以避免使用:psuedo状态或浪费JavaScript的时间切换类。甘比情态抽屉,它们都是切换和开关的示例,而不是具有关联JS文件的专用UI模块。

标记

在此设计中,我们使用了Gumby的模态示例开关开关。首先我添加模态标记。默认情况下,模式被隐藏为负值。z-indexopacity: 0;时,这些值将被覆盖。.active类被应用。

<div class="modal" id="modal">
    <div class="content">
        <h1 class="row">Modal Markup</h1>
    </div></div>

开关

下一次我增加了几个开关打开通道。这个gumby-trigger属性包含针对模态元素的选择器。在模式中,我有两个隐藏的内容div。不同的按钮和链接应该打开模式与适当的内容显示。要做到这一点,开关gumby-trigger属性包含一个选择器,该选择器针对模式本身和我们希望显示的内容,并在管道之后指定要隐藏的内容。切换和开关将添加一个类.active到管道之前指定的选择器,并将其从随后指定的选择器中移除。

<a href="#" class="switch" gumby-trigger="#modal,#modal .get-quote|#modal .find-dealer">Get a quote</a>

一旦完全的电势被理解,你就可以用开关和开关获得真正的进步。我建议你读我们的文件并尝试这种可能性。

视差

我使用的下一个扩展是视差。我将视差模块应用于掩码头快速创建一个凉爽的滚动效果。这个视差模修改background-position元素的.parallax类应用于。它将以中指定的速度滚动相对于窗口的背景图像。天线宝宝第一高手论坛-tt538天线宝宝开奖结果-天线宝宝论坛精选资料专区-天线宝宝论坛开奖结果gumby-parallax.

<!-- scroll background image position at half the rate the window scrolls --><div class="parallax" gumby-parallax="0.5"></div>

洗牌

这个洗牌模块提供一种管理源排序的简单方法。在本例中,我将洗牌模块应用于#高光图像,这样,在平板电脑大小时,订单就会发生逆转。这对于确保您的内容出现在侧边栏之上很有用,当列堆栈或将调用移至操作和移动特定特性到页面顶部的较小屏幕上时。洗牌模块需要媒体查询和在gumby-shuffle用管子隔开。序列应该是零索引,用破折号分隔,并表示子元素应该被移动到的顺序。

<!-- reverse order at 768px --><div class="row" gumby-shuffle="only screen and (max-width: 768px) | 2-1-0">
    <div class="four columns">...</div>
    <div class="four columns">...</div>
    <div class="four columns">...</div></div>

JavaScript

现在是进行JavaScript的时候了。甘比事件和高级JavaScript我们不会在本教程中介绍这些特性,但是对于那些熟悉JS的人来说,这里有几个简单的示例。我不会生气,如果你的网页设计师跳过这一节!

初始化

首先,我在js目录并将其命名为main.js。然后,我更新了main.js在……里面index.html从Gumby的例子bower_componentsjs/main.js。然后我编写了在此项目中使用的JS的第一行。.

洗牌模块通过从DOM中删除元素、重新排序和再次插入来工作。正因为如此,跳绳需要初始化,就像它们被动态地添加到网页上一样。GumbyUI模块触发并绑定到许多您可以在自定义JS中使用的事件。在这种情况下,我们绑定到Shu显模块的gumby.onShuffle事件并调用Gumby.initialize()方法初始化某种类型的新模块。确实有许多事件初始化的变化我鼓励你的JavaScript书呆子检查他们。

// Gumby is ready to goGumby.ready(function() {
    // initialise new skiplinks when #highlights are shuffled
    $('#highlights').on('gumby.onShuffle', function() {
        Gumby.initialize('skiplink');
    });});

验证

下一个我用Gumby的验证JQuery插件将验证逻辑应用于报价表单在模态中。在任何表单元素上调用jQuery插件,并将其传递给包含所需对象数组的“Required”属性。每个必需的对象都应该包含一个与表单中的输入的name属性相匹配的‘name’,以及一个可选的相应的验证函数。验证函数将元素本身作为参数传递,必须返回布尔值以表示成功或失败。如果传递了验证函数,则字段将被测试为现值。可以指定可选的Submit和FailCallback函数,如果未提交表单,则在通过验证时将一如既往地提交。

$('.get-quote form').validation({
    required: [
        {
            name: 'name'
        },
        {
            name: 'phone'
        },
        {
            name: 'email',
            // email must contain @
            validate: function($el) {
                return $el.val().indexOf('@') > -1;
            }
        },
        {
            name: 'version',
            // must pick version with valid value
            validate: function($el) {
                return $el.val() !== '#';
            }
        }
    ],
    // validation passed
    submit: function(formData) {
        Gumby.debug(formData);
        alert("Succes! Posting form...");
    },
    // validation failed

    fail: function() {
        alert("Form validation failed...");
    }});

优化

我们都关注Gumby的性能,并在不久的将来对框架进行了一些基于性能的扩展。Clayate还有一个构建函数来帮助创建一个单一的、经过优化的、可生产的JavaScript文件。请查看步骤5,以查看此示例项目的最终优化阶段。

$ git checkout step-5

响应图像

媒体查询

这个响应图像模块通过文件大小或格式帮助提供最优的图像。

在本例中,站点i将响应图像模块应用于mashad为平板电脑提供更小的背景图像。这个gumby-media属性可以用语法在任何元素上设置。MEDIA QUERY | IMAGE PATH,它将引用背景图像,除非在<img>。你可以在这里看到我们想要的bg_masthead-768.jpg如果关联的媒体查询的计算结果为true,则在gumby-default.

<!-- serve up bg_masthead-768.jpg at < 768px viewport --><div id="masthead" 
     gumby-media="only screen and (min-width: 768px)|img/bg_masthead.jpg,only screen and (max-width: 768px)|img/bg_masthead-768.jpg">

特征检测

我也将响应图像模块应用于两幅大图像。在这种情况下,我提供基于特征检测的图像。这个gumby-supports属性也可以用于任何元素,并且应该使用语法。FEATURE | IMAGE PATH。特性检测直接传递给现代派,所以确保你的现代派构建包含你需要的测试。WebP是来自google的一种很棒的图像格式。不过,我建议你退房。gumby-supports可用于任何由现代派支持的特征检测,例如SVG。你甚至可以添加您自己的测试.

<!-- if supported use webp image otherwise fallback to jpg --><img gumby-default="img/img_tardis.jpg" gumby-supports="webp|img/img_tardis.webp" />

构建JS

每个JS模块都是一个单独的文件。如前所述,我们建议您在开发中单独包括所需的模块。只要确定gumby.js被包括在内,并且gumby.init.js最后包括在内。在生产中,我们建议您将所有JavaScript缩小并连接到一个优化的文件中。

别担心,克莱马特又来帮忙了!克莱迈特构造函数将创建一个gumby.min.js文件,包含所需的UI模块以及指定的任何外部模块和自定义文件。

当我们安装Clayate时,gumby.json生成了文件。司空见惯bower.json,我们可以更新这个文件以包含Clayate所需的信息,这样我们就可以调用$ claymate build没有任何争论。检查gumby.json你可以看到这个项目的规范。我们使用过的UI模块、扩展名以及main.js文件都在其中。这将在js目录中创建一个新的gumby.min.js文件,其中包含运行应用程序所需的所有代码。

您的项目现在准备启动!

结语

这就结束了本教程。我们已经介绍了使用Clayate进行安装、使用Gumby的设置文件和Sass变量进行配置、使用Gumby构建示例站点和进行生产准备优化。太原做网站希望你发现这个有用,如果你有任何问题,我们的谷歌+社区是一个很好的起点。我们有一个欣欣向荣和不断增长的Gumby开发者社区,随时准备帮助和讨论响应性的网页设计。我也会鼓励任何想要帮助我们的人GitHub储存库并拍摄我们的任何拉的要求或想法,为改进或新的功能,你可能有。最后跟着甘比在Twitter上跟上最新消息!


最新案例

联系电话 400-6065-301
赚钱高手两组三中三-三中三复式计算公式-三码中特全免费公开码 本港台现场报码直播j2-本港开奖结果现场开码-本港台现场搅珠直播 正版管家婆一句赢大钱-www管家婆27735com-管家婆小鱼儿论坛心水 九龙心水三肖永不改料-九龙心水525757com-九龙老牌图库彩图大全 澳门123696com开奖结果-626969cc澳门资料大全-2021澳门合彩开彩结果