CoffeeCup Responsive Foundation Framer提供了坚实的网格系统和经过良好测试的预定义样式库。JavaScript模块允许创建交互式网站组件，例如下拉菜单和响应式导航模式。何想要深入后端的代码鉴赏家也可以选择。导出到任何代码编辑器以手动编辑清晰干净的标记。Sweet：在自定义样式表中链接，重新导出时不会被覆盖！为什么这么多响应式网站看起来如此相似？在移动优先的工作流程中重构布局和预定义的断点在手动编码时可能会很痛苦。Foundation Framer具有用于视觉创建独特设计的所有控件，从XS到XXXL屏幕！在为（非常）大屏幕进行设计时，可以做出类似的情况。拉起两列并创建一个六列行怎么样？使用Foundation Framer，设计师现在可以通过有限的努力做出决定。最终，这将在所有设备上创造更好的用户体验。
安装说明
1、下载并解压，双击Responsive Foundation Framer.exe运行安装，选择软件安装路径，勾选接受许可证协议，点击install
2、安装中，稍等一会儿
3、安装完成，退出向导
4、-只需安装零售安装程序进行的预安装即可。
功能特色
1、单击添加断点。
在处理实际内容时，轻松添加自定义断点以适应布局的功能可带来更大的灵活性和更好的设计决策。在这种情况下，将添加一个自定义断点（白点），以将布局从单列更改为450px的两列结构。不同的间距通常会导致字体大小的变化。此设计更改和其他设计更改也可以应用于断点。
2、专为超大型设备而设计，无痛苦。
为（非常）大屏幕设计时，可能会发生类似情况。如何拉起两列并创建六列行呢？使用Foundation Framer，这是设计师现在可以做出有限努力的决定。最终，这将在所有设备上创造更好的用户体验。
何时何地需要断点。从示例中可以看出，没有布局和内容的断点是没有意义的。设计或布局更改需要基于实际内容，以获得最佳的用户体验。断点管理是创建与设备无关的真正设计的关键。
3、战斗相同。发挥。设计创意。
为什么这么多的自适应网站看起来如此相似？在进行手动编码时，在移动优先工作流程中重组布局和预定义的断点可能会很麻烦。Foundation Framer具有从XS到XXXL屏幕的所有控件，可直观地创建独特的设计！
不必担心代码可以进行更多的实验并激发创造力。时髦的界面和直观的样式控件确保了与众不同的独特设计。
4、Foundation 6的所有功能。无需编码。
前端框架提供了坚实的网格系统和经过良好测试的预定义样式库。脚本模块允许创建交互式网站组件，例如下拉菜单和响应式导航模式。我们喜欢Bootstrap，但我们完全喜欢Foundation，因为……
5、最小且模块化
组合元素，创建样式并添加脚本。这就像在玩技术乐高玩具（而不是duplo…）
6、有切换器
真的很摇滚！通过交换类或显示隐藏项来创建所有类型的交互式元素。
7、包括Motion UI
该库通过使用简单的数据属性帮助创建灵活的UI过渡和动画。
8、链接元素或整个组件
符号代表链接的元素或元素组。对符号项目的更改将全局更新该符号的所有实例。内容（例如文本，图像）甚至组件结构（例如导航菜单）仅需要更新一次。
9、自由的灵活性
通过预览功能轻松浏览符号，单击按钮即可导航到特定实例。如果需要更改符号，只需取消实例的链接即可，它将不再受全局更新的影响。
10、自定义预建组件
从导航菜单，手风琴，凉爽的选项卡面板，模式对话框，下拉菜单中进行选择，以及更多其他功能。
11、创建自己的交互式组件
可视地组合HTML元素（预定义和自定义）CSS。然后，混合交互式脚本以创建屏幕外导航，伸缩卡，信息弹出窗口或图库。确实，您可以构建的东西没有任何限制！
使用说明
1、应用概述
四个主要部分。
如果您在应用程序中阅读此内容，那么您当前正在查看Foundation Framer中观看次数最多的部分：实时画布。下图中标记为＃1的画布是基于浏览器的工作区。一个主要的优点是，您所创建的内容与网站实际在网络上发布时的外观和感觉相同。画布主要用于实时设计视图，选择或重新排序元素以及编辑文本。
该应用程序的其余部分用于管理工作区中发生的事情。右侧有5个窗格，标记为＃2，每个窗格都有特定的角色，用于可视化地管理内容，HTML，CSS和Javascript。
在工作区的正上方，您会看到一个名为“响应者”的栏。标为＃3的此栏包含许多工具，可以在所有可能的设备宽度上管理设计。
Foundation框架是“移动优先”的。这意味着设计过程最初将重点放在最左边的紫色点左侧宽度上的小型（移动）设备上。然后，当断点变为活动状态（紫色点显示黑色中心）时，可以对较大的屏幕进行调整。如果您曾经用Foundation进行过手动编码，这将立即显而易见。如果不用担心，我们稍后将详细讨论（自定义）断点。
标记为＃4的工具栏可访问页面管理器的功能，可用于在几种设计模式之间切换并在特定的浏览器中启动预览。在本文档的下一部分中，我们将总结每个指定区域的用途及其在创建响应式设计中的功能。
2、画布（工作区域）。
小费
该区域可视化了网站访问者在页面上登陆时的体验。与Slider（The Responsifier的一部分）结合使用时，可以在设计时预览每个设备的宽度。
如果您希望查看设计的特定部分在不同的屏幕宽度下的行为，请选择该部分中的任何元素并移动滑块。在普通浏览器中，调整大小后内容会从视图中消失，但是，在Foundation Framer中，所选内容会自动滚动回视图中。成帧器的小巧却非常方便！
在画布上，可以通过单击元素或从动态下拉列表中选择元素来选择它们。动态下拉列表显示在悬停的元素的左上角的画布上。可以将所选元素拖放到其他位置或列中。所选元素也可以复制或复制并粘贴到其他区域。
文本编辑器处于活动状态时，可以在适当位置编辑文本元素。可以通过多种方式激活编辑器。右键单击文本元素将弹出一个上下文菜单，该菜单可访问包括文本编辑在内的常用功能。
超级用户将能够使用键盘组合执行菜单中的可用操作。键盘快捷键的完整列表将包含在本文档中。
控制画布上最重要的内容和设计工具位于控制窗格中。接下来让我们看看它们。
3、控制面板
在UI的右侧，有5个窗格，每个窗格在创建响应式设计中都有特定的作用。悬停时，该图标将替换为窗格名称。以下是每个窗格的概述。下一节将提供每个窗格上的详细信息。
最左侧的窗格是“布局”窗格。该窗格包含用于处理Foundation网格的控件。在这里，您可以添加行，列（包含实际的内容元素），并指定（例如）列的宽度，并针对不同的显示宽度进行调整。
下一个窗格是“内容”窗格。标题，段落，按钮，图像和视频（还有更多）等元素可以插入到画布上的任何列中。
在“内容”窗格上还有项目“组件”。该子窗格可访问项目中包含的所有预建组件，例如导航，卡片和模态。可通过“内容”窗格访问符号。符号是诸如购买按钮之类的元素，或诸如页脚之类的组件，它们在项目的所有位置和页面之间保持同步。
在这五个窗格中，“设计”窗格可能是最常使用的窗格。顶部部分用于配置元素的HTML/内容部分。例如，可以从预定义的列表中“过滤”基础类，可以添加自定义类或指定URL。第二部分包含控制元素设计的所有输入，工具和控件，这些元素细分为“版式”，“尺寸”等部分。
第四个选项卡是“设置”窗格。您可以在此处设置用于搜索引擎优化的元数据。输入页面标题，描述，关键字，或在页眉和页脚部分插入内容。
最后一个窗格是“检查器”窗格。顶部是树状页面上所有元素的概述。它提供了一种选择和重新排序元素的快速方法，例如，切换隐藏元素的可见性。底部提供了添加的CSS规则的预览。
这仅涉及窗格提供的设计和创建可能性。下一部分将提供有关它们的更多详细信息。由于我们是设计内容优先*的忠实拥护者，因此我们从“内容”窗格开始。
4、内容优先
内容窗格
“内容”窗格使用三个子窗格来组织各种网站构建块，一个子窗格用于内容元素，一个用于组件，一个用于符号。
选择“内容”窗格后，默认情况下会打开最常用的“元素”子窗格。在此窗格中，您可以添加标题，按钮，图像等。这些元素是最小的站点构建块。第1节提供了有关各种元素类型的更多详细信息。
组件通常由几个元素组成。它们一起执行更复杂的角色，例如导航菜单，（一系列）卡片，手风琴或标签。第2部分将更详细地讨论组件。
符号是在整个项目中保持完全相同的特殊元素或元素组。更新符号的一个实例时，项目中的所有其他实例也将更改。例如，这允许通过一次编辑在所有页面上更新页脚。
