Foundation Builder 為 功能強(qiáng)大的 Foundation 6 前端框架提供實(shí)時(shí)可視化設(shè)計(jì)環(huán)境。連同寬度滑塊、自定義斷點(diǎn)、全局內(nèi)容更新、可自定義的預(yù)構(gòu)建組件等進(jìn)一步增強(qiáng)的功能，這將大大改進(jìn)設(shè)計(jì)工作流程，讓創(chuàng)意蓬勃發(fā)展。精通代碼的設(shè)計(jì)師和前端開發(fā)人員將受益于直觀且更快的工作流程，該工作流程允許進(jìn)行更多的實(shí)驗(yàn)和設(shè)計(jì)迭代。這導(dǎo)致更短的周轉(zhuǎn)時(shí)間和/或更真實(shí)、獨(dú)特的網(wǎng)站設(shè)計(jì)。Foundation Builder 對(duì)于那些有興趣學(xué)習(xí) CSS 和使用 Foundation 進(jìn)行設(shè)計(jì)的人來說也是一個(gè)很好的工具?？梢暬O(shè)計(jì)控件與實(shí)時(shí)預(yù)覽相結(jié)合，提供了出色的反饋機(jī)制，有助于了解添加或更改 CSS 代碼的效果。

Foundation 6的所有功能。無需編碼。前端框架提供了一個(gè)可靠的網(wǎng)格系統(tǒng)和一個(gè)經(jīng)過良好測(cè)試的預(yù)定義樣式庫(kù)。javascript模塊允許創(chuàng)建交互式網(wǎng)站組件，例如下拉菜單和響應(yīng)式導(dǎo)航模式。

自定義預(yù)建組件

從導(dǎo)航菜單、手風(fēng)琴、酷標(biāo)簽面板、模態(tài)對(duì)話框、下拉菜單等等中進(jìn)行選擇。

創(chuàng)建您自己的交互式組件

可視化組合HTML元素、(預(yù)定義和自定義)cSs。然后混合交互式腳本來創(chuàng)建屏幕外導(dǎo)航、彈性卡片、信息彈出

窗口或畫廊。真的，您可以建造的東西沒有限制!

鏈接元素或整個(gè)組件

符號(hào)表示鏈接的元素或元素組。對(duì)符號(hào)項(xiàng)的更改將全局更新該符號(hào)的所有實(shí)例。文本、圖像等內(nèi)容，甚至導(dǎo)航菜單

等組件結(jié)構(gòu),都只需要更新一次。

無限的靈活性

使用預(yù)覽功能輕松瀏覽符號(hào)，并通過單擊按鈕導(dǎo)航到特定實(shí)例。如果需要符號(hào)的變體，只需取消鏈接一個(gè)實(shí)例，它

將不再受全局更新的影響。

它是最小的和模塊化的

組合元素、創(chuàng)建樣式并添加腳本。這就像玩技術(shù)樂高(而不是得寶。)

有切換器

這真的很震撼!通過換出類別或顯示隱藏的項(xiàng)目來創(chuàng)建所有類型的交互式元素。

包括運(yùn)動(dòng)用戶界面

該庫(kù)通過使用簡(jiǎn)單的數(shù)據(jù)屬性幫助創(chuàng)建靈活的UI轉(zhuǎn)換和動(dòng)畫。

戰(zhàn)平相同。友陣。設(shè)計(jì)創(chuàng)息。

為什么這么多響應(yīng)式網(wǎng)站看起來如此相似?手動(dòng)編碼時(shí)，在移動(dòng)優(yōu)先的工作流程中重構(gòu)布局和預(yù)定義的斷點(diǎn)可能會(huì)很痛苦。Foundation Framer具有用于視覺創(chuàng)建獨(dú)特設(shè)計(jì)的所有控件，從xS到xxXL屏幕!不必?fù)?dān)心代碼可以

進(jìn)行更多實(shí)驗(yàn)并激發(fā)創(chuàng)造力。時(shí)髦的界面和直觀的風(fēng)格控制保證了世界上獨(dú)一無二的設(shè)計(jì)。

靈活性和使用真實(shí)內(nèi)容進(jìn)行設(shè)計(jì)的案例。

當(dāng)我們?cè)O(shè)計(jì)響應(yīng)式應(yīng)用程序的功能時(shí)，我們專注于與設(shè)備無關(guān)的設(shè)計(jì)的核心:具有完全適應(yīng)性布局的自定義斷點(diǎn)。

畢竟，幻想只能建立在堅(jiān)實(shí)的基礎(chǔ)上。好奇這是為什么?我們來看一個(gè)真實(shí)的設(shè)計(jì)案例。

默認(rèn)情況下,Foundation 6帶有2個(gè)斷點(diǎn)。

這些是下圖中的藍(lán)點(diǎn)?，F(xiàn)在看看布局。兩列設(shè)計(jì)在當(dāng)前寬度下看起來不錯(cuò)，但在較小的屏幕上可能更喜歡單列。但

是，使用默認(rèn)斷點(diǎn)，它需要是其中之一;對(duì)于小于640px的每個(gè)屏幕，可以是單列或兩列。

單擊添加斷點(diǎn)。

能夠輕松添加自定義斷點(diǎn)以調(diào)整布局，同時(shí)處理真實(shí)內(nèi)容，從而帶來更大的靈活性和更好的設(shè)計(jì)決策。在這種情況下，添加了一個(gè)自定義斷點(diǎn)(白點(diǎn))﹐將布局從單列更改為450像素處的兩列結(jié)構(gòu)。不同的間距通常會(huì)導(dǎo)致字體大

小發(fā)生變化;這個(gè)和其他設(shè)計(jì)更改也可以在斷點(diǎn)處應(yīng)用。

專為超大型設(shè)備而設(shè)計(jì),沒有痛苦。

在為(非常)大的屏幕設(shè)計(jì)時(shí)，可以做出類似的情況。拉起兩列并創(chuàng)建一個(gè)六列的行怎么樣?使用FoundationFramer，設(shè)計(jì)師現(xiàn)在可以用有限的努力做出決定。最終，這將在所有設(shè)備上創(chuàng)造更好的用戶體驗(yàn)。在您需要的時(shí)間和地點(diǎn)設(shè)置斷點(diǎn)。從示例中可以看出，沒有布局和內(nèi)容的定義斷點(diǎn)是沒有意義的。設(shè)計(jì)或布局更改需要基于實(shí)際內(nèi)

容以獲得最佳用戶體驗(yàn)。斷點(diǎn)管理是創(chuàng)建真正與設(shè)備無關(guān)的設(shè)計(jì)的關(guān)鍵。

使用CSS自動(dòng)設(shè)計(jì)。

只需選擇選項(xiàng)、按下按鈕和指定尺寸，即可使用cSs的全部布局功能。不僅要有想象力，還要有創(chuàng)意!

使用Р和性能

拯救移動(dòng)觀眾下載沉重、加載緩慢的圖像文件。使用Picture元素，您可以為每個(gè)查看者提供敏

至高無上的定位控制

將內(nèi)容放在您想要的位置。選擇您的顯示、絕對(duì)定位、設(shè)置為清除或浮動(dòng)，或通過使用令人難以置信的可視化

Flexbox控件來簡(jiǎn)化您的生活。

多種后臺(tái)功能

不要將自己局限于單―背景。層疊多個(gè)背景以獲得額外的維度以獲得真正身臨其境的外觀。

調(diào)色板管理

使用精確的選擇器從屏幕上的任何位置抓取顏色。通過將它們保存到您的調(diào)色板來保持它們的組織和重復(fù)使用。

美味的排版

點(diǎn)擊的控件使您可以輕而易舉地設(shè)置和設(shè)計(jì)您的消息。它也加載了可定制的谷歌字體。使用內(nèi)聯(lián)編輯器，您可以

使用自己的外觀個(gè)性化特殊文本。

輕松的布局管理

在"布局"窗格中單擊以構(gòu)建您的布局。添加、刪除和合并行和列以保存內(nèi)容。也可以調(diào)整跨度寬度、偏移量和推拉

設(shè)置!

手動(dòng)調(diào)整也是一種選擇!

oundation Framer是一個(gè)可視化應(yīng)用程序，但任何想要深入了解后端的代碼鑒賞家也可以選擇。導(dǎo)出到任何代

碼編輯器以手動(dòng)編輯清晰明了的標(biāo)記。Sweet:在自定義樣式表中鏈接，重新導(dǎo)出時(shí)將會(huì)蓋