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 鐵人賽] Flexbox 的使用姿勢 Part 1, Day 7

簡單介紹 雖然說 Flexbox 已經推出好一段時間了,但說實在話我自己好像沒有特別著墨。當然,我覺得如果可以的話,去看一下 Amos 的課程,一定比看我在這邊講幹話來得實際! 首先,我們先理解一下 flex 的作法, .flexbox { display: flex; } 首先是把一個 DOM 元件定義成 flex,這樣接下來的設計才會生效。這個 flex 元件預設會使用 row 這個維度來顯示資料。換句話說,你若什麼都不寫的話,他的 flex-flow 預設就會是

  • Hina Chen
    Hina Chen
7 min read
CSS

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

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

  • 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
Media Query

[CSS] 彈性化的 Media Query

好像是該來交點作業,不然部落格都快壞掉了(甚至熊熊想不起來 Octporess 要怎麼 deploy 到 Heroku 上 原先是想說要先寫一點 Media Query Level 4 的介紹,不過因為還沒有玩膩所以就先不要寫了(欸,由於寫文章的時候剛好是自己生日,所以,就先祝自己生日快樂。 然後我們聊一下彈性的 Media Query。 前言 導讀, The EMs have it! Proportional Media Query FTW!

  • Hina Chen
    Hina Chen
10 min read
Media Query

[CSS3] 深入 @viewport 與 @media queries

說在最前面,這是要詳細交代這兩件事情的關係,不過由於目前 CSS Device Adaptation 還在草稿(W3C Working Draft)階段,所以以後或許還是會有變化。 這是很悶的詳細解釋文,所以理論上可以跳過。 @viewport and @media 還是一個重點, @media depends on @viewport size. 但是由於 @viewport 這件事情,雖然他有許多設定可以用,但是預設值是相當討厭的。以目前的規範來看, <viewport-length> = auto

  • Hina Chen
    Hina Chen
9 min read
Media Query

[CSS] 淺談 @viewport 與 @media

由於最近剛好遇到這件事情,索性整理一下。一般來說 viewport 大多數人會想到 Media Query 這件事情,但是,我覺得還是有必要澄清一下。其實 viewport 跟 Media Query 並沒有太大或是絕對的相依關係,只是由於裝置與一些規則應用上的關係,讓人覺得這兩件事情好像是可以擺在一起看的。 實際上不是。 何謂 viewport 根據 w3c 對於 CSS Device Adaptation 的解釋,他大致上是在做這些事情, 根據裝置的顯示區域來展示文件 放大或縮小文件,來符合或設定上給予裝置的可視區域 允許設定或初始化縮放的級別,

  • Hina Chen
    Hina Chen
9 min read
Media Query

[CSS] Media Query 小撇步

這是個行動裝置當道的時代,所以 @media 隨之興起!不過有時候在寫,總是會遇到一些感覺很莫名其妙的事情。 所以,這是寫給我自己的筆記這樣(揍飛 TL; DR W3C: Media Queries Media Queries 簡單的說,就是針對你的裝置,給你不同的樣式設定。支援的裝置很多,常用的大概就是 all, screen 與 print 這三種吧。 all braille handheld print projection screen tty

  • Hina Chen
    Hina Chen
4 min read