首頁

0

鐵人賽 17 - Bootstrap 自定義樣式超簡單

在導入框架至網站時,還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的,但實際上他所設計的彈性非常之高,也很適合做客製化,甚至 fork 作為公司團體的 Style Guide。

0

鐵人賽 15 - 為什麼 Boostrap

Bootstrap 是目前主流的 CSS 框架,先前也有提到,在起初我是很不喜歡 Bootstrap 的框架,認為他搶走我大部分的工作且缺乏特色,但在研究後會發現他並非我想的那麼缺乏特色,完全看開發者的使用及熟練度。 我們也可以看到網路上有相當多的 HTML Template 都做的非常美,但其實底層都是 Bootstrap,有些已經調整得相當不像是原有的 Bootstrap 樣式。所以在熟練的情況下,Bootstrap 也是能做出超乎水平的網頁版型。

0

鐵人賽 14 - Gulp - Webserver

Gulp 很適合搭配任何其他的前後端結構,就先前介紹的幾個章節,只要略為修改輸入及輸出的路徑即可;除了搭配其他後端結構外,Gulp 也有適合直接開發的方法,本章會在介紹 Gulp Webserver,這樣就能夠直接在 Gulp 中開啟 Webserver。

0

鐵人賽 13 - Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon,現在的 icon 都傾向使用 web fonts 來處理,因為 web font 所製作的 icon 有以下的好處: 載入容易,HTML 只要載入一隻 CSS 就搞定 套用容易,只要透過 Class 就能套用 可自由調整大小、色彩

0

鐵人賽 12 - Gulp - 定義預設開發環境

今天的進度來做個小調整,讓大家在使用 Gulp 時就能相容於目前的環境,目前使用的主要套件有:gulp-sass、gulp-postcss,這次調整後會有一個主要的前端專案資料夾,可以配合各個後端語言做調整,大家也可用相同的概念加入習慣的開發環境。

0

鐵人賽 11 - Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要?又有哪些是不必要的? 以往都是使用 Sass 的 Compass 來加入 prefix,這種增加方式就是無差別的加入,但其實現在的 CSS 有 9 成以上的 prefix 都沒有加入的必要,相信在短期內除了測試的 CSS 以外,都不需要再加入 prefix。

0

鐵人賽 10 - Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具,在先前一篇也有介紹有哪些自動化工具,這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而本次系列文都是著重在 CSS 的開發,所以不會介紹 Javascript 的自動化工具。

0

鐵人賽 9 - CSS 實戰心法 搶到決定權,開發環境自己來

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了,所以後端的環境上不用太在意,但在這幾年的體悟下,這是一個不負責任的想法。 我用過的前端自動化開發環境有: Fireapp:這用了有兩年之久,算是一個超級入門 GUI 自動化工具,但在 compass 不維護以後 Fireapp 也不再維護了。 Prepros:當時 GUI 的自動化工具另一個選擇,到現在還有持續在更新,但一直有些小問題所以沒有想用在專案上,但對於入門來說是個不錯的選擇 Middleman:為了與 Ruby on Rails 專案做整合,算是不錯的 Command line 工具,也是使用很長的一段時間,現在懶得自己開環境還是會使用。 *gulp:相當推薦的自動化工具,易學且可以與任何環境結合,缺點是肥了點。 *webpack:很潮的自動化工具,但與 gulp 觀念差異很大,適合製作 SPA(sigle page application) 的網站。