整合 Hugo 與 Pico CSS
Pico CSS 為著名的 Classless CSS,特別適合 Blog、Document 之類應用,而 Hugo 也適合 Blog 與 Document,因此 Hugo 與 Pico CSS 可說是天作之合。
失くすものさえない今が強くなるチャンスよ
Pico CSS 為著名的 Classless CSS,特別適合 Blog、Document 之類應用,而 Hugo 也適合 Blog 與 Document,因此 Hugo 與 Pico CSS 可說是天作之合。
Pico CSS 為著名的 Classless CSS,有別於 Tailwind CSS 的 Utility First CSS,他為 Semantic HTML 提供了 Default Style,讓我們在開發時專心於 HTML 與 Vue。
雖然 Pico CSS 為 Classless CSS,已經為原生 HTML Element 提供 Default Style,但仍然會遇到一些設定值與需求不符,典型就是 Pico CSS 為很多 Element 都提供了預設的 Vertical Padding,此時我們可以自行修改 CSS Variable。
Grid
Layout 會將所有 Element 都在同一列均分,若我們想顯定每一列只能有固定 Element 均分,則必須使用多個 Grid
Layout。
Grid
Layout 雖然適合 RWD,但沒有左右 Margin 始終是其遺憾,只要外層再加上 Container
Layout,就能解決此問題。
Pico CSS 只提供三種 Layout:container
、container-fluid
與 grid
,其中 grid
在 RWD 最明顯。
Pico CSS 只提供三種 Layout:container
、container-fluid
與 grid
,container-fluid
與 container
為非常類似。
Pico CSS 只提供三種 Layout:container
、container-fluid
與 grid
,其中 container
為最基礎 Layout。