我在 Webstock ’13 工作坊上的笔记

我认为我前往新西兰参加 Webstock 的旅行值得举办一个特别的研讨会。为了纪念他们独特的国鸟，我创建了一个简单的单页网站 新西兰奇异鸟。该网站最初是一个简单的 Photoshop 文档，在研讨会期间，我们将它变成了一个完整的网站。以下是我们在该过程中涵盖的所有内容。

该设计主要以“笔记本电脑优先”为导向。并非针对小屏幕或大屏幕设计，但设计非常简单，因此使其流畅并适应不同的屏幕尺寸并不难。在 Photoshop 文件中最初选择的画布大小没有什么神圣的。

---

使用的字体是 Proxima Nova。我碰巧拥有它，因此我可以在本地使用它，但在网络上，我们通过 Typekit 使用它。它具有多种粗细和样式，这非常棒，但在网络上加载所有这些样式会非常沉重且缓慢。相反，我们只选择了 Thin、Regular Italic 和 Semibold，其大小为 77K。

在我们的 SCSS 中，我们记下了我们可用的粗细，因此我们确保对此进行具体说明，并且不会冒浏览器伪粗体或伪斜体的风险。

body {
  font-family: "proxima-nova", sans-serif;
  /*
    Thin: 100
    Regular Italic: 400
    Semibold: 600
  */
} 

在套件设置中，我们告诉 TypeKit 在我们的本地开发域以及最终网站所在的域上提供此套件是可以的。

---

说到本地开发，我们的开发包括在 Sublime Text（现在是 v3）中编辑代码。

我们使用 CodeKit 监视我们的项目文件夹，它为我们处理预处理、图像压缩以及 JavaScript 最小化/连接。

我们使用 MAMP 创建了一个本地域名来使用。这使我们能够使用 PHP，我们利用它来使用 include() 以较小的模块化块工作。我们编写的每一部分代码，无论是 CSS、HTML 还是 JS，都以较小的模块化块存在。拥有一个“真实”的域名而不是 file:// URL 意味着

• 我们可以包含来自根目录的资源。例如 src="/js/file.js"，我认为这是一个很好的约定，因为它可以非常清楚地表明该文件的确切位置。
• 我们可以告诉像 Typekit 这样的服务我们的本地开发域名，以便可以在那里提供字体。
• 我们可以执行诸如发出 Ajax 请求之类的操作，由于浏览器的安全限制，除非在“真实”域名上，否则您无法执行这些操作。

---

我们的排版规则非常简单。UA 样式表中的排版规则非常好，我们只需根据需要进行一些调整即可。例如，标题的 line-height 与基本 line-height 不同。

所有字体大小，实际上甚至网站上的所有边距和填充都以 EM 为单位设置。这意味着所有大小/间距都与 body 上的 font-size 直接相关，我们会在不同的断点处调整它。

我们许多标题的不同部分都比标题的其余部分更粗，颜色也不同。但这仅仅是一种视觉效果，而不是为了强调。因此，<b> 标签非常完美，它仅用于样式设置，而不是用于强调。

---

我们在 各处使用 box-sizing，因为它始终是最好的选择。在我们的例子中，我们使用浮动来创建一个简单的网格。当我们基于 em 的填充来自基于百分比的流体列的内部时，数学运算会容易得多。

---

因为我们出于各种目的使用了浮动，这意味着需要清除这些浮动以保证布局的完整性。我们的浏览器目标（IE 9+）是这样的，我们可以使用非常简单的 clearfix。

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

与其在需要它的 HTML 中使用该类名，不如改为创建一个占位符选择器

%clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

然后，每当我们需要清除特定元素上的浮动时，我们只需扩展该占位符即可

.page-wrap {
  @extend %clearfix;
}

这使得最终选择器非常高效。只需一个用逗号分隔的需要清除的所有内容的列表。

---

我们将该占位符选择器放入名为 _bits.scss 的文件中。文件名开头的下划线只是一个约定，表示“此文件是一个部分，将在其他地方包含，而不是单独编译”。

我对该文件的约定是放置一些不会编译成任何内容但可以在其他地方使用的“片段”。例如变量

$green: #51cd4b; /* Don't get fancy, get memorable. */

断点 @mixin 具有不同的互斥断点以及 视网膜测试

@mixin bp($point) {
  @if $point == 'baby' {
    @media (max-width: 600px) { @content; }
  }
  @if $point == 'mama' {
    @media (min-width: 601px) and (max-width: 1100px) { @content; }
  }
  @if $point == 'papa' {
    @media (min-width: 1101px) { @content; }
  }
  @if $point == 'retina' {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @content }
  }
}

这使得使用媒体查询变得超级简单和逻辑。请注意“三只小熊”风格的命名约定。这比特定设备的名称要好得多，因为这些名称会随着时间的推移而变得毫无意义。

使用此 bp() 混合器时，您正在更改的属性/值在已编写代码中彼此相邻，而不是在某个遥远的块中。例如不同宽度的网格

.module {
  float: right;
  @include bp(mama) {
    width: 31%;
    margin-left: 3.5%;
    &:nth-child(3n) {
      margin-left: 0;
    }
  }
  @include bp(papa) {
    width: 48%;
    margin-left: 4%;
    &:nth-child(2n+1) {
      margin-left: 0;
    }
  }
}

占位符选择器非常适合重复的代码段

%texture-light {
  background: url(../images/subtle_dots.png);
  @include bp(retina) {
    background: url(../images/[email protected]);
    background-size: 27px 15px; /* Size of non-2x version */
  }
}

使用 @mixin 来处理类似的事情可能很诱人，但在多次使用时，占位符/@extend 的效率略高。

---

“纹理”是 微妙的点，我在 Photoshop 中将其反转以创建页脚的深色版本。

---

奇异鸟图形是矢量形状。这非常适合 SVG。我们从库存照片中获取它，并在 Adobe Illustrator 中将其裁剪到合适的大小，该软件可以将其原生保存为 SVG。我们可以将其链接为 或放置为另一个元素的 background-image，但以这种方式执行此操作不会为您提供 DOM 访问权限和通过 CSS 设置样式的功能。相反，我们使用 PHP include() 将 SVG 直接包含到 HTML 中。

<svg class="logo" viewBox="0 0 522.342 410.83">
  <path id="bird" d="..." />
</svg>

注意路径上的 ID？我们可以在 CSS 中直接定位该形状并使用特殊的 SVG CSS 来影响它。在这里，我们正在设置颜色（使用我们的 Sass 变量）并应用悬停颜色更改（使用 Sass 颜色函数）

#bird {
  fill: $green;
}
#bird:hover {
  fill: darken($green, 10%);
}

我们的目标浏览器都支持 SVG，但如果我们需要进行适当的回退，Modernizr 非常适合此目的。最有效的方法是在页面上放置两个元素。

<svg></svg>
<div class="logo-fallback"></div>

如果支持 SVG，Modernizr 会在元素上提供一个类名。

.logo-fallback { display: none; }
.svg .logo-fallback { background-image: url(logo.png); }

如果支持 SVG，该资源（在大多数情况下）将不会加载。

---

我们使用纯 CSS3 内容（如 border-radius、text-shadow 和渐变）创建了页脚中的按钮。Compass 是 Sass 的一个很棒的插件，用于处理这些类型的事情。我们 不需要 border-radius 的前缀，但我们确实需要渐变的前缀，并且手动编写该 @mixin 会非常困难。

加载 Compass（在 CodeKit 中非常容易），我们可以使用它的 background() @mixin 来创建渐变

.button {
  @include background(
    linear-gradient(#89f784, #068925)
  );
}

它编译成我称之为“机器人呕吐物”的内容——CSS 最好是手动编写起来既繁琐又容易出错。如果您让 Compass 为您提供渐变的 SVG 版本以更好地支持 IE 9，那么情况会变得更加糟糕。

@import "compass/css3";
$experimental-support-for-svg: true;

在按钮的 :active 状态下，我们删除底部边框并将其向下移动边框的宽度，以实现伪 3D 效果。我们使用 translateY() 进行移动，因为它是一个 设计移动选择，而不是位置问题。

---

流畅和自适应布局是响应式设计的一部分。加载正确的内容是另一部分。我们使用页脚中的地图来说明这一点。在我们的“婴儿”屏幕尺寸下，我们加载了一个静态链接地图，这更适合移动设备。在我们的“妈妈”尺寸或更大尺寸下，我们加载了一个嵌入式 Google 地图。更多信息来自 Brad Frost。

当我们的媒体查询匹配时，我们使用 jQuery 通过 Ajax 加载不同的内容。我们使用 Enquire.js 来测试这一点并为我们提供所需的回调函数。

---

该项目 在 GitHub 上。以及 此处演示。

可能值得深入研究一下它的浏览器支持。也许这会是一个不错的屏幕录制。

最后但并非最不重要的一点：真正的奇异鸟确实遇到了麻烦，并且 您可以提供帮助。