来自 InControl 夏威夷的研讨会笔记

上个月，我去了夏威夷的檀香山参加了 In Control 大会。 在第一天，我做了一整天关于如何从头到尾构建响应式网站的研讨会。 这是我做过的最长时间的研讨会。 就像我们之前 做过 一样，我将在这里发布笔记。

我做了一个 Photoshop 文件，我们可以从它开始。 它是一家名为“Boxtown Cars”的虚拟二手车经销商。 您可以 下载它。

它在美观上有所欠缺，但它弥补了关于现代网页开发主题的一系列借口。

如果您想从那里获取，我已经将该 项目上传到 GitHub。 或者您可以 查看实时演示。 您会看到，我们没有完全完成，但我们已经走得很远，可以讨论很多东西。

---

我们大量使用了 CodeKit。 它允许我们在这个项目中使用 Sass 和 Compass，执行样式注入，这对工作流程非常有用，还可以压缩和合并所有 CSS 和 JavaScript 文件。

---

使用 Compass 意味着我们可以免费获得所有重要 CSS3 内容的 @mixins。 例如，我们到处使用的“模块”模式可以有

.module {

  /* Doesn't need a mixin */
  box-shadow: 0 0 10px rgba(black, 0.4);

  /* Our global number */
  padding: $padding;

  /* Compass! */
  @include background(
    linear-gradient(
      top,
      white,
      #e4e4e4
    )
  );

}

---

我们使用 MAMP (视频) 创建了一个本地域来工作。 这意味着我们可以做一些聪明的事情，比如从根目录引用资产（例如 <img src="/images/logo.png">），在我看来，这更容易理解。 我们还计划做一些 Ajax，因此我们需要在“真实”域名前提下才能使其工作。 此外，我们将使用 TypeKit，它要求我们输入一个域名才能允许访问。 所有这些操作都无法在文件 URL（即仅从桌面上打开 index.html 文件）中进行。

---

我们的项目文件夹是从头开始创建的，只是桌面上的一个空文件夹。 我们创建了 index.php 文件以及 js、css、scss、images 文件夹。 我们在 index.php 文件中使用 Emmet 中的 html:5-TAB 命令快速完善了 HTML 结构。 我们使用 PHP 是因为 1) 它很容易执行 include()（我们还没做到，但对像这样的小型演示网站非常有用），以及 2) 我们可以使用 PHP 注释而不是 HTML 注释在标记中添加注释（不需要它们通过互联网传播）。

---

我们在页面上只加载了一个 CSS 文件，即 global.css。 此文件由 global.scss 创建，该文件 @import 了许多不同的较小的部分。 比如 normalize.css (链接)，图标（icons.scss）、排版（typography.scss）和按钮（buttons.scss）等组件，以及页眉（header.scss）和页脚（footer.scss）等部分。

---

字体来自 TypeKit：Proxima Nova 和 Market Web。 我们使用了它们的默认嵌入代码，确保不会出现文本闪烁，因为它本质上是一个阻塞脚本。 但我们确实提到了它们有异步加载方法，这可能会更安全一些。

---

我们有一个名为 _bits.scss 的 SCSS 文件（下划线命名约定表示“部分”或“将在其他地方包含”）。 此文件包含我们打算重复使用的一些变量以及我们自己编写的 @mixin。

我们在颜色变量名称上没有太聪明，坚持使用 $yellow、$blue 和 $green，这样我们就能记住它们。

在 CSS 布局中，总会出现一个数字，它总是出现。 我称它为 $padding，并在所有地方使用它来保持一致性。

此文件还包含我们的 @mixin 用于媒体查询，因此如果需要，我们可以在一个地方更改这些查询。 了解更多信息。

---

我们使用了 Subtle Patterns 中的一种纹理作为背景。 它们以 @2x 格式提供纹理，用于视网膜屏幕。 为了有条件地加载视网膜图形，我们使用了视网膜媒体查询。 我们将其添加到我们的自定义断点 @mixin 中

@mixin breakpoint($point) {

  @if $point == papa-bear {
    @media (min-width: 1600px) { @content; }
  }
  
  /* etc */

  @else if $point == retina {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      @content;
    }
  }

}

---

网站的整体布局需要具有相同高度的流体宽度列。 有很多方法可以做到这一点，但由于我们在这里做的是研讨会，并且展示了未来科技，因此我们使用了 flexbox。 这种事情在 flexbox 中非常非常容易，只需注意最新语法在跨浏览器方面的支持 并不理想。

---

设计是流体宽度的，因为我们从未设置任何不是百分比的宽度。 这些宽度在小屏幕上会缩小，因为我们已正确设置了

<meta name="viewport" content="width=device-width">

为了堆叠列，我们只需删除 flexbox

@include breakpoint(baby-bear) {
  .guts {
    display: block; // remove flexbox
  }
}

我们有一个 “不要想太多”风格 的网格，我们可以通过使所有浮动列的宽度为 100% 来类似地修复它。

---

我们需要一些图标用于设计，因此我们从 IcoMoon 中挑选了几个，并下载了仅包含这些图标的字体文件。 我们使用 可访问的标记 在页面上包含它们。 本质上

<a href="#" class="star" data-icon="&#xe005;">
  <span class="visually-hidden">
    Star This Car
  </span>
</a>

---

网站的徽标是矢量化的，因此我们使用 SVG。 SVG 太棒了：体积小、易于进一步压缩、缩放良好，并具有将 CSS 直接嵌入其中的高级功能。 在我们的案例中，我们只是简单地将其用作 background-image。 我们使用了 Modernizr 来测试 SVG 支持。 Modernizr 向 HTML 元素添加一个类，指示支持。 因此，我们最终得到了

.main-header {
  background: url(/images/logo.svg) no-repeat top left;
  background-size: contain;
  .no-svg & {
    background-image: url(/images/logo.png);
  }
}

---

导航在小屏幕上有些笨拙，因此我们将其隐藏并显示了一个“显示菜单”链接（带有一个 导航图标）。 点击该链接会显示菜单，其中包含另一个隐藏菜单的新链接。 所有这些都只用 CSS 完成了，您可以在 此处查看示例。

---

在页脚中，我们显示了经销商位置的 Google 地图。 在大屏幕上，我们希望显示交互式地图。 在小屏幕上，只显示一个静态图形，链接到 Google 地图。 这是不同屏幕的不同的内容，最好不要由 CSS 处理，而是由我们的服务器提供不同的内容。 我们为此使用了 Enquire.js 以及 Ajax 中的正确内容。

// wait until the site loads, it's in the footer anyway
$(window).load(function() {
  enquire
    .register("(min-width: 650px)", {
      // reverso mama-bear, essentially
      match: function() {
        $("#map").load(
          "/parts/map-papabear.html"
        );
      },
      // baby-bear
      unmatch: function() {
        $("#map").load(
          "/parts/map-babybear.html"
        );
      }
    })
    .listen();
});

---

我们的 global.js 文件最终合并了三个库。 CodeKit 通过其注释指令很好地处理了这一点

// @codekit-prepend "jquery.fitvids.js";
// @codekit-prepend "modernizr.js";
// @codekit-prepend "enquire.js";

// our custom code...

我们在最终示例中没有留下任何视频，但我们在研讨会中对它们进行了处理，并使用了 FitVids.js 使它们在我们的流体宽度设计中工作。

$(".main-column").fitVids();

---

祝一切顺利！