生成 SSH Key

1
2
3
4

ssh-keygen
# 然后一直回车
# 如果让你输入密码(passphrase)时，你输入了密码，将来在使用时也得输入密码。
# 所以用空密码吧(回车)

将私Key加入SSH-Agent

1
2

ssh-add ~/.ssh/name_rsa
# 假设上一步生成了 name_rsa 和 name_rsa.pub

拷贝公Key到服务器

1
2
3
4
5
6

# 方法一:
scp -i other_private_key ~/.ssh/name_rsa.pub other_user@remotehost:/somepath/name_rsa.pub
# 方法二
scp  ~/.ssh/id_rsa.pub currentuser@remotehost:/somepath/name_rsa.pub #with password
# 方法三
ssh-copy-id -i ~/.ssh/name_rsa.pub remotehost # with password

公Key 加入到 authorized_keys

1
2

# 在服务器上
cat /path/to/id_rsa.pub >> /home/sshuser/authorized_keys

设置 服务器上 用户的 .ssh 权限

1
2
3
4
5
6

# 在服务器上
# 1. 确保用户和组正确
sudo chown -R sshuser:sshuser /home/sshuser/.ssh
# 2. 设置 .ssh 和 .ssh/* 权限
sudo chmod 700 /home/sshuser/.ssh
sudo chmod 600 /home/sshuser/.ssh/*

例子

作为一个例子，我们现在要配置用户 mks 的 ssh 免密码登录，同时用户 git 免密码的 clone git 仓库。

1. 生成 key

   1 2 3 4 5 6 7

   > ssh-keygen<ENTER> Generating public/private rsa key pair. Enter file in which to save the key (/Users/timber/.ssh/id_rsa): /Users/timber/.ssh/mks_rsa<ENTER> ...<ENTER>.. # 这里省略了多个<ENTER>, 省略了生成 git_rsa 的步骤 > ls ~/.ssh mks_rsa mks_rsa.pub git_rsa git_rsa.pub

2. 加入 ssh-agent

   1 2	ssh-add ~/.ssh/mks_rsa ssh-add ~/.ssh/git_rsa

3. 拷贝到服务器

   1 2 3 4

   scp ~/.ssh/mks_rsa.pub mks@monkeysoft.cc:/home/mks/ # 然后输入 mks 的密码 scp ~/.ssh/git_rsa.pub mks@monkeysoft.cc:/home/git/ # 然后输入 mks 的密码, 假设 mks 对 /home/git 有写权限

4. 加入 authorized_keys

   1 2 3

   # 登录 monkeysoft.cc ssh mks@monkeysoft.cc # 输入 mks 的密码

   1 2 3 4

   # 在 monkeysoft.cc 上 cat /home/mks/mks_rsa.pub >> /home/mks/.ssh/authorized_keys cat /home/mks/git_rsa.pub >> /home/git/.ssh/authorized_keys # 假设 mks 对 /home/git 可写

5. 设置 .ssh 权限

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   # 在 monkeysoft.cc 上 ## 1. 查看 .ssh 的权限 和 所属 用、组 ls -l /home/mks/.ssh ## 1.1 如果 用户、组 不是 mks, 则 sudo chown -R mks:mks /home/mks/.ssh sudo chown -R git:git /home/git/.ssh ## 2. 更改权限 sudo chmod 700 /home/mks/.ssh sudo chmod 600 /home/mks/.ssh/* sudo chmod 700 /home/git/.ssh sudo chmod 600 /home/git/.ssh/* # 假设 mks 对 /home/git 可写

6. 测试

   1 2 3 4

   # 登录 mks 到 monkeysoft.cc ssh mks@monkeysoft.cc # git clone 仓库 git clone git@monkeysoft.cc:/srv/awesome-project.git

本文翻译自 Nathan Rambeck 的Thoughtfull CSS Architecture。

你是否参与一个 CSS 项目，然后这个项目随着时间慢慢的变得混乱不堪？CSS 样式对 HTML 的影响是很难跟踪的，对 CSS 的小幅改动能修复一个问题，同时也可能引进很多其他的问题，还可能需要丑陋的补丁，甚至会使 Javascript 代码失效。我想我们都遇到过这些问题。但是，只要在项目开始是就就有一个良好的设计，是可以大幅的避免这个问题的。现在我们来谈谈 CSS 的架构吧。

精巧架构的好处

精巧 CSS 架构的主要好处就是可扩展性。对任何一个项目来说，不管是项目规模的增长还是团队成员的增加，都会使其可扩展性成为挑战。CSS 项目也不例外。CSS 的层叠(cascading)和全局(global)特征，使它功能强大，同时也很脆弱。不管你写 CSS 代码多久了，你都会遇到这样的情形：你看到自己只是改动了一行 CSS 代码，准备修复一个小 bug，却没想到会使项目的其它好几处都废掉了。这时你只想一头撞死在墙上😂。仔细的设计 CSS 可以为我们带来如下好处：

• 更少的样式规则
• 更少的样式冲突
• 长期可维护性
• 新团队成员可以快速融入
• 团队成员更轻松地合作
• 平滑的项目接力(handoffs)

CSS 规则的种类

Jonathan Snook 在他书中Scalable and Modular Architecture for CSS(SMACSS) 推广了对 CSS 规则进行分组的概念。将 CSS 规则按照这些良好定义的类别进行分组，可以让我们对每个样式的目的有更好的理解。基于 SMACSS 我将 CSS 规则分组为 7 个类别，确保每个样式刚好符合这些类别中的一个。

• 基本样式
• 对象
• 组件
• 状态
• 主题(Themes)
• 实用工具(Utilities)
• Javascript 钩子(hooks)

理解这些类别和它们的目标能帮助我们更好的理解我们所写的样式。

基本样式

基本样式是为元素标签所写的样式。它们是整个网站全局的默认样式。通常，这些样式包括排版，盒子尺寸(box-sizing)，以及为不同浏览器表现不一的元素统一格式。一个常见的错误就是，对基本元素添加过多的样式，创建了不是真正需要的默认样式。比如，你应该不会全局地删除无序列表的项目符号吧？

对象

对象是指只关注结构和布局的规则。装饰性的样式不能分组到对象类别。对象样式的概念是由 Nicole Sullivan 推广开的, 目的是为了重用结构和布局的通用模式。找出你设计中的结构模式，并创界对象规则，将它们用于多个组件或者网站的各个部分。通过将这些样式放到对象类中，我们可以避免重复，减少 CSS 的大小。网格系统（不管是你自己一手撸的还是引入的框架）就是一个对象类别的例子。

组件

组件是相互独立的自包含的 UI 片段。它们是原子设计的面包和黄油，并最终集成到你的样式中去。组件可大可小，可以小到只是一个按钮，也可以大到是一个轮播屏（carousel）。创建健壮的组件的关键在于，保持组件的独立性和自包含性，不能依赖页面的其它部分。这样的话，你就可以把组件扔到任何页面，它自己就能管理好它的结构和设计了。

状态

状态类用于帮助更新组件的状态。比如说，折叠组件的打开和折叠，链接激活和未激活，以及元素的显示和隐藏。通常使用 Javascript 来添加这些状态类。不要用 Javascript 来直接处理样式，而是应该更新状态类，让样式表自行决定怎样渲染页面。

主题（Themes）

主题类只是简单地变更组件的颜色，字体和其他的装饰性样式。主题类也可以用来改变整个页面的外观，不仅仅用于组件。虽然不是每个项目都用到主题，但你需要时它就变得很有用。

1
2
3

<blockquote class="c-pullquote t-light">
  <p>A great quote from someone special.</p>
</blockquote>

使用工具（Utilities）

工具类是用于特定样式规则的单一目标的帮助类。它们用来调整 spacing, 增加字体尺寸，居中文本，清除浮动, 隐藏元素等等。工具类还可以用来小幅调整布局，如添加组件之间的间隙或者清除浮动。还能对现成的组件做小幅的修改，以避免创建一个新的组件变种。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.u-sp {
  margin-bottom: 1em !important;
}
.u-clearfix:after {
  content: " ";
  display: block; clear: both; visibility: hidden;
  height: 0; font-size: 0;
}
.u-txt-center {
  text-align: center !important;
}
.u-txt-larger {
  font-size: 130% !important;
}

1
2
3

<div class="promo u-sp"></div>
<div class="promo u-sp"></div>
<div class="promo"></div>

Javascript 钩子（hooks）

只要可能，最好分离 Javascript 与样式之间的依赖。如果一个 CSS 类名同时用于样式应用和 Javascript 选择，将可能引起问题。比如在未来重构了 CSS 样式而 Javascript 没有相应的更新。所以，Javascript 钩子需要它们专用的 CSS 类。

1

<button class="btn btn--buy js-buy-now">

类名

为类命名时，一定要保证名字长到能轻易辨别（不要用 .pq，要用 .pullquote），但也不要超过需要的长度（要 .nav，不要 .navgation）。使用可读的类名，对团队成员在现在和将来都能理解你代码所表达的逻辑非常重要。

设计描述性的有意义的类名是写 CSS 是最难得问题，但是指要做好了，就会变得很有帮助。限于篇幅，这里不展开讨论怎样命名，建议看看 Ethan Muller 的这篇文章 Naming CSS Stuff is Really Hard, by 。

BEM 命名约定

BEM (Block, Element, Modifier) 是一个很著名的超好用的 CSS 组件类名命名约定，由俄罗斯最大的搜索引擎 Yandex 开发。BEM 非常简单：

[BLOCK]__[ELEMENT]-[MODIFIER]

你可能会吐槽这个命名法是不是太啰嗦了，但是这种担忧很快就会被 BEM 带来的价值所取代。下面是一个使用 BEM 的组件的例子。

1
2
3
4
5
6
7

<div class="alert alert--warning">
  <h1 class="alert__title">
    <span class="alert__icon"></span>
    Alert Title
  </h1>
  <p class="alert__description">The password you entered is invalid.</p>
</div>

BEM 有如下三个好处:

• Readability: 清晰描述性的类名使 HTML 和 CSS 文件更好读。
• Self-description: 清楚地指出了哪个元素属于哪个组件。
• Specificity: 为每一个元素都设置一个类看起来有些过分了。但是，这样做可以保持每个选择操作的低特殊性，使得重载变得更直接。

命名空间

另一个命名类的最佳实践是根据我们前面所描述的分类为类名加一个命名空间前缀。这些前缀在类名前加了几个字符，这些字符对理解这个类的使用目的是极有价值的。下面是我所用的命名空间:

• 对象: .o-
• 组件: .c-
• 状态: .is- 或 .has-
• 主题: .t-
• 实用工具: .u-
• Javascript 钩子: .js-

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<footer class="c-footer">
  <div class="o-container-wide">
    <a class="c-footer__logo" href="/">The Assist</a>
    <div class="c-social c-social--follow">
      <div class="c-social__label u-txt-center">Join the conversation</div>
      <ul class="c-social__list">
        <li class="c-social__item"></li>
        <li class="c-social__item is-active"></li>
        <li class="c-social__item"></li>
      </ul>
    </div>
    <p class="c-footer__credit"></p>
  </div>
</footer>

关于命名空间价值的更多信息，可以查看 Harry Roberts 的 More Transparent UI Code With Namespaces。

代码风格

像其他任何代码一样，保持代码风格的一致性很重要。包括空白字符，缩进，命名约定，注释等规范。你可以找到从网上找到一些合理代码规范，比如: Google, Github 和 Nicolas Gallagher。你可以使用它们，也可以制定自己的规范。

代码组织

为了最优化代码的组织你应该使用预处理工具（ Sass，Less，Stylus）和后处理工具（PostCSS）来编译代码。好处很多，包括变量，函数，mixin, import 和 嵌套 (nesting) 等特性。这些特性让你比只是用 CSS 时能写出更具良好组织的架构。

使用 import, 可以将样式分解成多个意义明确的文件。

1
2
3
4
5
6
7
8

@import "variables";
@import "mixins";
@import "normalize";
@import "typography";
@import "headings";
@import "headings";
@import "layout";
@import "carousel";

为所有使用超过一次的值创建变量。为变量名加一个前缀，让变量的目的明确，同时也可以配合编辑器的补全功能。

1
2
3
4

// Colors
$c-warning: Red;
$c-primary: Blue;
$c-background: White;

全局变量应该定义在专门的文件中，只用于单个组件的局部变量应定义在当前文件中。对于 Sass，变量可以定义在嵌套的样式规则里面。

1
2
3
4
5
6

.alert {
  $background-color: Red;
  $foreground-color: Cream;
  background-color: $background-color;
  color: $foreground-color;
}

源码顺序

由于 CSS 层叠的本性，样式的顺序很是重要的。如果你没有特意的安排样式导入的顺序，你会发现你总要不停的与 CSS 的层叠规则进行战斗。

最近， Harry Roberts 发表了一个排序样式的明智方法/a sensible method for ordering your styles，他把这个方法称作 ITCSS (Inverted Triangle CSS)。其目标是避免名字空间冲突，特异性(specificity)问题，样式泄漏(leaky styles)，和无意的回归(inadvertent regressions) (见他的 in-depth slides)。其概念非常简单：将那些应用到最大范围的具有最小特殊性的设定和规则放在最前面，将那些应用到最小范围的具有最大特殊性的置于最后。这就是说，要将变量定义，标签样式规则放在开头，而工具类和 IE 补丁置于结尾。

Harry 定义了 7 组样式文件类型：

• settings: 变量和其他设置
• Tools: 自定义函数和 Mixin
• Generic: Font-face, box-sizing, normalize 等
• Elements: 标签默认样式，如标题和链接
• Objects: 布局和结构类
• Components: 独立的组件
• Trumps: 实用工具及终极王牌(Utilities and other rules meant to be a final trump over everything else)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@import "settings.global";
@import "settings.colors";
@import "tools.functions";
@import "tools.mixins";
@import "generic.box-sizing";
@import "generic.normalize";
@import "elements.headings";
@import "elements.links";
@import "objects.wrappers";
@import "objects.grid";
@import "components.nav";
@import "components.buttons";
@import "components.promos";
@import "trumps.utilities";
@import "trumps.ie8";

深度挖掘

这篇文章只简单介绍了正在变得越来越深入和广泛的巨大主题，算是抛砖引玉。希望能激发你的灵感，去创造更加精巧严密的 CSS 结构和设计。如果你想跟深入地了解这方面的主题，可以查看本文中引用的诸多链接，查看下面列出的此领域的领军人物的想法和资源。

• Harry Roberts - 目前该领域最多产的思想领军人物之一。关注他的 Twitter，订阅这个博客。阅读他的有关CSS Guidelines的文档。
• Jonathan Snook - 在他的论文和在线书籍中推广了 CSS 架构的概念， Scalable and Modular Architecture for CSS。
• Nicole Sullivan - 引入面向对象的 CSS （Object Oriented CSS）的概念。记录在一个 Github wiki中。

直到现在，我已经使用 React.js 一段时间了。在这个过程中，我开始形成了自己的一套 React.js 最佳实践。

下面的最佳实践主要关注组件(component)结构和JSX。尽管这写不是硬性的规则，这些我一直坚持使用的规则更多的是能帮助我写出更可读更加健壮和可维护的代码。

注意: 这篇文章不会解释例子中用到的 React 范式和惯用法。这最好还是由 React 小组的超棒的文档来解释吧。

组件组成(Component organisation)

对任何代码来说，保持一致性是很重要的。当然，这也包括构建你的 React 组件的代码了。我使用如下的模式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

React.createClass({
    propTypes: {},
    mixins : [],
    getInitialState: function() {},
    getDefaultProps: function() {},
    componentWillMount : function() {},
    componentWillReceiveProps: function() {},
    componentWillUnmount : function() {},
    _parseData : function() {},
    _onSelect : function() {},
    render : function() {}
})

我喜欢在组件的顶部声明propTypes, 因为它们是一个组件很有用的向导, 告诉我们这个组件以怎样的方式被使用（关于这点参考下面的章节）。接下来是mixins, 因为它能让你一开始就了解这个组件对外部行为的使用和依赖。

我选择把left-cycle方法分成两组，组件实例生成之前的（比如: getInitialState, getDefaultProps）和 挂载(mounting)、更新(updating)、已挂载(mounted)循环（比如: componentWillMount, shouldComponentUpdate）。而且，我发现按照执行顺序排列生命周期方法使得推测逻辑变得更容易。

我总是把自定义的方法放在生命周期方法的后面，并且为这些方法加一个下划线前缀，让它们更好识别。我通常会根据它们的用途进行分组（如: 解析，事件处理 等等）。

render方法总是放在最后。render 方法是必须的生命周期方法，当我打开一个文件时几乎总是第一个先去找到它。所以呢，在所有的组件中让他处于一致的位置是实用的吧。

通常，混合器(mixins)同组件遵循相同的约定。

总是设置propTypes验证以求自文档化

我总会使用 propTypes 为最近接收的prop 设置验证。这提供了组件使用的自文档，告诉我们组件如何使用，需要传入哪些prop.

1
2
3
4
5
6
7
8

propTypes: {
    arrayProp: React.PropTypes.array,
    boolProp: React.PropTypes.bool,
    funcProp: React.PropTypes.func,
    numProp: React.PropTypes.number,
    objProp: React.PropTypes.object,
    stringProp: React.PropTypes.string,
}

JSX

不得不说，JSX 有时看起来很丑，这也通常是一些开发者对 React 丑拒的原因。但是，下面一些通用指导可以帮你搞定组件，让它们可读很多，让它们不再辣眼睛。

多行 JSX

不管返回的元素多么的少，我都会把嵌套的 JSX 写成多行的形式，并且添加缩进来增强可读性。例如：

1
2
3
4
5
6

return (
        <div>
            <ComponentOne />
            <ComponentTwo />
        </div>
    );

而不是。。。

1

return (<div><ComponentOne /><ComponentTwo /></div>);

而且，就算单行的 JSX 语句技术上不需要括号，我还是会添上括号，只为了代码的一致性。（还因为没有约束的在我的JS代码里飘来飘去的东东会让我的左眼不受控制的抽搐。。。）

条件 JSX

当我有一些这样条件元素（依据state, prop, 或其他的条件返回的元素）时，我会在 render 方法顶部声明一个空的变量，只在条件成立时才把 JSX 传给这个变量 。 当这个变量在 render 方法的返回语句中返回值时，条件元素同时也会被渲染，空值是则不渲染条件元素。

1
2
3
4
5
6
7
8
9
10
11
12
13

var optionalElement;
if (this.props.condition) {
    optionalElement = (<div> … </div>);
}
return (
    <div>
        …
        {optionalElement}
        …
    </div>
);

内联列表迭代

在可能的情况下，我喜欢在返回的 JSX 中对数据列表进行内联迭代。除非迭代的内部逻辑太过复杂，需要移到返回语句之外生成一个可供渲染数组。

1
2
3
4
5
6
7

return (
    <div>
        {this.props.list.map(function(data, i) {
            return (<Component data={data} key={i} />)
        })}
    </div>
);

缩进、组件属性独占一行

当组件的属性多到（通常3个或以上）在单行中显示不整洁时，我都会写成多行的形式，并添加缩进。是这样：

1
2
3
4
5
6

<Component
    attribute={...}
    anotherAttribute={...}
    attributeThree={...}
    …
/>

而不是。。。

1

<Component attribute={...} anotherAttribute={...} attributeThree={...} />

总结

这些规则并非权威的详尽的指南，但我觉得算是一个好的组织和标准化 React 组件的起点吧。另外我还遇到这些约定的一些其他通用使用场景。

希望这些规则能为你提供一个组织 React 组件的有用的起点。

培养良好的CSS习惯

写注释

/* 这是注释的格式 */

• 只注释哪些意义不明显的代码
• 在生产环境中使用工具删除注释: http://cssminifier.com/

组织CSS样式

为类起一个清晰的名字

• 以目的而不是以表现(appearance)命名类
  好名字: .error, button-primary, .sidebar
  坏名字: .font20px, .red, .redSidebar
• 别用基于位置(position)的名字
  好名字: .gallery, .figure, .banner, .wrapper
  好名字: .leftSidebar
.branding 就比 .header 好.
• 避免神秘代码(cryptic names)
  坏名字: .s1, .s ..

不用自我重复

使用多个classes模拟 类继承, 用decedent选择器模拟 模块 .

使用多个类

理由同上.

使用短属性(shorthand properties)

节省代码, 时间, 带宽.

根据样式相关性分组

两种通用方法:

• 按样式应用范围分组
• 按样式相近目的分组

使用注释分隔样式组

1
2
3
4
5

/* *** Layout *** */
or
/* -------------------- 
         Layout
-------------------- */

使用多个样式表文件

1. 为不同各类的elements创建style sheets

   • color.css
   • forms.css
   • layout.css
   • main.css - covers everything else

2. 创建一个总的style sheet文件, 收集step 1中创建的文件

   1 2 3 4 5

   /* base.css or global.css or site.css */ @import url(main.css); @import url(layout.css); @import url(color.css); @import url(forms.css);

3. 在html中引用 base.css

   1	<link rel="stylesheet" href="base.css">

删除浏览器预设样式干扰

• 删除 padding & margins
• 使用 一致的 font sizes
• 设置一个 一致的 line height
• 改善表格边框, 创建风格统一的表格单元格
• 去掉带连接的图片边框
• 设置 一致的列表缩进和列表项目符号
• 为引用内容删去引号

见 reset.css
有些designers使用 normalize css: http://necolas.github.io/normalize.css/

使用后代选择器

HTML 在使用 descendant selectors 时, 可以形成天然的内容分割. 类似于模块.

参考资料

• Object Oriented CSS
• and this
• Scalable and Modular Architecture for CSS [book]
• and this

牛叉的Sass

运行Sass: 在命令行中cd 到站点文件夹中，假设sass文件位于sass文件夹中

sass --watch sass:css

参见 https://sass-lang.com

最近的工作中我大量的使用了 React.js。它是一个用于用户界面开发的库。而且我发现 React.js 背后的概念使得开发用户界面变得非常简单。但是它还是有少许的缺陷。我觉得尤其坑的是 controlled input ，我被这货搞得很无语。

比如看看下面的代码。

1
2
3

render: function() {
  return ( <input type="text" value="Hello" /> )
}

你可能会觉得如果在那个 input 里面输入字符会改变它的值。然而事实并非如此。React.js 只允许数据单向流动，视图是不能直接更新组件的状态的。那么，我们要怎样才能改变那个 input 的值呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

getInitialState: function() {
  return {
    value: "Hello"
  }
},
handleChange: function(event) {
  this.setState({
    value: event.target.value
  });
},
render: function() {
  return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> )
}

现在组件里设置了一个初始状态 value, 初始值为字符串 Hello。当这个状态改变时，input 的值也跟着改变。

到此为止，这个能用的 input 还只实现了一半。

接下来的函数 handleChange 绑定到 input 的 onChange 事件上。handleChange 使用 input 中输入的值来更新组件的状态。状态更新后的组件使用新的值重新渲染。

这种实现方式看起来好像有点奇葩有点随意，但是对简单的 UI 编程来说还算可用。

Flexbox简介

• Flex 容器 - 通常为div
  display: [--webkit--]flex
  自动添加前缀Autoprefixer: https://github.com/postcss/autoprefixer
  “Can I use” 列出了实时更新的浏览器支持的CSS特性: http://caniuse.com/#info_about
  Flex容器 不是block-level元素.
• Flex 子项(Flex items) - flex 容器的所有 直接 子元素
  Flex 子项 margins 不塌陷(don’t collapse)

Flex容器的属性

display: flex; - 成为容器

让元素成为Flex容器

flex-flow - 排列方式

Flex子项的排列方式(行列，起始端，是否断行/列)

1
2
3
4

.flex-container {
  flex-flow: { row | row-reverse | column | column-reverse } { wrap | nowrap | wrap-reverse };
  flex-flow: row wrap;` = `flex-direction: row; flex-wrap: wrap;
}

• row - Default, side by side
• row-reverse - side by side but reverse
• column - top to bottom
• column - reversely top to bottom
• nowrap - Default, keep all items in the single row or column
• wrap - let items that don’t fit inside the container’s width drop down to new (or over to a new column).
• wrap-reverse - like wrap, and reverse

justify-content - 子项在行中的对齐方式

只当子项都设置了宽度并且子项的总宽度小于容器时才起作用.

• flex-start - 左对齐; if row-reverse 右对齐?
• flex-end - 右对齐, if row-reverse 左对齐.
• center - 居中对齐
• space-between - 两端对齐, 将空白平均填充在items两两之间(between)
• space-around - 类似space-between, 同时在所有items两端增加空白

align-items - 不同高度子项的垂直对齐方式

• flex-start - top
• flex-end - bottom
• center - center
• baseline - basline of the first element within the flex
• stretch - Default stretch to the same height

align-content - 断行(wrap)时怎样排列子项

满足两个条件时起作用: 1. flex 容器必须为 wrap 2. flex 容器高度大于行高和

• flex-start - align top for rows 以行为单位
• flex-end - align bottom for rows
• center - center for rows
• space-between - 纵向两端对齐, 将空白平均填充到row两两之间
• space-around - 同上, 但同时在top, bottom增加空白.
• `stretch`` - stretch items in same row to same height

Flex子项的属性

order - 对items排序

order 的默认值应该在 -1 and 1 之间

align-self - 覆盖容器的 align-items

flex 关键属性

flex: flex-grow flex-shrink flex-basis;
默认值: flex: 0 1 auto

使用 flex: number 时, flex-basis被设置为0%; 此时flex item宽度完全由flex-grow决定

flexbox 的解救: http://philipwalton.github.io/solved-by-flexbox/
w3 - flexbox: https://drafts.csswg.org/css-flexbox/

• flex-grow - number indicates the relative width of that flex item
• flex-shrink - number 当所有items总的width > cantainer的width时, 控制item能多少量的压缩
• flex-basis - sets a base width for a flex item (100px, 5em, or 50%)

flex-grow 像一个膨胀的力, flex-shrink像一个摩擦力, flex-basis是一个基础的状态

浏览器怎样计算flex item的宽度

1
2
3
4

/* When the container width is larger than total width of items,
the __flex-shrink__ has no effect */
let delta = cantainer_width / item_count;
item_width_n = item__flex-basis__n + (delta * item__flex-grow__n)

再看flex-shrink

这个值只是设置nowrap时才重要; 定义当items总宽度>container宽度时怎样压缩items.

Wrapping Flex Items

网格怎样工作

Grids 用一致的列宽将内容组织成row和column. Page width 分成units.
通用的units总数是12, 因为12 整除 2, 3, 4.

用网格构造HTML页面

• 容器 容器 (container) 盛装一行或多行. 用于设置Grid stystem的宽度, 通常居中.
• 行 行（row) [div] 包含一列或多列
• 列 列(column) [div] 包含内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="container">
  <!-- row #1 -->
  <div class="row">
    <!-- 3 unit width column -->
    <div class="three columns">
      <!-- logo here -->
    </div>
    <!-- 9 unit width column -->
    <div class="nine columns">
      <!-- navigation here -->
    </div>
  </div>
  <!-- row #2 -->
  <div class="row">
    <!-- 12 unit width column -->
    <div class="twelve columns">
      <!-- article text here -->
    </div>
  </div>
</div>

通用 CSS 网格系统

• Skeleton: http://getskeleton.com
• Simple Grid: http://thisisdallas.github.io/Simple-Grid/
• Pure.css[framework]: http://purecss.io/
• Foundation[framework]: http://foundation.zurb.com/
• Bootstrap[framework]: http://getbootstrap.com/

使用 Skeleton 网格系统

1. Attach the CSS files
2. Add container divs
3. Add divs for rows
4. Add columns divs
5. Add content inside the columns
6. Create your own styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<link ref="stylesheet" href="css/normalize.css"> /* step 1 */
<link ref="stylesheet" href="css/skeleton.css">  /* step 1 */
<link ref="stylesheet" href="css/custom.css">    /* step 6 */
...
<div class="container">                          /* step 2 */
  <div class="row">                              /* step 3 */
    <div class="five columns">                   /* step 4 */
      <p>Lorem ipsum ...</p>                     /* step 5 */
    </div>
    <div class="seven columns">
    </div>
  </div>
  <div class="row">
    <div class="six columns">
    </div>
    <div class="six columns">
    </div>
  </div>
</div>

设置全宽的节(section)

将 container 设置 wrapper, 为 wrapper 设置全宽背景.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="section header">
  <div class="container">
    <div class="row">
      <div class="three columns">
        <p class="logo">My Company</p>
      </div>
      <div class="nav nine columns">
        <a .. .. ></a>
        <a .. .. ></a>
        <a .. .. ></a>
      </div>
    </div>
    <div class="row action">
      <h1>We do great things</h1>
      <h2>Donec pulviner ullamcorper metus</h2>
      ....
    </div>
  </div>
</div>

1
2
3
4

.header {
  background-image: url(../imgs/header.jpg);
  background-size: cover;
}

使用 Skeleton 的移动端优先示例

1
2
3

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* Moblie first queries */
/* applies to ALL widths */
/* Larger than __mobile__ */
@media (min-width: 400px) {
}
/* Larger than __phalet__ (also point when grid becomes active) */
@media (min-width: 550px) {
}
/* Larger than __tablet__ */
@media (min-width: 750px) {
}
/* Larger than __desktop__ */
@media (min-width: 1000px) {
}
/* Larger than __desktop HD__ */
@media (min-width: 1200px) {
}

GHstars 是一个用来管理你在github上收藏的代码库项目的软件. 使用GHstars你可以将这些项目分组, 加标签. 让这些项目与什么东西相关变得一目了然. GHstars还带有一个很好的模糊搜索器, 方便你快速找到想要的项目.

键盘快捷键

keyboard shortcuts focused pannel(KSFP) 是指界面中当前高亮显示的面板, 它接收一些特定的键盘快捷键. 如果KSFP(其可以值为 侧边栏, 项目列表, Readme 预览器)和快捷键不能在下面的表格中匹配, 则该快捷键被忽略.

用户界面

主界面

GHstars 的主界面由三个面板组成, 左侧边栏, 项目列表, 和 Readme 预览器. 下图中KSFP (见 键盘快捷键) 高亮显示.

在侧边栏中编辑

侧边栏由三个部分组成, 用户头像部分, 三个列表, 以及边部的工具栏. 中间在3个列表分别是分组列表, 标签列表, 语言列表. 它们按不同的方法将所有的项目分类.

• 使用底部的工具可以对列表中的分组/标签进行添加, 删除, 改名操作.
• 双击分组/标签可以对其进改名.
• 如果Sidebar 是KSFP, 且一个分组/标签被选中. 快捷键e对其改名, x将其删除.
• 如果Sidebar 是 KSFP, 快捷键n添加一个新的分组/标签.

项目列表

如果Repolist 是KSFP, 快捷键g对当前选中的项目编辑其分组, t编辑其标签.

Readme 预览器

预览器带有一个目录表, 可以方便地对项目的Readme时行浏览. 预览器的顶部显示了项目的基本信息.
单击标题则在web 浏览器中打开该项目的主页. 在这里也可以对项目进行分组和标签的编辑. 可以unstar 项目, 复制项目的https/ssh/git url.

搜索条

GHstars 有一个浮动搜索条. 点击键盘/或?可以将其击活.

偏好设置

偏好设置面板中可以设置用于同步数据的wbddav服务参数, 包括sebdav 的服务器, 用户名, 应用密码. 比如坚果云: https://www.jianguoyun.com

GHstars is an app to manage repositories you starred on github. With GHstars you can group the starred, add tags to them, making it clear what a repository is about. The app also provide a fuzzy searcher to quickly find repositories.

Keyboard Shortcuts

The keyboard shortcuts focused pannel(KSFP) is the highlighted pannel witch will receive some special keyboard shortcuts. If the KSFP (possible value are Sidebar, Repolist, Readme Previewer) dose not match the value in the follow in table, the shortcuts will be ignored.

UI

Main Page

The main page of the app consists of three pannels, sidebar, repo list, and readme previewer. The keyboard shortcuts focused pannel(KSFP, see Keyboard Shortcuts) is highted (in the follow screenshot, repo list was the KSFP).

Edit in sidebar

Sidebar consists of three part, the top avatar, the three lists, and the bottom tool buttons. The middle lists are groups list, tags list, and languages lsit, each dividies the all starred repositories with different strategies.

• Use the bottom tool buttons to add groups/tags in the sidebar.
• Double click the group or tag name also make the group/tag editable.
• If the pannel is KSFP, and a proper group/tag is selected, keyboard shortcut e to rename the group/tag; x to delete the group/tag.
• If the pannel is KSFP, keybaord shortcut n to add a new group/tag.

Repo list

If the pannel is KSFP, keyboard shortcut ‘g’ to edit the repository’s group; ‘t’ to edit the tags.

Previewer

View the reamde with a TOC. The header show basic infomations of the repository. Click the title will open the repository github page in browser.

SearchBar

GHstars has floated search bar (such as the sublime text command bar). Hit / or ? on your keybaord to activate it.

Preferences

In Preferences pannel you can configure the webdav witch will be used to synchronize you data.

响应式 Web 设计基础 ref

三个主要idea:

• flexible grids for layout
• flexible media for images and videos
• CSS media queries to create diffrent styles for different screen widths

设置响应式的页面

<meta name="viewport" content-width="device-width">
指示浏览器设置其视口 (viewport) 宽度为设备 (device) 宽度.

媒体查询 (Media Queries) w3 ref

使用 Media Queries 的策略

• Adjust columns - 多columns desktop/lanscape tablet; 单column手机
• Flexible width - max-width: 960px for desktop; width: 100% for 手机
• Tighten up white space - 在手机上, 调整headline, graphics 和其他元素的附加的空白, 以免浪费小屏上紧张的空间量.
• Adjust font sizes - 手机上缩小字体, 节省空间.
• Changing navigation menus - Collapse the menu …
  • http://alistapart.com/article/responsive-web-design
  • http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns
  • http://bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/
• Hide content on handled devices 都是为了少空间; 缺点, 可能会遗漏重要内容.
• Use background images - 可以根据不同的screen width来加载不同大小的图片.

设置断点 (Breakpoints)

Media queries 让你设置breakpoint来调整styles.

桌面优先 vs. 移动端优先

• 桌面优先
• 移动端优先

html 中创建媒体查询

1
2
3

<link href="css/small.css" rel="stylesheet" media="(max-width: 480px)">
<link href="css/medium.css" rel="stylesheet" media="(min-width: 481px) and (max-width: 768px)">
<link href="css/large.css" rel="stylesheet" media="(min-width: 769px)">

样式表中创建媒体查询

• Use the @import directive

  1 2 3

  @import url(css/base.css); /* no media query, applies to all */ @import url(css/medium.css) (min-width:481px) and (max-width:768px); @import url(css/small.css) (max-width:480px);

• Embed the media query in the style sheet

  1 2 3 4 5 6 7 8

  @media (max-width: 480px) { body { /* style properties go here */ } .style1 { /* style properties go here */ } }

基本的样式表结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* Put your reset styles here */
/* Put styles for **DESKTOP** and basic styles for all devices here */
body {
  /* properties for body here */
}
/ *medium display only */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    /* properties that only apply to tablets */
  }
}
/* small display only */
@media (max-width: 480px) {
  body {
    /* properties that only apply to **PHONES** */
  }
}

移动端优先

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* Put your reset styles here */
/* Put styles for **MOBILE** and basic styles for all devices here */
body {
  /* properties for body here */
}
/ *medium display only */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    /* properties that only apply to tablets */
  }
}
/* large display only */
@media (min-width: 769px) {
  body {
    /* properties that only apply to **DESKTOP** */
  }
}

弹性网格

例子: two-column design

1
2
3
4
5
6
7
8

<div class="columns">
  <div class="one-third">
    ...content goes here...
  </div>
  <div class="two-thirds">
    ...content goes here...
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* CSS styles to create fluid layout */
.columns {
  width: auto; /* same as 100% */
  max-width: 1200px;
}
.columns:after { /* See "Use the Micro Clear Fix" */
  content: "";
  clear: both;
  display: table;
}
.one-third {
  float: left;
  width: 33%;
}
.two-thirds {
  float: left;
  width: 67%;
}

HTML 源码顺序很重要

Desktop => phone: Float columns side by side => top to bottom

Rest the Box Model

为国避免 Float drops,

1
2
3

* {
  box-sizing: border-box;
}

将固定宽度转为弹性网格

element width / container width = result

流式图片

尽管flexible columns会隨屏幕变窄, 但图片通常不会.

两步设置流式图片

1. 最大宽度

   1	img { max-width: 100%; }

2. 删去 <img> 标签的 height and width 属性

   1	<img src="bunny.jpg" width="320" height="200" alt="bunny">

   into:

   1	<img src="bunny.jpg" alt="bunny">

上述方法假设, 让所有images 填满列宽的.
或许, 你想让图片比列小一些:

1
2
3
4
5
6
7

<img class="imgSmal imgLeft" src"bunny.jpg" alt="bunny" >
.imgSmall {
  max-width: 40%;
}
.imgLeft {
  float: left;
}

流式图片的缺点

在小屏上仅缩小尺寸, 而不是用更小的图片代替, 不省流量.
解决方法1: responsive-images-in-practice
解决方法2: Adaptive images

视频 和 Flash

1
2
3

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

videos using iframe: Responsive-Design-Create-Fluid-YouTube-amp-Vimeo-Content
Embed Responsively service: embedresponsively