CSS

[12th 鐵人賽] 還在吵架的 subgrid, Day 29

Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統,跳出現有維度形成單一欄(或行)的區塊。 子格線系統跟父層格線系統共享格線設定。 子格線系統格線總量與他所跨維度的父層格線軌跡相同。 若子網格系統跨維度軌跡固定,則取父層格線軌跡的跨度起始值。 若子網格系統跨維度不固定,則取父層格線軌跡跨度起算為 1。 子網格系統起算的 <數字> - <位置> 是獨立在自己的網格系統內。 子網格若是被填充在父層格線系統之前,那麼子網格軌跡會使用父層格線系統的格線命名,但這些名稱必須要是子網格系統以外的名字。 子網格系統的命名若跟父層格線系統重疊,

  • Hina Chen
    Hina Chen
1 min read
CSS

[12th 鐵人賽] 所以說那個手機版, Day 27

Grid 還是 Flex 我們回歸到行動裝置本身,究竟我們在前端設計的時候,要採用 Grid 還是 Flex 來製作所謂的手機版? 我認真說,如果你是 AWD 的話,用 Flex 就綽綽有餘。 如果你是採用 RWD 的話,用 Grid 或許比較方便。 當然,這些事情沒有一定的準則,不然你看看大家 Bootstrap 還不是用得很快樂,有人在意他到底是 Grid 還是 Flex 嗎?

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] RWD 的難題 Part 3, Day 26

從手機版到桌機版 講完一些基礎的 Media Query 之後,我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況,在那個 .sidebar 屬於手機版或桌機版,所呈現的欄位問題來看。 .gird { grid-template-columns: repeat(auto-fit, [body] minmax(36rem, 1fr) [end]); } 一般來說從這裡開始沒有什麼太大的問題,唯一的狀況就在於,當你的 .sidebar 因為 @media 的設定而變成 columns 排列時,你的 .context-wrapper

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] RWD 的難題 Part 1, Day 24

尺寸 對於 RWD 的設計來說,通常最大的問題點在於,你到底要相容多少尺寸,抑或,到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去? 通常是不會。 我們在設計所謂的「手機版」跟「桌機版」的情況下,基本上會留下一些能夠相容的尺寸,例如說,從最小的 320px 一直到 414px 會是一種版本,然後到了 600px 直到 768px 會是一種版本,再往上 1024px 到 1200px 會是一種,接著 1200px

  • Hina Chen
    Hina Chen
2 min read
CSS

[12th 鐵人賽] 實際操作 Part 5, Day 23

從手機版開始 昨天提到了百分比需要留意的地方,那麼,如果我們依舊使用 ch 為單位的時候,是否需要留意這些尺寸斷點的問題? 要。 所以,我們該怎麼計算這種狀況?首先,跟一般的 RWD 狀況一樣,你必須列出一些需要留意的尺寸,接著再決定你的 Grid 單位是否要做額外的設定。如果你覺得 ch 很難掌握,我們把他換成 rem 其實也是一樣的道理。基於我們設定 :root 的 font-size 是 10px,所以我們的 rem 會比較容易換算成

  • Hina Chen
    Hina Chen
2 min read
CSS

[12th 鐵人賽] 實際操作 Part 4, Day 22

從手機版開始 還記得昨天的狀況嗎?那個 33% 為何會發生這樣的事情?這件事情在小尺寸基本上一定會發生,就端看你剩下的 1% 是不是跟 grid-gap 的寬度 _剛好一樣_,如果是的話,就不會有昨天那個情況。 差別在於那個 grid-template-column 基本上不會計算 grid-gap 的尺寸,所以當你用百分比定義的時候,他是參考整個容器的尺寸來做定義,所以,你就算設定加起來剛好,還是會因為 grid-gap 的關係然後爆掉。 當然是有解法的, grid-template-columns: repeat(auto-fit, [body] calc((100%

  • Hina Chen
    Hina Chen
3 min read
CSS

[12th 鐵人賽] 實際操作 Part 3, Day 21

從手機版開始 好的,今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器,所以這邊我們會準備一些內容,大抵上就當作一個文章內容來看看這個區塊。 首先,我們在 .context-wrapper 稍微調整了一下定義, .context-wrapper { display: grid; grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]); grid-gap: 1rem; grid-column: 1 / 3; } 好的,這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容,這時候針對內文的文字也約略調整一下。

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] 實際操作 Part 2, Day 20

從手機版開始 在我們開始講內文之前,我們先來看看天地之間的事情。在昨天的例子中,你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並不是說一定得用 Flex 如果用 Grid 就罪該萬死,回顧我一開始提到的, Grid for layout, flex for components. 再回到 .header 來看,他對我們來說,用上 Grid 其實太過於複雜,我們所想像中的天的設計,最單純的就是 Logo 搭配選單,

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] 模糊地帶, Day 18

總結一下 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼樣的場景實際上會需要 @media 呢?大前提就在於,當你需要 變更設計 的時候,你就得明確的使用 @media 來規範你所想要的尺寸,用以達到不同尺寸下,畫面設計上的差異。 當然,@media 不僅是只能做 尺寸 上面的事情,由於這個講起來很佔篇幅,雖然目前還不確定是否可以完賽,但,拿這些來搪塞感覺就不是很好。總之,

  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] 這不是 font-size, Day 17

關於文字流 前幾天都提到了關於尺寸的事情,主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷,所謂的「內容為王」這件事情上面。 無論你是使用 RWD, AWD 還是 WD-40,其實免不了的都得考量到文字區塊這件事情。而我們比較常見的操作方式,大抵上都是在每一個斷點(@media)來設計相關元件的文字顯示方式。舉凡, 修改文字大小以符合區塊。 將文字隱藏或是截斷。 變更容器流向設計,用以符合文字展示。 直接輸出 JPG,因為我沒有那個字體。

  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] Grid 格線系統 Part 4, Day 14

對齊與補白 基本上在格線系統當中,對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了(欸不是)。對齊系列基本上可用的有, 屬性 預設 使用姿勢 justify-items, align-items noemal 容器區塊內的對齊、填滿相關設定。 place-items - 上述兩個屬性的集合寫法 align-items / justify-items justify-content, align-content normal 容器內兩個軸向對齊、填滿相關設定。 place-content - 上述兩個屬性的集合寫法 align-content / justify-content align-self, justify-self

  • Hina Chen
    Hina Chen
6 min read
Grid Layout

[12th 鐵人賽] Grid 格線系統 Part 3, Day 13

間隔、間隔、間隔 先不囉唆,上圖。 中間看起來比較密集的部分,就是所謂的 間隔,在樣式表當中就是這樣設定, .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1rem; } 這邊能夠接受的數值除了 fr 不能用以外,其他數字你要怎麼寫都可以。你也可以把間隔設定的比元件尺寸還要大,但是應該不會有人做這種事情吧。那麼,這個間隔有什麼毛病呢?請你回去看看剛剛那張圖。 看到那個精美的內容衝到間隔裡面了嗎? 是的,

  • Hina Chen
    Hina Chen
8 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 4, Day 10

各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上,最後來一點大補貼。 justify-content 水平方向的對齊控制。 align-items 垂直方向的對齊控制,需要有 height 設定才看得出效果。 getBoundingClientRect() 拿到子元件的 所有座標點都不是你想的那個樣子。 元件的 margin 會算入自身尺寸, 不會出現 像是一般區塊元件 margin 會互相交疊的情況。 無論哪個方向所產生的間距(gap)都是瀏覽器運算結果,無法人為控制。 子元件若為區塊元件(Block Box),當中若有大於子元件的內容,會干擾子元件尺寸。 子元件若為 Flex 元件(

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 2, Day 8

流 當我們定義好一個 flex 的容器時,昨天有說過了,預設會使用 row 這個設定來定義容器的流向。所以,在容器定義好的當下,我們把基本的容器設定展開來看,另外,我們賦予他 wrap 的設定,避免當中的元件被切掉, .flexbox { display: flex; flex-direction: row; flex-wrap: wrap; /* 以上等同於 */ /* flex-flow: row wrap; */ width: 100%; } 關於容器內容的流向、邊界、對齊等等,我們可以簡單的說明如下,

  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] 從內容開始看格線系統 Day 5

內容為王 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些事情,在整個版面上才會這麼重要。至於你說那些內容農場,基本上都屬於廣告為王的範疇,我就不討論了。如果對於文件設計很有經驗的人,基本上可以跳過這一天沒有關係。 那麼,由於設計我不會,那這邊還是有幾件事情可以跟各位前端工程師分享。主要的前置作業,我們還是會回到前幾天所說的,與 viewport, @media 跟基本格線系統有關。 viewport 能不能改? @media 怎麼設計? 那個 rem 單位設計。

  • Hina Chen
    Hina Chen
10 min read
2020

[12th 鐵人賽] 我是誰,我在哪裡 Day 3

回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HTML5,約莫也有 6 年的發展痕跡。 胡說!網頁明明就是 FrontPage 製作的。 工具的大鳴大放大概真的是從 FrontPage 開始,然後 Dreamwaver,然後 Photoshop 也可以匯出,到現在 Sketch 的外掛工具也能幫你做好這些事情。不過,

  • Hina Chen
    Hina Chen
10 min read
ITHome

[12th 鐵人賽] 那個網頁設計 Day 2

網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫幅、下方廣告橫幅、蓋版廣告、文章內容背景捲動廣告、看影片先看 10 秒廣告、Download 本身是廣告(下載按鈕在下面用小字)、點站外連結先幫你檢查(看)是(一)否(下)是(聯)惡(播)意(網)連(

  • Hina Chen
    Hina Chen
6 min read
ITHome

[12th 鐵人賽] 我說那個手機版 Day 1

說在最前面 網頁這種萬年老埂應該是沒什麼人會看,會想要撰寫這種偏冷門的東西,純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門,真的會想手動自己來的應該屬於抖 M 屬性(吧)。總之,如果對於網頁製作有興趣,或者是想看看到底在做些什麼東西的人,可以繼續看下去。 至於是不是要看滿 30 天,如果我寫得完的話應該可以考慮按一下追蹤之類的。 大概會說些什麼 網頁「設計」在「設計」什麼? 給「人類」看的,給「機器」看的有什麼差別? 區塊、內文、文件流要流去哪裡?

  • Hina Chen
    Hina Chen
2 min read