Colorgy Style

Colorgy 的樣式指南、樣式表以及前端工具包。

The front-end bundle and style guide for Colorgy. Builded on top of Bootstrap, following the architecture inspired by SMACSS and MVCSS.

Styleguide

Here - 這裡。

Usage

Sass and Sprockets

適用於任何使用 Compass/Sass/SCSS 以及 Sprockets 的專案，例如 Ruby on Rails 或 Middleman。

將以下這行加入 Gemfile 裡：

gem 'colorgy_style'

然後執行：

$ bundle

Import Stylesheets (Using Sass)

在 app/assets/stylesheets/application.scss 或其他想要的地方引入 Colorgy 樣式表：

@import "colorgy_sprockets";
@import "colorgy";

你也可以只拆出部分元件使用，或是調整一些變數，詳情請參考 Project Structure 段落。

Require JavaScripts (Using Sprockets)

在 app/assets/javascripts/application.js 或其他需要的地方導入 JavaScripts：

//= require colorgy

colorgy 是一個將所有相依套件都打包在一起的集合包，所以你將不需要另外 require 像是 jquery 或 modernizr 之類的函式庫。

你也可以選擇只導入部分的檔案或元件，詳情請參考 Project Structure 段落。

Vendor

這份懶人包同時也將一些常用的函式庫一併包含進來了，你可以查看 assets/javascripts/vendor 以及 assets/stylesheets/vendor 來找出有哪些東西可以加以利用，然後在你的 JS 或 SCSS 檔中像這樣引入它們：//= require vendor/classnames.js (JavaScript)、@import "vendor/animate"; (SCSS)。

Standalone

適用於任何專案。

直接下載打包後的 colorgy.css 與 colorgy.js 檔案，並加它們加到你的網頁中。所有倚賴的 JavaScript 也已經被打包進去了，所以你不需要再引入像是 jQuery 等函式庫。

Project Structure

TODO: Write this.

Development

After checking out the repo, run bin/setup to install dependencies. Then run bin/server to fire up the development server, or run rake rspec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

To deploy the builded style guide to GitHub Pages, simply run bundle exec rake deploy and the source will be builded and pushed to gh-pages of the origin repo.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/colorgy/Style.