Ruby Compass and Sass Auto Testing Environment

Compass Home   Compass Documentation

Compass 是一套 CSS Authoring Framework,也是基於 Sass 語法的一套 Framework,先前寫了 GulpCompass Plugin,在針對自動化測試時候出現版本相依性不同,造成無法自動測試成功。自動化測試目前跟 Github 最常搭配的就是 Travis CI 或者是 Codeship,當然如果非 Open source 專案可能就要自己架設 CI 伺服器,個人推薦就是 Jenkins。這次遇到的問題其實跟 Ruby Gem 版本相依性有關,由於要測試 Compass 所有 Command 語法,所以使用了 Susy + sass + compass,如果在 .travis.yml 內直接寫

Continue reading “Ruby Compass and Sass Auto Testing Environment”

前端工程師必看: 十大 CSS 技巧

css3

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧,此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer,裡面作者紀錄了十大 CSS 技巧,看完這十大後,發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文,這些技巧都算是蠻基本的,對於前端工程師有很大的幫助,如果尚未瞭解或還沒開始使用的開發者,也可以建議團隊開始使用。底下內容來自於原網站,在加上筆者的一些補充。

Continue reading “前端工程師必看: 十大 CSS 技巧”

The streaming build system Gulp

gulp

看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system,由於 Yeoman framework 跟 GruntJS 是很緊密結合的,但是 GruntJS 套件愈來愈多,漸漸的執行 GruntJS 後,開始吃了系統 CPU 及記憶體,這對於開發環境而言,會是一大負擔阿,大家不知道有無發現,跑 Nodejs GruntJS 時,每當存檔的時候,CPU 就開始哀嚎了,我自己是有這方面的體會,加上團隊內並不是每位同仁的電腦都是很 powerful,原本是好意讓團隊開發更遵守 coding style 及統一開發環境,但是 Grunt 的肥大,讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。 Continue reading “The streaming build system Gulp”

CSS layout 好幫手 Compass scss version of normalize.css

我相信網頁程式設計師都知道,網站一開始必須先使用 CSS Rest 將所有的 browser layout 初始化,這樣可以讓以後 CSS debug 速度增加,也解決了很多跨瀏覽器的問題,昨天使用 Compass-h5bp 來自動產生 html5 template,但是發現版本並非是 html5 boilerplate 所提供的 V4.0.0 版本,專案裡面的 Normalize.css 也是舊版的,雖然有其他開發者提交 pull request,但是作者似乎還沒 merge 到主分支,只是我好奇這個 tool 除了幫忙產生 html5 boilerplate,另外多了 Compass 檔案,讓寫 Compass 前端工程師更加方便,由於 Normalize.css 還沒更新,所以我 fork 了 normalize.css 專案,並且將 v2.0.1(IE 8+, Firefox 4+, Safari 5+, Opera, Chrome) 跟 v1.0.1 (Includes legacy browser support) 整合在同一支 scss 檔案,歡迎大家取用。 如果要支援 IE6/7 的話,請將 $legacy_browser_support 設定為 true 即可。檔案可以由底下專案取得 SCSS version of normalize.css

Sass language 和 Compass 教學投影片

Compass Home   Compass Documentation
Speakerdeck 發現一篇不錯的 SassCompass 投影片教學 Sass & Compass: The future of stylesheets now.,此教學把 Sass Language 以及 Compass 基礎撰寫方式及進階用法都介紹完畢了,非常實用,推薦給剛入門的網頁設計師,這樣一來可以減少開發時間,二來可以解決討厭的跨瀏覽器問題。

在 CentOS 上面安裝 Ruby 環境

centos
目前開發網站都傾向於用 Compass 這套 CSS Framework 來 develop,開發之前必須把環境先弄好,就是要有 Ruby 套件才可以安裝 Compass,網路上的教學幾乎都在是 Ubuntu 底下用 apt-get 方式來安裝,其實相當方便,但是 FedoraCentOS 就是要用 yum 方式來安裝,這次碰到 CentOS 竟然 yum search git 出來的結果是空的,所以決定全部都透過 tar 的方式來安裝全部套件了。由於 Fedora 幾乎都可以找到套件,但是碰到 rubygems 需要用到 ruby 1.8.7 以上版本,所以還是乖乖的用 tar 方式吧。 大家可以試試看透過底下 yum 方式安裝:
yum install -y ruby ruby-devel rubygems
雖然 Fedora 透過上面可以安裝成功,可是 ruby 跟 rubygems 的版本根本是…太舊了吧 … Continue reading “在 CentOS 上面安裝 Ruby 環境”

在 Windows 底下安裝 Compass CSS Authoring Framework

Compass Home   Compass Documentation
Compass 是一套 base on Sass Language 的一套 CSS Framework,它提供了豐富的 CSS3 原件,讓您可以加速開發 CSS,也繼承 Sass Language 的開發方式,支援 variables, mixins, selector inheritance…等,今天就來介紹如何在 Windows 底下快速安裝開發環境。如果想更瞭解 Sass 可以參考之前的文章: 加速開發 CSS 工具: Sass

安裝步驟 (Install Compass)

在安裝 Compass 之前,您必須要先安裝 Ruby 開發環境,在 Ubuntu 或 Debian 底下可以透過 apt 的方式安裝:
$ sudo apt-get install ruby1.9.1-full
如果你想裝 ruby 1.8 可以透過底下:
$ sudo apt-get install ruby-full
Continue reading “在 Windows 底下安裝 Compass CSS Authoring Framework”