Bootstrap things

[happypeter]

Bootstrap things

[happypeter]

http://www.youku.com/playlist_show/id_18207934.html
Nice bootstrap tutorial by ninghao.net

[happypeter]

within the gem bootstrap-sass, you have images/icons from http://glyphicons.com/
有方框型的评论图标可以用

[happypeter]

http://www.learnstreet.com/

[happypeter]

http://warpspire.com/posts/css-frameworks/

bootstrap 真的有必要吗？确实有时候手写更舒服。

[happypeter]

放弃 bootstrap

我被 bootstrap 咬了太多次了，现在决定要弃船了！

我现在的水平是如果你让我拿 bootstrap 去搭一个简单的网站，去适应 ipad，iphone 等各种设备，我可以很快的做出来，因为我在 bootstrap 上其实也是花了很多时间的。但是对于复杂的 web app，类似于 github 的这种，对于我来说，首先采用所有都是固定宽度，先不考虑 responsive，才是一条真正的捷径。

需要承认真正的前端高手拿 bootstrap 一样可以做出复杂的 app，例如 khanacademy，所以不能不说 bootstrap 很牛。但是，我觉得我失败的原因就是 http://warpspire.com/posts/css-frameworks/ 文章里所说的，用 css 框架导致我 "Not learning"。后续开发中，对自己代码的不熟悉，导致开发中是处处碰壁。

一个失败例子，就是如果在此时此刻，你用宽屏设备打开 hpcasts.com 的首页，会发现用 span4 包裹的 3 张图片水平放置，很美观。但是用 ipad 打开，图片的间距就没有了。这就是 span4 的 responsive 特性在捣乱。khanacademy 解决这个问题的方法是给每个 span4 设置一个 min-width。但是如果是固定宽度的，就不会有这个问题了，所有的 viewport 宽度下，每个部件看上去都是 exactly the same 的，所以为何 github 看上去要比 khanacademy 要精致一些，也是由于这个造成的。

还有一个我放弃 bootstrap 的原因就是，我们在抄 github 而 github 中的很多元素的实现是用 bootstrap 实现不了的。但是一旦我们手工实现了 github 的这些基本元素，例如 comment bubble，我们就可以全站复用，这样 bootstrap 的很多东西就没必要再用了。

所以现在的结论是放弃 BS，倒向 github 920 的固定宽度，这样一切的设计就都非常简单了。暂时不必考虑 responsive，因为目前 github 其实在 ipad 和 Mac 表现都是很好的。未来手机上如果直接用这套布局肯能不行，那时我们可以 #49 (comment)

[asmcos]

CSS 可以参考 codeschool

------------------ Original ------------------
From: "Peter Wang"[email protected];
Date: Fri, Feb 22, 2013 11:15 AM
To: "happypeter/onestep"[email protected];

Subject: Re: [onestep] Bootstrap things (#28)

放弃 bootstrap

我被 bootstrap 咬了太多次了，现在决定要弃船了！

我现在的水平是如果你让我拿 bootstrap 去搭一个简单的网站，去适应 ipad，iphone 等各种设备，我可以很快的做出来，因为我在 bootstrap 上其实也是花了很多时间的。但是对于复杂的 web app，类似于 github 的这种，对于我来说，首先采用所有都是固定宽度，先不考虑 responsive，才是一条真正的捷径。

需要承认真正的前端高手拿 bootstrap 一样可以做出复杂的 app，例如 khanacademy，所以不能不说 bootstrap 很牛。但是，我觉得我失败的原因就是 http://warpspire.com/posts/css-frameworks/ 文章里所说的，用 css 框架导致我 "Not learning"。后续开发中，对自己代码的不熟悉，导致开发中是处处碰壁。

一个失败例子，就是如果在此时此刻，你用宽屏设备打开 hpcasts.com 的首页，会发现用 span4 包裹的 3 张图片水平放置，很美观。但是用 ipad 打开，图片的间距就没有了。这就是 span4 的 responsive 特性在捣乱。khanacademy 解决这个问题的方法是给每个 span4 设置一个 min-width。但是如果是固定宽度的，就不会有这个问题了，所有的 viewport 宽度下，每个部件看上去都是 exactly the same 的，所以为何 github 看上去要比 khanacademy 要精致一些，也是由于这个造成的。

还有一个我放弃 bootstrap 的原因就是，我们在抄 github 而 github 中的很多元素的实现是用 bootstrap 实现不了的。但是一旦我们手工实现了 github 的这些基本元素，例如 comment bubble，我们就可以全站复用，这样 bootstrap 的很多东西就没必要再用了。

所以现在的结论是放弃 BS，倒向 github 920 的固定宽度，这样一切的设计就都非常简单了。暂时不必考虑 responsive，因为目前 github 其实在 ipad 和 Mac 表现都是很好的。未来手机上如果直接用这套布局肯能不行，那时我们可以 #49

           —
           Reply to this email directly or view it on GitHub.

[happypeter]

@asmcos 对，放弃 bootstrap 的另外一个原因就是它的默认 CSS 风格都是千人一面的，而要企图用覆盖的方式改成自己的风格却又比自己从头写还要麻烦。

codeschool 确实很喜欢，其实这个页面就是抄他们的 http://www.hpcasts.com/about/team

[happypeter]

放弃 bootstrap 的执行步骤

我们现在使用的 bootstrap 的部件都列在这个文件里了：https://github.com/happypeter/onestep/blob/master/app/assets/stylesheets/plugins/bootstrap.css.scss

现在当务之急是要把挡在我面前的的页面 layout 的部分去掉，也就是要删除这几行内容：

https://github.com/happypeter/onestep/blob/master/app/assets/stylesheets/plugins/bootstrap.css.scss#L9-11

这个任务由我来完成。

以后我们的任务是逐渐删除里面的各行，直至为空。

[asmcos]

我觉得不要急于删除bootstrap;
先找到几个认为不错的CSS来做几个其他（新的？）的页面，测试是否是我们需要的。
没有找到新的CSS之前，保留现在的结果。

------------------ Original ------------------
From: "Peter Wang"[email protected];
Date: Fri, Feb 22, 2013 11:35 AM
To: "happypeter/onestep"[email protected];
Cc: "asmcos"[email protected];
Subject: Re: [onestep] Bootstrap things (#28)

放弃 bootstrap 的执行步骤

我们现在使用的 bootstrap 的部件都列在这个文件里了：https://github.com/happypeter/onestep/blob/master/app/assets/stylesheets/plugins/bootstrap.css.scss

现在当务之急是要把挡在我面前的的页面 layout 的部分去掉，也就是要删除这几行内容：

https://github.com/happypeter/onestep/blob/master/app/assets/stylesheets/plugins/bootstrap.css.scss#L9-11

这个任务由我来完成。

以后我们的任务是逐渐删除里面的各行，直至为空。

           —
           Reply to this email directly or view it on GitHub.

[happypeter]

@asmcos 是的，看起来还可以的就不用动。

[happypeter]

bootstrap 的使用是和我们的 css guideline 有冲突和重叠的，所以如果未来没有 bootstrap，我们的代码会更简约。

注：我们的 css guideline，其实就是 https://github.com/styleguide/css 稍加改造。