系列文章
DAY11 - 邏輯性的歸納你的CSS/SCSS - SMACSS
一開始做專案的時候，會把所有的樣式放在同一個資料夾，變得非常可怕 久了看看自己的code真的是覺得... 怎麼可以這麼亂～～～～～(吶喊）誰是外部引用？哪些cs...
DAY12 - 邏輯性的歸納你的CSS/SCSS - Sass 7-1 Pattern
像上一篇說的，沒有架構的css散落在同一個資料夾會變得難以維護，scss也是。而因為sass/scss的特性(eg.variables、import...)讓s...
DAY13 - Postprocessor - PostCss 基本介紹
除了scss/css 之外，還有一個切版人可以知道的東西！ PostCSS~ 1-1. Preprocessor vs Postprocessor 除了Pr...
DAY14 -Postprocessor - PostCss 原理解析
1-1. PostCSS執行原理 概念1. PostCSS 只提供一個產出plugin的環境 PostCSS 本身不會對CSS檔案進行修改，只提供一個產出plu...
DAY15 - 實際切版的第一步：建立資料夾結構
不論你是用哪一種框架甚至是沒有框架進行切版，基本上一定會有 html, css (scss/sass), javascript (ts) 切版的資料夾結構主要...
DAY16 - 實際切版第二步 - scss建立 variables 檔案
在開始進入切版前可以先把變數的檔案建立起來，之後就可以在各個地方使用，這邊可以給一些我自己在 _variables.scss 裡面會放什麼內容的參考～ |- v...
DAY17 - 實際切版第三步：試著切出一個彈性高的元件吧 - OOCSS(1)
有了資料夾結構、共用變數，我們可以試著開始切元件了而且今天是中秋節過後的第二天，是一個適合開始切一些小元件的日子呢(?)怎麼樣做出一個彈性高的元件呢？我們可以將...
DAY18 - 實際切版第三步：試著切出一個彈性高的元件吧 - OOCSS(2)
以按鈕為例，我們可以先統整出按鈕的所有狀態(或是Guideline裡有統整更好)，可以依照OOCSS的概念，從結構、樣式、容器、內容等下去做區分，因為按鈕較為單...
DAY19 - 管理你的切版元件 - 製作UI統整頁(1)
WHAT - 什麼是UI統整頁 簡單來說把你的切版元件全部統整在同一頁 WHY - 為什麼需要UI統整頁？ 好處1. 更快速的知道這個網站的所有元件 不知道大...
DAY20 - 管理你的切版元件 - 製作UI統整頁(2)
製作一個UI統整頁要怎麼開始呢？其實簡單來說，就是把你所有的切版元件放在同一個頁面，那要怎麼做呢？來看一下UI統整頁的大概樣貌吧： 簡單一點，可以是這樣：把所...