Gem BootColor

xdite · 2013年05月08日 · 最后由 chairy11 回复于 2013年05月09日 · 3339 次阅读

這是我剛寫的一個 Gem

https://github.com/xdite/bootcolor

想法是來自於這個網站 Lavish

http://www.lavishbootstrap.com/

Lavish 提供的服務:只要你給一張照片,網站就會分析出這張照片的主要七種顏色,然後替換產生成 Boostrap 的七個主色。這在沒有配色靈感時,相當好用。

但我認為

  1. LESS 實在太蛋疼了。(我喜歡 SCSS 許多)
  2. 不應該產生這麼多 config,其實只要產生出關鍵顏色,透過 scss variable 就可以換掉主要的 theme 了。
  3. 不喜歡複製貼上....內建有個後台能換色不是比較快嗎?

於是我就寫了 BootColor。

歡迎試用!

共收到 12 条回复

顶! 想请问你 自己写 Gem 用感觉怎样? 我也想自己写 Gem 呢~

@ChanceDoor 我自己因為喜歡寫玩具,但是每次寫玩具都要套版,裝上自己的 best practice 覺得很煩,於是我就開發了 Bootstrapper https://github.com/xdite/bootstrappers 可以快速生專案。

但是因為有一些 best practices 是不太適合直焊在專案產生器裡面的。於是我就把這些我常用的 hack 全包成 gem 再掛進 bootstrappers....

其實沒有很喜歡寫 gem,因為寫了就有維護責任 XDDD.....

但是可以利用 opensource ,配合創意組出一堆亂七八糟的東西實在很 cool~~

#3 楼 @xdite 是啊! 而且我觉得如果用 Gem 的方式去组成自己的程序 维护起来应该也蛮方便的吧

@xdite 大神写的 gem 都是精品呀,bootstrap_helper 一直有用。请教一下要写 Gem,要有什么知识要用到的

1. 如何撰寫 / release gem

2. Rails Gem 的話要大概了解以下 topic

  • Rails Engine 結構,如何掛上 controller, model , helper , view, asset ,routing, initializer, middleware
  • Rails generator 要怎麼寫,因為掛了 thor,寫複雜的 generator 需要研究 thor 語法
  • 如果是要攔結在啟動 process 當中的(如 Rack middleware),那要先了解 Rails 的啟動順序
  • Rails 的基本結構。如何在 Rails API 中找到你要的東西

3. 維護

  • LICENSE
  • CHANGELOG
  • semver
  • README

4. Testing, how to test a gem

5. pre-release gem (遇到 Rails4 想出 beta 要怎麼作 )

我想到的大概就這些了吧....

@xdite 我抄袭了你的代码,用 Macruby 重新写了一个可以运行的应用程序。 下载链接 http://pan.baidu.com/share/link?shareid=442968&uk=1728447652

我这边创建了一个新的 rails 程序,然后挂上 bootcolor,提示错误。

/Users/chunlea/Code/tmp/bootcolor/config/application.rb:10:in `<module:Bootcolor>': uninitialized constant Bootcolor::Rails::Application (NameError)
    from /Users/chunlea/Code/tmp/bootcolor/config/application.rb:9:in `<top (required)>'
    from /Users/chunlea/.rvm/gems/ruby-2.0.0-p0/gems/railties-4.0.0.rc1/lib/rails/commands.rb:78:in `require'
    from /Users/chunlea/.rvm/gems/ruby-2.0.0-p0/gems/railties-4.0.0.rc1/lib/rails/commands.rb:78:in `block in <top (required)>'
    from /Users/chunlea/.rvm/gems/ruby-2.0.0-p0/gems/railties-4.0.0.rc1/lib/rails/commands.rb:75:in `tap'
    from /Users/chunlea/.rvm/gems/ruby-2.0.0-p0/gems/railties-4.0.0.rc1/lib/rails/commands.rb:75:in `<top (required)>'
    from bin/rails:4:in `require'
    from bin/rails:4:in `<main>'

难道是兼容问题?

目前只能跑在 Rails 3 上...

嘻嘻,我发现了,核心就 2 行代码,看,灰机

extr = Prizm::Extractor.new(@url)
@colors = extr.get_colors(7, false).sort { |a, b| b.to_hsla[2] <=> a.to_hsla[2] }.map { |p| extr.to_hex(p) }

还是蛮有意思的

其实 Lavish 这个网站的思路有问题..

这东西应该用 Less 做.. Less 天生可以在前端使用, 只需要引入 less.js 就可以了.

类似 Less 的官方网站: http://lesscss.org/ , 默认就使用了 less.js 所以要换肤就变的特别简单.

打开 chrome dev tools

less.modifyVars({'@blue': '#f00'})

不过, Less 不支持 default variable 确实挺不方便的.

Lavish 可以用 Less 做前端, 然后导出 sass/less 也是没问题的. 毕竟都只是一些变量而已.

这个功能对我很有用!

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册