/ html

theme

themes - 网站主题模板

一个网站需要一套精心维护的主题模板(themes),wordpress、ghost 等博客都有 themes store 可以购买别人精心维护的主题模板。

主题模板(themes)是一个网站的门面,设计合格的主题模板不仅要能适应不同设备的响应式布局,更应该具有良好的可用性、美观性。

模板引擎

遵循 DRY 准则,我们需要为一个主题提供:

  • layouts
    • 多个 _header partial,约定局部视图使用前缀 _
    • 多个 main
    • 多个 _footer partial,约定局部视图使用前缀 _
  • shared
    • _errors
    • _messages
  • pages
    • error 页面
    • offline 页面

宏观上说,也就是先定义布局,然后继承布局,并定义和引用子视图。这就需要一个模板引擎来支撑。

细部的 DRY

<div class="form-field">
     <label>First Name</label>
     <input type="text" name="firstName"></input>
</div>
<div class="form-field">
     <label>Last Name</label>
     <input type="text" name="lastName"></input>
</div>
<div class="form-field">
     <label>City</label>
     <input type="text" name="city"></input>
</div>
<div class="form-field">
     <label>Country</label>
     <input type="text" country="country"></input>
</div>

改造为

var formFields = [{
    title: "First Name",
    name: "firstName"
}, {
    title: "Last Name",
    name: "lastName"
}, {
    title: "City",
    name: "city"
}, {
    title: "Country",
    name: "country"
}];

{{#formFields}}
    <div class="form-field">
         <label>{{title}}</label>
         <input type="text" name="{{name}}"></input>
    </div>
{{/formFields}}

Mustache.render(template, {formFields: formFields});

从零开始?

完全不需要,我们选择站在巨人的肩膀上开始:

http://yeoman.io/
https://github.com/yeoman/generator-webapp

HTML5 Boilerplate

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Bootstrap

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

响应式设计

响应式网页设计,是将已有的 3 种开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来。先针对手机布局,然后是对平板、笔记本、台式机依次适配。

以前的网站设计普遍使用固定宽度(例如960像素),以期给所有终端用户带来较为一致的浏览体验。这种固定宽度设计在笔记本电脑上显示刚刚好,而在高分辨率显示器上却会在两边多出些空白。

但现在有了智能手机。消费者在家中上网时优先使用小屏幕设备已成为一种习惯,使用小屏幕设备上网的人数已经极具规模。与此同时,27英寸和30英寸的大显示器已经普及开来。上网设备之间的尺寸差距与日俱增。这就让响应式设计更具有价值。

采用 HMTM5 和 CSS3 技术的响应式网页设计,可以使网站兼容多种设备和屏幕。

拥抱手机,抛弃IE

手机浏览器会将一个标准网页缩小至与设备可视区域(视口)恰好匹配。然后用户在自己感兴趣的内容区域上放大浏览。这在大多数情况下都是糟糕的体验。

响应式设计一定是最佳选择么

如果预算充足且形势需要,做一个真正的手机版网站是首选。

然而,不是所有项目都要求如此完美,采用响应式设计绰绰有余。在小屏幕设备上,将次要内容放在主体内容之下,或者最坏情况下将其直接隐藏。

响应式网页设计的定义

响应式设计是将已有的三种开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整个起来的统称。

以往我们是先针对桌面电脑进行固定宽度设计,然后将其缩小并针对小屏幕进行内容重排;现在我们应该首先针对小屏幕进行设计,然后逐步增强针对大屏幕的设计和内容。

以桌面电脑为中心的设计思想,应该转变成为未知设备而设计的思想。首先为最小的可视区域设计版式,然后在此基础上渐进增强用户体验。

响应式设计中,就不要再迷恋 px 这个度量单位,因为大多数情况下我们不会使用 px,而会使用相对度量单位(em 或百分比)。相对单位更方便我们审查其它响应式设计作品,查看设计的变更之处。

视口和屏幕尺寸。视口是指浏览器窗口内的内容区域,不包含工具栏、书签栏等。

推荐一个响应式设计创意收集网站:http://mediaqueri.es

响应式方法论:先针对小视口进行设计,然后逐步针对大视口进行渐进增强支持。

HTML5

W3C 的 HTML5 验证工具:http://validator.w3.org

<div class="header">
  <div class="navigation">
    <ul class="nav-list">
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="About">About</a></li>
    </ul>
  </div> <!-end of navigation -->
</div> <!-end of header -->

通常我们都会给代码中的 </div> 添加注释。HTML5 新增了语义化的标签元素,这样标记会更加简洁,并且不需要额外的注释:

<header>
  <nav>
    <ul class="nav-list">
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="About">About</a></li>
    </ul>
  </nav>
</header>

CSS3

http://www.csszengarden.com/

实现响应式设计的关键技术是 CSS3。在使用 CSS3 添加渐变、圆角、文字阴影和动画等视觉效果之前,首先要让它来扮演一个更重要的角色,那就是利用 CSS3 的媒体查询,针对特定的视口设置特定的 CSS 规则。

媒体查询:支持不同的视口

我们仅使用几行代码,就可以根据诸如视口宽度、屏幕比例、设备方向(横向或纵向)等特性来改变页面内容的显示方式。

如果要对老版本浏览器如 IE678 实现兼容修复(虽然基于 JavaScript)也很容易。

body {
  background-color: grey;
}
@media screen and (max-width: 960px){
  body {
    background-color: red;
  }
}
@media screen and (max-width: 768px){
  body {
    background-color: orange;
  }
}
@media screen and (max-width: 550px){
  body {
    background-color: yellow;
  }
}
@media screen and (max-width: 320px){
  body {
    background-color: green;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" media="screen" href="screen-styles.css">
</head>
<body>
</body>
</html>

<link> 标签的 media 属性为样式表指定设备类型(如显示屏或打印机)。可以将媒体查询想象成对浏览器的询问。如果浏览器回答“是”,则应用样式;如果回答“否”,则不应用。CSS3 的媒体查询能问的问题要多一点。例如,媒体查询可以问:“你是一块纵向放置的显示屏么?”,对应代码:

<link rel="stylesheet" media="screen and (orientation: portrait)" href="screen-styles.css">

首先媒体查询表达式询问了媒体类型(你是一块显示屏么?),然后询问了媒体特性(显示屏是纵向放置的么?)。

媒体查询能检测哪些特性?

  • width 视口宽度。
  • height 视口高度。
  • device-width 设备屏幕宽度。
  • device-height 设备屏幕高度。
  • orientation 设备横向还是纵向。

用媒体查询改造我们的设计

CSS 代表层叠样式表。所谓层叠,就是指样式表中后面的样式会覆盖前面相同的样式(除非前面的样式具有更高的针对性)。因此我们可以在样式表的开头设置基本样式(重置样式),以便适应所有设计,然后使用媒体查询来进一步重写相应的部分。例如,针对较小的视口,使用媒体查询重写这部分样式,为拇指一族提供更大的点击区域;然后再针对大视口设计(用户大多数使用鼠标),将导航链接设计成简单的文字链接。

重置样式就是一组 CSS 声明,用来覆盖不同浏览器渲染 HTML 元素时的各种默认样式。重置样式一般会被加入到主样式文件的开头,用来将各个浏览器的自有样式重置成统一表现,确保样式表中后续追加的样式在不同浏览器中有相同的表现效果。世界上没有完美的重置样式,许多开发者都有自己的一套。针对 HTML5 有更好的选择:https://github.com/necolas/normalize.css

阻止移动浏览器自动调整页面大小

iOS 和 Android 浏览器都基于 WebKit(http://www.webkit.org)。这两种浏览器都支持用 viewport meta 元素覆盖默认的画布缩放设置。只需要在 HTML 的 <head> 标签中插入一个 <meta> 标签。

<meta name="viewport" content="width=device-width,inital-scale=1.0">
  • 将宽度设置为设备宽度。
  • 将缩放比例设置为 1.0,即不缩放。

安装 iOS 模拟器和 Android 模拟器:

针对不同视口宽度修正设计

设置 viewport meta 标签后,任何浏览器都不再缩放页面了,现在我们可以针对不同视口来修正设计效果。首先在 CSS 中为平板设备(如iPad)增加媒体查询,竖直 iPad 的视口宽度是 768px(横向视口宽度是 1024px)。

@meida screen and (max-width: 768px) {
  #wrapper {
    width: 768px;
  }
  #header, #footer, #navigation {
    width: 748px;
  }
}

媒体查询针对视口宽度不大于 768px 的情况,重新调整了 wrapper header footer 以及 navigation 等页面元素的宽度。

拥抱流式布局

在“表格布局”的时代落幕之后,很好有需要使用百分比布局。但是,所有伟大的设计和思想,都会卷土而来。

  • 使用百分比布局
  • 用 em 替换 px
  • 弹性图片
    • 让图片随视口缩放
    • 为特定图片指定特定规则
    • 给弹性图片设置阈值
    • 超级全能的 max-width
  • 为不同的屏幕尺寸提供不同的图片
  • CSS 网格系统

我们需要将固定像素布局转换为百分比布局,这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。

目标元素宽度 ÷ 父元素宽度 = 百分比宽度

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

#header {
  margin-left: 10px;
  margin-right: 10px;
  width: 940px;
}

我们首先从最外层元素开始,利用公式将它改为百分比宽度。假设所有页面的内容都被包裹在一个 ID 为 #wrapper 的 div 中。作为最外层 div ,我们该把它的宽度定义为相对视口宽度的百分之多少呢?

我们先将其设置为 96% 看看效果如何,或者选择 100% 或 90%。这取决于我们的感觉,保证页面在视口内有最美观的视觉效果即可。

#header (目标元素)被包裹在 #wrapper(上下文元素)中。940 ÷ 960 = 97.9166667%;

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 96%; /* 取决于感觉 */
}

#header {
  margin-left: 10px;
  margin-right: 10px;
  width: 97.9166667%; /* 940 ÷ 960 */
}

文字大小:用 em 替换 px

用 em 替换 px 主要是为了文字缩放。 em 的实际大小是相对于其上下文的字体大小而言的。如果我们给 <body>标签设置文字大小为 100%,给其他文字都使用相对单位 em,那这些文字都会受 body 上的初始声明的影响。这样做的好处就是,如果在完成了所有文字排版后,客户又提出将页面文字统一放大一点,我们就可以只修改 body 的文字大小,其他所有文字也会相应变大。

现代浏览器的默认文字大小都是 16px。因此一开始给 body 标签应用以下任何一条规则所产生的效果都一样:

font-size: 100%;
font-size: 16px;
font-size: 1em;

同样,目标元素尺寸 ÷ 上下文元素尺寸 = 百分比尺寸 这个公式也适用于将文字的 px 转换为相对单位 em。加入 header 的文字大小为 48px,则转换为相对单位就是 3em(48 ÷ 16)。

图片大小:弹性图片

在现代浏览器(包括IE7+)中要实现图片随着流动布局相应缩放非常简单。只需在 CSS 中作如下声明:

img {
  max-width: 100%;
}

这样就可以使图片自动缩放到与其容器 100% 匹配。更进一步,可以将同样的样式应用到其他多媒体标签上。如:

img,object,video,embed {
  max-width: 100%;
}

这些多媒体元素都可以自动缩放了。

接下来还需要让图片随视口缩放

首先我们需要将所有 img 标签上的 width 和 height 属性全部删除!

为特定图片指定规则

img {
  max-width: 100%;
}

sideBlock img {
  max-width: 45%;
}

还可以继续对特定图片追加样式:

.my-pic {
  width: 28.9398281%; /* 202 ÷ 698 */
}

my-pic 的实际宽度是 202px。但在超过 1900px 的视口中,图片也被拉大了,其显示宽度超过了 300px。我们可以通过追加另一个样式来为图片设置阈值。

.my-pic {
  width: 28.9398281%; /* 202 ÷ 698 */
  width: 202px; /* 给弹性图片设置阈值 */
}

超级全能的 max-width 属性

另一种限制页面无限扩张的方法是给最外层的 #wrapper 设置 max-width 属性:

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 96%;
  max-width: 1414px; /* 限制页面无限制扩张 */
}

为不同的屏幕尺寸提供不同的图片

现在我们可以让图片完美缩放,而且也知道了如何限制特定图片的显示尺寸。但图片缩放存在一个问题,那就是图片尺寸必须必其显示尺寸更大以保证渲染效果,否则的话图片看起来会很糟糕。基于这个原因,图片文件的体积就永远比实际显示所需的大。

CSS 网格系统

可以参考 bootstrap 中的网格系统。

HTML5 和 CSS3 现在就能用么?

IE7 和 IE8 都不支持 HTML5 新的语义化标元素,也不支持 CSS3 的新属性。如果一个网站的主要用户群用的是 IE7 或 IE8,那么花费精力将其做成基于 HTML5 和 CSS3 的响应式设计没有太大意义。

腻子脚本和 modernizr

使用 Modernizr 让老版本 IE 支持 HTML5 元素。

通常老版本的 IE(IE9之前的版本)并不识别 HTML5 的任何新语义元素。但是我们可以通过 JavaScript 创建这些元素,那么 IE 就能识别这些元素并为其设置样式。它的名字就是Modernizr(https://modernizr.com/)

给 IE9 之前的版本追加 min/max 媒体查询功能

Respond.js (https://github.com/scottjehl/Respond)是为 IE8 及更低版本增加媒体查询支持的最快的 JavaScript 工具。

在解决跨浏览器响应问题时,还需要引入一些用于修补旧浏览器缺陷的工具,被称为 polyfill

想找一种编写优秀 HTML5 代码的捷径?可以考虑 HTML5 样板文件(https://html5boilerplate.com/https://github.com/h5bp/html5-boilerplate)

  • Normalize.css and helpers
  • jQuery and Modernizr
  • Modernizr 根据一系列功能检测按需加载 CSS 和 JavaScript 文件,从而为缺少某个特性的浏览器提供垫片脚本,以及额外或独立的样式。

下载完成后,首先要修改 <html lang="en"<html lang="zh"

Chinese	zh
Chinese (Simplified)	zh-Hans
Chinese (Traditional)	zh-Hant

响应式网页设计不是灵丹妙药

根据我的经验,如果预算有限或开发一个完全定制的“移动网站”不太可行,那么才是响应式大显身手的时候。

引导客户:网站不必在所有浏览器中表现一致

着手响应式设计之前,要跨越的最后一道障碍往往是思维定式。

  • 允许页面显示效果在老旧浏览器中有细微差别,这样可以使代码更容易维护,将来更新的成本也更低。

themes 使用的模板引擎

目前主要有:handlebars、twig、pug 等。ghost 示例主题选用的是 handlebars: http://handlebarsjs.com/

为 Ghost blog 创建一个 theme

今天我们讨论的话题是如何为 ghost 博客实现一套自己的模板。

在开发主题前,需要有 ghost 运行环境,因为主题需要使用 handlebar 模板。需要 ghost 主程序在 dev 模式下渲染成 html 才能看得到。也就是说主题是无法直观看到效果的,必须配合 ghost 主程序才能实时看到页面。

  • Ghost(Node.js) 使用 Handlebar 模板。
  • Laravel(PHP)使用 Blade 模板。

目前前端工程化类似 webpack gulp grunt 要能处理模板。

参考文档:https://themes.ghost.org/docs

注意文档对应的 ghost 版本

这里我们主要为 ghost 0.11.11 设计模板:https://themes.ghost.org/v0.11.11/docs

从零开始独立完成一套 themes 的开发并不是明智之举,更好的做法是站在巨人的肩膀上:https://github.com/TryGhost/Casper

casper 是 ghost 官方开源的主题,我们可以以此项目为基础来实现我们自己的 themes。

首先我们需要在本地搭建一个 ghost 开发环境,注意,使用 npm start 而不是 npm start --production,因为生产环境看不到 themes 的实时修改!

The recommended file structure is:

.
├── /assets
|   └── /css
|       ├── screen.css
|   ├── /fonts
|   ├── /images
|   ├── /js
├── default.hbs 
├── index.hbs [required]
└── post.hbs [required]
└── package.json [required]

启用我们新建的主题,这样修改 hbs 文件后就能看到变化。

注意,如果新增了 hbs 文件,必须重启 ghost 才能生效。

Ghost 除了使用了 handlebars 之外,还大量使用了另外一个库express-hbs ,它为 handlebars 增加了一些特性,例如 layoutspartials.

default.hbs 是一个默认布局文件(layout)

Helper Overview

Ghost has a number of built in helpers which give you the tools you need to build your theme. Helpers are classified into two types: block and output helpers.

阅读记录:https://themes.ghost.org/v0.11.11/docs/index-context