ZURB和Foundation開發社區的夥伴們一直在加緊工作,發佈了Foundation網站版本的一次重大更新。讓我們深入其中,看看發生了什麼,並且問問項目團隊未來的發展。
有哪些更新?
Foundation 6.3版本爲整體框架帶來了一些實實在在的變化,同時保持了其一貫的好用性。
UI Cards
卡片式設計作爲網頁設計的一種模式,越來越得到廣泛的應用。它們是展示用戶精簡類信息非常好的方式,並且能夠很好的在響應式網站中工作。不僅如此,只要你使用得當,它們也是非常直觀的表現形式。
經常有人討論是否要在Foundation中放入卡片功能 - 對於一個響應式框架你是否需要這樣一個組件?抑或是你是否應該使用你自己的工具創建你自己的卡片模式?對我來說Foundation是一個快速的原型工具,卡片的加入意味着我能更加快速的進行原型開發。即使在正式製作中,這些卡片也是非常受歡迎的補充力量。
Flexbox Helpers
Flexbox非常偉大,因爲它允許我們在設計中使用更加靈活的佈局(你已經猜到了!)。Felxbox旨在提供更加有效的方式對頁面中的條目進行佈局及分配空間,即使(這也是最偉大的部分)這些條目的大小是動態的或者未知的。
Foundation 6.3 提供了我們幫助工具讓Flexbox更加容易理解並且更加容易創建原型。例如,浮動和清理被砍掉了,替代它們的就是使用Flexbox Helpers。
“Flexbox是當今網頁設計一個重要的部分,我們希望繼續保持它的領先地位。“ - Kevin, Foundation社區負責人
全新的Off-Canvas
有些人會說這個來的太遲了,但是,它最終還是來了。Off-Canvas 元素已經被從寫了並且非常棒。你甚至不需要改變任何標記,因爲它具有向後兼容的功能。
全新的Off-Canvas標記甚至更加簡單。我們現在可以使用Off-Canvas作爲遮罩以及從頂部或者底部打開,而不是隻將內容推開。即使現在用起來更加駕輕就熟,但還是請務必查看一下Foundation網站版本的Off-Canvas文檔。
從手風琴效果(Accordion)到標籤頁(Tabs):響應式魔法
曾經在大屏幕上使用的標籤頁在移動設備上是不是看上去一團糟?現在不會了!使用“響應式手風琴效果到標籤頁”功能,你可以根據你的屏幕大小進行UI界面切換,並且爲移動用戶提供更好的用戶體驗。這個功能很容易執行並且受益多多!
垂直規律(Vertical Rhythm)到跳動舞步
使用垂直規律(Vertical Rhythm)進行文字排版會極大地改善你的網站的外觀和感覺。Foundation一直讓我們很容易的操控不同大小的標題和正文文本,但是隨着Foundation 6.3的更新,字體大小,行高以及空白邊的設置都可以在一個單個設置中訪問。讓易用性最大化。
觀察,觀察.. 變動觀察器
有時候小任務可能變得乏味,但是當那些更新來的時候會使這種痛苦消失。這就是全新的變動觀察器(Mutation Observers)的工作原理,它在幕後工作,並自動檢測DOM更改並觸發組件中的更新。這可以節省你不得不做的手動重排元素來觸發更改,如顯示彈出框,頂部工具欄(sticky bars),均衡(equalizer)等。非常棒。
標籤頁(Tabs)的深層鏈接
深層鏈接在引導你的用戶到正確的位置上扮演着重要的角色,特別是在電子商務網站以及移動app中尤爲重要。使用Foundation 6.3,你可以輕鬆地將用戶引導到已放置在標籤中的特定內容,從而自己使用深層鏈接。
打印樣式
在Foundation發佈這次更新之前,你不得不爲網頁自定義設置打印樣式表。Foundation只能顯示移動屏幕,而其他的框架甚至連這個都做不到,這就意味着你必須自力更生。
那些苦逼的日子已經一去不復返了,這都要感謝Foundation 6.3的到來,因爲你現在可以指定你需要的打印頁的斷點,Foundation會自動設定其他的點。非常好。
ZURB: 採訪
我們想要一些關於框架如何達到當前地位的內部信息。我們還問了2017年我們可以期望Foundation做些什麼?這是ZURB團隊不得不說的:
2016年戰勝的最大挑戰是什麼?
應該是瀏覽器如何處理某些CSS選擇器和我們網格系統。它們現在都能很好地工作,但是對於匹配先進的瀏覽器還是花費了一些時間。
我們的CSS網格系統需要(過去和現在)變得更加功能豐富,並且成爲Foundation的核心組件。 我們需要看看它的核心價值能提供什麼,以及它如何讓任何使用我們框架的人都能受益。
你期望2017完成什麼?
我們正在進行的一項工作,也是我們將非常確認能夠在2017年完成的是爲Foundation從寫我們的JavaScript。我們將更多地利用先進工具,並使我們的用戶更容易地接入自定義組件。
還有一件事就是從寫菜單組件。它們已經非常強大,但是,一旦你將它們用在規範之外,它們還是有些脆弱。我們將努力讓它達到你可以自定義的程度,但它還是要看你的項目本身而定。
2017年主要的優先任務是什麼?
我們將着眼於框架的易用性,比如建立區塊的重複使用以及Foundation更強的擴展性,以便用戶可以添加自己的twist進來。使其更易擴展,允許更加豐富的組件以及可重複利用的區塊可以讓原型使用更加快速和乾淨。
2017年會有哪些新的事情?
我們想做更多在SVG上,畢竟它在響應式網頁設計中一直扮演着重要的角色。我們想看看我們能夠針對不同情況和屏幕大小,執行和操控SVG到什麼程度。我們將要關注的一件事是使用Foundation網站版本製作和整合SVG到你的項目中去的更簡單的方式。
你會擔心Foundation變得過於臃腫嗎?
這是我們一直關注的。一方面,更多組件可以幫助我們快速創作原型和開發。另一方面,更多的組件就意味着無用的代碼,讓很瘦的項目變的臃腫。我們正在優化如何進行整合並且讓你可以爲你的項目選擇指定的組件。我們密切關注的一件事就是保持核心程序的緊湊和堅固。
Motion UI 如何發展?
這個問題問得很好!我們真的很忙,現在也該是時候從寫讓它變的更易用了。我們還將深入瞭解如何使用你自己的動畫到Motion UI中去。
目前缺少的一件事是全面和有用的文檔。我們想這也許就是人們爲什麼沒有像我們預期中那樣使用它,雖然Motion UI本身已經是一個非常強大的庫了。我們會在我們的博客和訂閱郵件上發佈它的進展。
“Motion UI已經非常強大,但是我們需要改進文檔說明讓用戶更易使用和執行。” - afi, Foundation倡導者
Flexbox是Foundation的未來嗎?
我們熱愛Flexbox,它確實是一個大步向前邁進的靈活和動態組件。隨着我們一直向前推進Foundation網站版本,我們也將繼續朝着未來邁進,Flexbox在其中發揮了巨大的作用。我們將繼續使用flex屬性集成越來越多的組件,併爲所有組件使用flex模式。
總結
很好,你已經擁有它了,一個變的越來越好的偉大框架。隨着Foundation 6.3和Motion UI的到來,我們作爲開發者和使用者將能夠比以往更快速的開發原型和啓動項目。這是Foundation5週年最好的禮物,恭喜恭喜!
“我要給我們開發人員社區的貢獻者們一份巨大的公開致謝,你們不斷的改進着Foundation每一次更新。多謝你們!“ – Kevin, Foundation社區負責人
相關閱讀
以上譯文僅代表原作者觀點。
原文作者:Mark Teekman
原文鏈接:地址
原文譯者:Twitter / Linkedin / 微博