Often, when you talk about front-end frameworks, , , and are usually the ones that are brought up.

A lot of people gravitate towards Bootstrap because of its ease of use, simple docs, great features, adoption in the industry, extensibility... I guess this list could go on and on. I've always seen Foundation as an alternative but never looked into what features they offered and if they could be a viable alternative to Bootstrap to be honest. There wasn't really a need to since Bootstrap did

通常，在谈论前端框架时，通常会 ， 和 。

许多人倾向于使用Bootstrap，因为它的易用性，简单的文档，强大的功能，在行业中的采用，可扩展性……我想这个清单可能还会持续下去。 我一直将Foundation视为替代方案，但从未研究过它们提供了哪些功能以及说实话它们是否可以替代Bootstrap。 由于Bootstrap可以完成我需要的 most of the things I needed from it. Recently, however, ZURB has been talking about Foundation for Apps. The way they are looking at modern applications really makes sense and fills a growing need that modern websites need to feel more interactive like their mobile counterparts. Foundation for Apps consists of three main parts: 大部分工作 ，因此实际上并不需要这样做。 但是，最近，ZURB一直在谈论Foundation for Apps。 他们看待现代应用程序的方式确实很有意义，并且满足了现代网站不断增长的需求，即现代网站需要像移动网站一样更具交互性。 Apps for Foundation由三个主要部分组成：

• AngularJS Integration
  AngularJS集成

浏览网站 ( Navigating the Site )

• Getting Started link also goes here
  入门”链接也位于此处
• lets you download and customize for the parts you want
  使您可以下载和自定义所需的部分

and 和 . 。

安装 ( Installation )

浏览他们的文档，我们可以进入三种不同的软件包： CSS, CSS ， SASS, and SASS和 Building an App. For more advanced uses, Foundation comes with a CLI that you can download and install so that you get Foundation commands from the command line. We won't be messing with that stuff today, just the CSS. Downloading the Building App 。 为了更高级的使用，Foundation附带了一个CLI，您可以下载并安装它，以便从命令行获取Foundation命令。 今天，我们不会再搞这些东西了，只是CSS。 下载 is all we have to do. We'll get a sample site in 是我们要做的全部工作。 我们将在 index.html where we can test out CSS and JS features. index.html中提供一个示例站点，在其中可以测试CSS和JS功能。

CSS设置 ( CSS Setup )

要启动Foundation网站，我们需要两个CSS文件： normalize.css and normalize.css和 foundation.css. Those will be enough to get the classes we need and then we can add our own stylings in a custom stylesheet that we'll call foundation.css 。 这些就足以获取我们需要的类，然后我们可以在自定义样式表中添加自己的样式，我们将其称为 app.css: app.css ：

Now we have access to the classes that are necessary to build out all parts of Foundation. Let's say we needed buttons. The syntax isn't too far off of the Bootstrap way. You have .button, .button ， .tiny, .tiny ， .small, .small ， .large, .large ， .radius, .radius ， .round, .round ， .success, and .success和 .alert. We could create buttons by writing: .alert 。 我们可以通过编写以下内容来创建按钮：

Tiny Primary  Radius SuccessRounded Alert

See the Pen by Chris Sevilleja () on .

见笔克里斯Sevilleja（ 上） 。

JS设置 ( JS Setup )

为了使JavaScript正常运行，我们需要三件事： jquery.js, jquery.js ， foundation.min.js, and we'll need to initialize Foundation like so: foundation.min.js ，并且我们需要像这样初始化Foundation：

By adding that $(document).foundation(); line, we'll be able to define our JavaScript elements just by using $(document).foundation(); 行，只需使用 HTML5 data-attributes. Here's an example of the dropdown split button and the tabs: HTML5 data-attributes就能定义JavaScript元素。 这是下拉拆分按钮和标签的示例：

See the Pen by Chris Sevilleja () on .

请参阅上Chris （ ） 的Pen 。

特征 ( Features )

一处看一下所有功能。 ZURB制作了 to show off all of Foundation 5's goodness. We won't dive too far into many of these just yet. The CSS is easy enough (just copy and paste the classes), and we'll be going more in depth into the grid, JavaScript components, and other fun features in separate articles. 以炫耀Foundation 5的所有优点。 到目前为止，我们不会深入探讨其中的许多内容。 CSS非常简单（只需复制和粘贴类），我们将在单独的文章中更深入地介绍网格，JavaScript组件和其他有趣的功能。

CSS功能 ( CSS Features )

Foundation的优点在于它努力做到完全响应。 本着这种精神，几乎所有内容都是 defined using ems or rems. Even the media queries and widths of the grid system use ems. This is a great practice since it ensures you are starting your sites with a responsive... umm foundation. The CSS classes that come with Foundation are easy enough to learn and understand. Just read through the docs and ZURB's great examples to see how to create buttons and whatnot. Here's a quick list of some CSS features. 使用ems或rems定义的 。 甚至媒体查询和网格系统的宽度都使用ems。 这是一个很好的做法，因为它可以确保您以响应Swift的umm基础来启动网站。 Foundation附带CSS类非常容易学习和理解。 只需阅读文档和ZURB的出色示例，即可了解如何创建按钮等。 这是一些CSS功能的快速列表。

• : Hiding and Showing things based on device size (Foundation is mobile first). There's even classes to detect landscape/portrait and touch/nontouch devices.
  ：根据设备大小隐藏和显示事物（Foundation首先是移动的）。 甚至还有检测横向/纵向和触摸/非触摸设备的类。
• : Floats, Rounded and Border Radius on Buttons, Text Aligning
  ：浮点数，按钮的圆角和边界半径，文本对齐
• , , ,
  ， ， ，
• : Let your browser automatically scale video objects!
  ：让您的浏览器自动缩放视频对象！
• and
  和
• , , , Blockquotes, and more
  ， ， ，块引用等

图标栏 ( Icon Bar )

See the Pen by Chris Sevilleja () on .

见笔克里斯Sevilleja（ 上） 。

开关 ( Switches )

See the Pen by Chris Sevilleja () on .

见笔克里斯Sevilleja（ 上） 。

定价表 ( Pricing Tables )

我希望它的语法有点语义，但是仍然很酷。

See the Pen by Chris Sevilleja () on .

That's a giant list. The docs can definitely show all that off best, so head on over and check out the great CSS features. Foundation is very polished in all of its CSS elements and I like the additions of pricing table, icon bar, switches, and some useful visibility and utility classes that could be used often.

见笔由克里斯Sevilleja（ 上） 。

那是一个巨大的清单。 这些文档绝对可以充分展现所有优势，因此请继续阅读并查看出色CSS功能。 Foundation的所有CSS元素都非常精致，我喜欢添加定价表，图标栏，开关以及一些经常使用的有用的可见性和实用程序类。

JS功能 ( JS Features )

Foundation附带JavaScript功能也很棒。 JS的主要功能之一是内置的非画布菜单。 我们已经详细介绍了如何 but it's good to have a solution built into the framework that you're using. 但是最好在您使用的框架中内置一个解决方案。

关闭画布菜单 ( Off Canvas Menus )

See the Pen by Chris Sevilleja () on .

Here's a quick list of the other JS features:

请参阅上的Chris （ ） 的Pen 。

以下是其他JS功能的快速列表：

• : Switch out HTML content based on browser size
  ：根据浏览器大小切换HTML内容
• ,
  ，
• : Good looking implementation of a lightbox with gallery
  ：带有图库的美观实现
• ,
  ，
• , ,
  ， ，
• : Awesome feature to create guided tours around your site
  ：出色的功能，可在您的站点周围创建导览
• , ,
  ， ，
• : Create equal height content!
  ：创建相等的高度内容！

范围滑块 ( Range Sliders )

See the Pen by Chris Sevilleja () on .

请参阅上Chris （ ） 的Pen 。