卡斯伯提供的教學資源:


css

鐵人賽 8 - CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。 雖說如此,我以往可是很討厭 Bootstrap 的,身為一名設計師希望能夠有更多自己發揮的空間,所以早期一直在避免使用 Bootstrap 這樣的框架,總認為這些框架做出來的設計都很像,還因此自己寫一個 CSS 框架。 經歷過了一段自幹的歷程,從...

css

鐵人賽 7 - CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後,可以看看主流框架是不是有帶入其中之概念,接下來會介紹兩篇 PureCSS 與 Bootstrap,這兩者的簡單架構概念讓大家參考參考。 Pure CSS 算是很老牌的 CSS 框架,到目前使用者已少了許多,但架構到現在都很是非常直得學習,不需倚靠太多的工具,就能夠將 CSS...

css

鐵人賽 6 - CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分,一個是原生的 CSS 偽類(Pseudo-classes),另一則是配合 Javascript 所提供的 Class,在這部分相當在元件的初始時,就同時完成兩個部分。...

css

鐵人賽 5 - CSS 的命名技巧

程式語言的命名一直是個麻煩課題,除了要有良好邏輯外,還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯,但由於上手容易,團隊合作的命名就容易被其他小夥伴所影響。 本篇透過圖文及小故事來介紹 CSS 命名概念,讓你與小夥伴的命名協作能力更順暢。...

css

鐵人賽 4 - OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離,對於網頁的樣式設計是一種解放,所有元件的樣式組合搭配及擴增變得更自由。 這篇要介紹的是容器與內容分離,簡單來說我們可以把元件分為兩大類型: 容器型元件:如 grid、card、form 內容型元件:如 button、input、progress-bar 而不同類型的元件設計上應當...

css

鐵人賽 3 - OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話,目標即是將這兩者分離,上一篇我們用建築物的結構與外觀樣式做分離,再依不同的需求去做組合。 CSS 上也是相同的道理,比如說我們可以做這樣的分類: 結構:margin、padding、display、vertical-align 樣式: 色彩樣式:color、...

css

鐵人賽 2 - OOCSS 結構與樣式、容器與內容

以前剛進入這行,掌握了 CSS2 的大部分關鍵之後,對於製作網頁非常有成就感,因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS),而且 CSS2 語法數量也不多,查找時間也不需要太長,自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題,網站是否易於維護、C...

撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))
撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))