iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

CSS 實戰心法 系列

參賽天數 30 天共 30 篇文章 | 75 人訂閱 訂閱系列文
DAY 11

Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要?又有哪些是不必要的? 以往都是使用 Sass 的 Compass 來...

DAY 12

Gulp - 定義預設開發環境

今天的進度來做個小調整,讓大家在使用 Gulp 時就能相容於目前的環境,目前使用的主要套件有:gulp-sass、gulp-postcss,這次調整後會有一個主...

DAY 13

Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon,現在的 icon 都傾向使用 web fonts 來處理,因為 web font 所製作的 icon 有以下的好處: 載入...

DAY 14

Gulp - Webserver

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

DAY 15

為什麼 Boostrap (這篇很短~)

Bootstrap 是目前主流的 CSS 框架,先前也有提到,在起初我是很不喜歡 Bootstrap 的框架,認為他搶走我大部分的工作且缺乏特色,但在研究後會發...

DAY 16

將 Bootstrap 導入自動化流程

先前的流程我們將 Gulp 的基礎流程已經建立起來了,現在我們要將 Bootstrap 導入自動化流程,讓接下來的客製化更為容易。 Bower 本範例是使用大...

DAY 17

Bootstrap 自定義樣式超簡單

在導入框架至網站時,還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的,但實際上他所設計的彈性非常之高,也很適合...

DAY 18

Bootstrap 元件分類概觀 (content, container)

接下來我們依循著 OOCSS 與 Bootstrap 的設計模式繼續擴資、修改元件,不過在繼續下一個階段以前,我們先來了解一下 Bootstrap 的設計模式。...

DAY 19

Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例,就算是如此,還是會有許多朋友希望有快速入門的介紹,本篇就來介紹絕大部分 Bootstrap 元件的組合手法,...

DAY 20

Sass 資料夾結構

對於 Bootstrap 有一定了解後,我們即將要開始新增元件,不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SM...