Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ironman - 2018

FB event: https://www.facebook.com/events/1890105347923108/
GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2016-12-25


https://ithelp.ithome.com.tw/upload/images/20171220/20107823SB532xlqCc.png

第一次聚會是在外頭的咖啡廳
還是 WIFI 狀況挺慘烈的一家咖啡廳
所以特別考驗與會者的離線開發能力 XDDD
不過第一次來的人大多是老手,現場倒是還滿和平的

這週的主題是 Pokemon Go App 的各種 UI,任君挑選、自由挑戰

我自己挑了 pokedex 列表頁
成品如下

Pokédex in CSS grid
http://codepen.io/Rplus/pen/MbddMe?editors=1100

因為之前有針對細節寫過一篇文章了,所以這邊不會描述太多,
對實作細節有興趣的可以移步:

[POST] Introduction for 《Pokédex in CSS grid》
Rplus/rplus.github.io#38

但這邊可以稍微提一下還比較有印象的點:

1] 練習使用 CSS Grid

去年這個時間段,大概挺常看到 Rachel Andrew 到處火力展示 CSS Grid 的妙用。
但是一直都處於只看 MDN 跟文章的階段,沒太多練習機會,趁活動強迫自己練習看看~

在這類格狀排版上,CSS Grid 真的是方便許多許多
可以在成品中看到 mixmaxauto-fill 的搭配就直接把整個排版打完收工了
Grid 新屬性的各種搭配下,可以玩出很多奇妙的效果~

2] 嘗試使用 CSS variables

這邊的 CSS variables 主要是用在 CSS image sprite 的定位,
雖然現在看起來會覺得這定位方式還挺有改進方式的
( 包含 百分比的精度 & CSS Variables 的使用方式 )
不過作為試驗作品,也還算是不錯的挑戰項目啦~ XDD

而 sprite 的百分比定位,倒是在這次才曉得有這樣的公式
100% * $index / #{$grid-count - 1}, source
以前都是慢慢算吶~ 果然是遇到才會去學些奇奇怪怪的東西 XDD
這過程跟以前書本上教的科學方法有點類似
只不過這邊是比較簡略的步驟:提問、搜尋、實驗、學習、紀錄

3] 認識 CSS counter

這玩意其實並不常用
但有些時候,它就特別好用。
只不過你覺得它特別好用時,往往也就不是該用它的時候… ( 我並沒有特別喜歡繞口令,真的…

這邊我是拿來計數,很好玩、很好用,
但 counter 原本就不是拿來計數用的 XD
這邊比較建議的作法是用 JS 處理,因為它應該要是實際的數值,而不是顯示用的指示,雖然會有相同的視覺效果

在寫那篇筆記時,我認為 counter 很吃 DOM 順序,
雖然有部份對,但更精確的說法應該是:你要清楚地瞭解該在哪邊運算以及重置 所以之後有針對這點做了些更新

4] 奇怪的技能

在解決問題的過程中,人往往會需要學些奇奇怪怪、非預期的技能
這次活動裡我就為了合成那張大的 sprite image 而去練習了一些 ImageMagick 的指令
雖然指令要下哪些我現在也忘光了
但對於 ImageMagick 在合圖時可以做到哪些控制條件,我還是有些印象~
相信這樣的印象可以在下次遇到問題時,更快速地搜尋到想要的效果
( 好吧,我承認忘了做筆記…


從上面幾點不難看出來
不是練習就是嚐試,還有試誤,總之就是亂踹~
折騰一段日子後總是能理解,新的技術需要新的習作
而在實例中練習未熟悉的知識,也是我喜歡 Happy CSSer 很大的原因,
這是個很吸引人的實驗(修羅)場~ <3

而活動討論的方式其實也與本文相似,
大致都是較籠統地提及而已,
討論過程中,大家多以「這個你應該懂」的想法進行,
所以有時會有種「這個簡單我也會」的誤區 XDD
想要避免這類情況發生就是一旦覺得怪怪的就該停下來好好想想、趕快提問


第一週就先這樣囉~
本來是還想介紹一下別人寫什麼,
但活動一開始的運作模式還沒有很明確
現在我直接看 source code 也想不太起大家寫了什麼東西 XDDD

只大約記得 rulin 的 CSS grid 比我熟很多 XDD
Neko 細節很講究、也作得飛快,還有空做互動
yutin 直接用 React 做 UI 邏輯 XDDDD

啊拉拉拉拉~ 人老了忘光啦~
明天見

FB event: https://www.facebook.com/events/173472326462938/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-01-07

https://ithelp.ithome.com.tw/upload/images/20171221/20107823gmcsDhfv9s.png

第二次聚會也還是在咖啡廳裡~
只不過不太適合打電腦的店 嘖嘖

這次的主題依舊是 Pokemon Go UI 擇一
因為其實認真看的話,還不少頁,
而且更重要的是,RWD 做得真的不是很好 XDDDD
( 但 app 固定螢幕方向後可以無視 RWD 就是 )


1 ]

我當時選的是 Dialog system
因為滿多資訊都是透過隊長的 dialog 做呈現,
所以就想說來自己來刻一個試試
成品如下 (我不是藍隊的!)

[Pokemon Go UI] Dialog
https://codepen.io/Rplus/pen/wgapbw

這個 Dialog UI 比較有趣的點是:
敘述者人相的定位,需要在不同視窗尺寸下維持位置。

一開始真的是想不到會卡在這邊 XD
原本以為是隨便定個百分比就可以放水流的事情,
結果在不希望塞一堆無意義的 media-query 的情況下,
使用了比較新的 background-position four-value syntax
可以設定背景圖偏移量的相對邊界是哪個方向 (預設是 & )
例:

background-position: left 10px top 80px;
// 等同於以前直接設 10px 80px
background-position:      10px     80px;

細節可以去看 MDN: CSS > background-position
支援度看起來是還不錯啦,連 IE9 都看得懂真的超乎我的意料之外 XDDD

定位那邊也有搭配 viewpoint unit 跟奇妙的數學算式兜在一起
最後總算是能在不同尺寸下都能妥妥地塞好塞滿

相對地,Dialog 框框跟圖示的定位就比較基礎

圖示的尺寸因為限定為圓形,所以有用 object-fit 固定一下比例
這邊也有用 :not(:empty) 直接控制不同狀態的樣式,
讓樣式直接相依於內容而不是外部給定的狀態 class
可以試試不要放圖示~

Dialog 框框主體的陰影當時是使用 box-shadow 來處理,
現在看來,或許全都一起用 filter: drop-shadow() 來讓小三角也能有一致陰影似乎也不錯


這期回顧了一下,還記得一些別人做的 XD

2 ]

Pokemon Go achievement UI
by Neko
https://codepen.io/touneko/pen/egpWre

Neko 做的這個獎牌頁真的是瘋強!

分享時,看到那個六角螺絲帽竟然是用 CSS 直接刻的 XDD
真的是驚呆了!真的是超有心又超猛的!哈哈哈

他這邊是用 clip-path 直接切出六角形,算是直球對決

獎牌是個會重覆使用的 UI,
若有要 refactor 的話,可以試試引入 CSS Variables 來控制元件尺寸


3 ]

Rulin 的長脖子椰蛋樹 https://codepen.io/rulinshyu/pen/RKPxGM

  • 隊徽分層來套用透明度算滿好用的技巧
  • UI 高度計算有點失誤、椰子樹盡量可以垂直置中
  • footer 的 button 理論上應該是要直接用絕對定位

4 ]

Ted 刻了兩個 UI,一個是物品列表、一個是日誌列表

物品列表是直接使用 pure.css 的 grid system
日誌列表則是用 CSS table layout,但左右欄沒有設定 spacing,容易造成子元件不對齊的狀況~

另外就是 Mac 開發者有時要留意一下 scrollbar 是否出現唷 XDD


第二次小聚就這樣啦~ 明兒見~

FB event: https://www.facebook.com/events/1911828859048006/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-01-22 https://ithelp.ithome.com.tw/upload/images/20171222/20107823rOJ21kejRe.png

第一次在摩茲工寮辦活動~
場地真的棒!

這次活動還是繼續刻 Pokemon Go 的 UI
(到底是多喜歡 Pokemon GO XDDD)
嘛… 應該不久後就會膩到換主題了…

這次挑了個雷達的功能

[Pokemon Go UI] Poke Radar: NearBy & Sightings
https://codepen.io/Rplus/pen/wgdrjz

記得原本 N 社只有做 sightings 的功能,而且因為很難找到目標,部份玩家會用台語稱呼為 塞ting
後來新加的這個 nearby 功能總算是讓一些幾何數學不好的朋友能輕鬆愉快找到目標~

會挑這個來做一是因為看起來比較簡單 XD
再來就是這塊 UI 滿獨立的,跟其它 UI 比較不會有相依問題
但僅管如此,它在橫向螢幕的表現實在是不太好,所以想來挑戰看看如何改善呈現效果

因為會有兩種雷達:Nearby & Sightings
所以用 title + list 的方式來呈現 現在回頭看那用 content 輸出 title 文字的方式實在是脫褲子放屁 XDD

而 list 是用 CSS Grid 排版 ( 這真的是排版救星~
因為數量有時不一定會全滿,
所以 grid-template 就只設定橫向 column 而已
設定好 grid-gap 間距後,一顆顆就自己按順序排好囉!

每個 item 分三部份: 背景圖、PM 圖、環(鎖定時有動畫)

item 的長寬相等是利用背景圖層 padding-bottom: 100% 做的,而其它的則是絕對定位。
背景圖這邊是統一用漸層色暫替,但其實要塞真的背景圖也只需要將圖片網址以 CSS variables 引入即可快速地完成~

PM 圖是用 pseudo-element 做的,設計上是直接用 CSS variables 吃 PM 圖片網址,只是這邊沒有做完所有的細節設定,包括背景圖尺寸、位置等等的調整。不過基本架構建好後,後續就比較容易對應處理了

環則是自己用了一個 DOM,分成三層:因為它需要三個圈,所以就一圈一層~
DOM 本體是基準的圈;那兩個 pseudo-element 則是動畫效果時才會出現的圈圈,它們兩會套用同一個放大的動畫,但會有不同的 animation-delay 來產生時間差的視覺效果

最後講的則是最麻煩的外框尺寸的控制
因為尺寸條件頗多,所以後來只針對 orientation 來判斷
細節就沒有處理太多。
所以在接近正方形的視窗下,就會有些東西被遮住,這是還可以改善的地方,或許一起改用 vmin 來處理元件尺寸會有不錯的效果

另外在圈圈的設定,也可以改用 emvmin 來設定,
避免圈圈與圖片的位置會因為視窗尺寸不同而有太大的變化~

這期基本上是做了個雛型而已,但有時雛型也滿適合拿來討論改進方向的~ :P

偷偷廣告一下,
這週日有 Happy CSSer 的活動唷!
有興趣的可以來玩~
https://www.facebook.com/events/401531540268114/

( 週六有空就去遊行吧 XDDD )

FB event: https://www.facebook.com/events/251162775324152/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-02-12

https://ithelp.ithome.com.tw/upload/images/20171224/20107823OLu5iQtAwX.jpg


第四週終於不用繼續畫 pokemon go 的 UI 了! XDDD
挑了個電影簡介的 APP UI 來實作

參考的 dribbble 已經撤掉了,
基本上是給了兩個狀態:簡介頁、細節內容頁。
因為不是 GIF 的動態 demo,所以我們需要自己腦補兩個狀態的過場動畫類型。
可以看到這次資料夾下會有各種不一樣的過場動畫 XDD
( 這次來了好多人!

這是我的

Movie Card
https://codepen.io/Rplus/pen/xgmOGL

基本上寫得挺糟的 XDD
結構分得不清楚、動畫效果也不好看

如果再做一次,應該會以頁面間的過場來思考
而不是強硬地把元件做對應,這在不同頁面的元件間會挺無意義的

記得當時大家討論得挺熱烈的是電影資訊頁中
左右兩欄的資料該怎麼設計
因為有時左欄會較寬、有時是右欄
後來是看到不少人都用了 flexbox 的特性來排版~

至於用 label + input 來控制兩頁狀態
活動裡可以這樣用,但若是產品要用,還是會比較建議用不同的 url 來處理


一些別人的

  • Neko 的
    這個就做得很完整了~
    主要是用 js 來控制兩狀態的 fade-in / fade-out

  • Gore 的 也很完整~
    也是用 input 做狀態管理

  • Elaine 的 ,套用 bunce animation 很 Q 彈


啊吶~
這種需要還原度很高的,通常會很花時間在微調細節樣式上
相對於這類的苦工活,在活動裡我還是比較喜歡 prototype,
更多地去思考實作架構的調整方式~ :P
( 好吧,我比較懶… )

FB event: https://www.facebook.com/events/403776003304356/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/blob/master/2017-02-25/

https://ithelp.ithome.com.tw/upload/images/20171224/20107823k68uGexmz5.png


這期一樣是大家提前投票選出意願最高的 UI 設計
這樣做是讓與會者可以決定要做哪個 UI,避免太難做不出來
( 當然往後也是有出現過「看起來很簡單、做起來無敵煩」的狀況 XDD 也希望大家可以在家先思考一下大致的實作方向,
當天會比較容易有頭緒

這期的題目是 Music Player 的 UI
而且跟上次一樣,只是靜態圖,所以動畫或過場效果都是要自己腦補的 XDD

Daily UI Challenge #09 - Music Player
https://dribbble.com/shots/3305368-Daily-UI-Challenge-09-Music-Player

我記得我這次沒有放到 codepen 上,主要原因是因為 position: sticky 沒實驗成功,所以不爽放到 codepen 上 XDDD

不過 Gore 的後來回家有成功完成 sticky 功能!
https://codepen.io/GoreWang/pen/jBEoKd
捲動列表時,你可以看到左欄分類用的英文字母會"黏"在頂部 ( 體驗超讚!
他還有弄波浪的動畫~ 棒棒噠~
( 他的波浪動畫分多層一點應該會好看些~


Neko 的成品

兩個都有實作完波浪
不過 Neko 的波浪不是用 SVG 直接硬上,
而是用兩組 radial-gradient 組合出來的波形
雖說這樣的波形左右對稱而顯得較呆板
不過依然是非常有趣的實做方式

兩位的波浪都使用 mix-blend-mode 來讓顏色變化更加漂亮
而因為波浪有時會蓋住可捲動的底部區塊
所以都有加了 pointer-events: none; 避免波浪擋到捲軸

而我自己因為覺得波浪有點難實作
就直接用 clip-path 切了個大概的形狀就放水流了 XDDDD
要做音樂波浪示意還是用 canvas 處理可能會漂亮 & 方便些 :P

對於分類標籤的作法,大家用的方法也都不太一樣
我是讓每個 list item 都有個分類屬性
而顯不顯示則看它是不是第一個 item
(不曉得是不是這樣的設計才使用 sticky 無法作用)

而 Neko 是將分類設在 <ul> 上,再用偽元素定位

Gore 的方式跟 Neko 較為類似,不過定位就不太一樣了,他這邊是正常文字流的定位,而非跳脫型的
但他的 DOM 亂寫,ul 下面塞 div 是什麼鬼 XDD


這次的題目大家有志一同都花了不少時間在找 player icons XDDD

  • 有人直接用 font-awason icon
  • 有人去抓 SVG 直接塞成背景圖
  • 也有人抓了 SVG 做成 SVG sprit

只能說,圖示系統的應用方式還真的挺多樣的~


因為個人挺愛弄 input 的
所以 search 那邊有用 label 實作了一個 input:focus 的效果
當點擊 search icon 觸發 input:focus 時,搜尋的輸入框才會跑出來~ :P
https://github.com/Happy-CSSer/Happy-CSSer/blob/04d1614/2017-02-25/rplus/app/style.scss#L63-L66


至於最底邊的按鈕們,大家都是用 flexbox 實作
但因為預期的排列方式各不相同,所以實作上也有些小差異
有的將中央的 icon 另外組成一個群組來處理,有的直接是扁平化的排列
群組起來的比較無腦、扁平的則是 DOM 看起來比較順眼 XDDD
就看比較在意哪邊

FB event: https://www.facebook.com/events/1313247108762291 GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-03-11

嗯…
你沒看錯,這週的 repo 資料夾是空的 XDDD
沒記錯的話,來的人很少,所以就臨時改成自習課了 XDDDDDDD

偶而也要休息一下嘛~

這週活動主要是讓各自去看 CSS grid

看的是這份:
Grid by Example
https://gridbyexample.com/examples/

不過後來邊看邊聊天,
後來不知怎的,
就通通圍在一起,變成導讀 MDN CSS Grid 篇章了 XDDD

順著 grid property 一個個看下來
順便講講有哪些有趣的玩法
之後大家就快快樂樂地回家了 XDDDDD



這週內容寫這麼短,連我自己都看不過去了…
來聊聊活動裡大家比較常用哪種開發方式好了~

1] CodePen

線上前端開發平台,很好用!
支援的語法豐富,而且展示非常便利
基本上大家都會把寫好的成品丟上去,不管之前是用什麼奇怪的開發方式
也是方便後半段分享時,其他人可以直接看 code 更快理解在講什麼,或是提出疑文

缺點就是改一次要等 server response
有時網路環境不太好就常會卡卡的 XDD

2] Web Maker

簡單一句就是離線版的 CodePen!!!

這是款 Chrome 的 extension
因為是離線版的,所以 live reload 就一定是必帶啦~

跟 CodePen 比起來比較不同的是有些快速鍵沒有支援 Sublime 的快速鍵
再來就是沒存檔重整就是 GG 哈哈哈

非常推薦懶人使用!

3] Prepros

拖拉式的開發環境整合軟體,有跨平台,非常好用 <3
好處是可以使用自己慣用的編輯器、還有處理哩哩叩叩的小事情
推推

4] 土炮派

有人就是自幹慣了,或是專案要 bundle 成自己的形狀的,就自己弄環境,webpack 或 gulp 的都可以~

Happy CSSer 是個出門一起寫 CSS 的小活動。
我們會在 FB 上糾團、在 GitHub 上遞交自己的作品、並在活動中分享及討論各自的理解與技巧。

而這一時興起的 Happy CSSer 小活動不知不覺也快一年了~ <3
算一算也有二十來場,我將試著回顧這一年來題目中有趣的內容。
感謝不少同好一起出門來跟 CSS 玩耍,學了很多、也多認識了不少有趣的朋友們!
希望會有更多的人快樂地寫著 CSS、也寫著快樂的 CSS~

Here is Happy CSSer.
https://www.facebook.com/HappyCSSer/

@Rplus
Copy link
Author

Rplus commented Dec 18, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment