foundation 框架_Foundation for Apps入门

foundation 框架

If there is one thing we, at Scotch.io, go crazy about besides the MEAN stack is Foundation and the great work that has been done over at Zurb. This being said when we heard about Foundation for Apps we got on that as soon as humanly possible and want to share, with you, what is so great about this new Foundation Framework.

如果有一件事情，我们在Scotch.io会发疯，除了MEAN堆栈是Foundation之外，Zurb所做的出色工作也是如此。 话虽这么说，当我们听说Foundation for Apps时，我们很快就做到了这一点，并希望与您分享这个新Foundation框架的优点。

什么是Apps for Foundation？ (What is Foundation for Apps?)

As much as we all love CSS and Javascript frameworks, like Foundation for Websites, we know that these frameworks were built to be the base of a Website and the Web has changed. Since we have more Apps and fewer Websites being built these frameworks just aren't enough anymore. They weren't built to handle full-blown one page apps and so they have their issues when it comes to that.

尽管我们都喜欢CSS和Javascript框架，例如“网站基金会”，但我们知道这些框架是作为网站的基础构建的，并且Web已经发生了变化。 由于我们拥有更多的应用程序和更少的网站正在构建，因此这些框架已经远远不够了。 它们并不是为处理成熟的一页应用而构建的，因此在解决这些问题时会遇到问题。

Then came Foundation for Apps that intends to fill the void we currently have in these frameworks by adding a completely new grid and harvesting the power of Angular to make our job a whole lot easier.

然后是Apps for Foundation，它打算通过添加一个全新的网格并利用Angular的功能来填补我们目前在这些框架中的空白，从而使我们的工作变得更加轻松。

这听起来很不错！ 让我们使用它！ (That Sounds Great! Let's Use It!)

I like your enthusiasm! If you head over to the Foundation for Apps Website you can immediately see a big blue button that will give you the instructions to install the framework. It's as simple and painless as running a few commands.

我喜欢你的热情！ 如果您转至Foundation for Apps网站，您将立即看到一个蓝色的大按钮，它将为您提供安装框架的说明。 它就像运行一些命令一样简单而轻松。

To get started, you need to make sure you have Node.js, Git, Ruby and Bundler installed on your machine. If you don't, just follow the links and you can get clear instructions on how to install each one.

首先，您需要确保在计算机上安装了Node.js ， Git ， Ruby和Bundler 。 如果不这样做，则只需单击链接，即可获得有关如何安装每个链接的明确说明。

After these dependencies are installed, to install Foundation for Apps simply run:

安装完这些依赖​​项之后，只需运行以下命令即可安装Foundation for Apps：

npm install -g foundation-cli bower gulp

If this command returns an error please run it using sudo.

如果此命令返回错误，请使用sudo运行它。

This will install the command line utilities for Foundation and, also, Bower and Gulp which are tools we will need in order to take advantage of Foundation For Apps.

这将安装Foundation的命令行实用程序，以及Bower和Gulp ，这是我们为了利用Foundation For Apps所需的工具。

After everything has been installed on your machine, you are going to see this little guy that tells you how you can set up a new App or Get help.

在计算机上安装完所有组件之后，您将看到这个小家伙，告诉您如何设置新的应用程序或获取帮助。

Setting up a new App is exactly what we are going to do and we are going to name it ScotchApp:

设置新应用正是我们要做的，我们将其命名为ScotchApp：

foundation-apps new ScotchApp

This is usually a fast process that scaffolds a starter template for you, but before we can see it, we'll need to start up the server. In order to do that, run this:

通常这是一个快速的过程，可以为您架设启动程序模板，但是在看到它之前，我们需要启动服务器。 为此，请运行以下命令：

cd ScotchApp

npm start

The first commands, as you can see, get the command line inside the project's folder and then we start npm that gets the server running. You'll then be able to access it at localhost:8080.

如您所见，第一个命令在项目文件夹中获取命令行，然后我们启动npm使服务器运行。 然后，您可以在localhost：8080上访问它。

That's it, we now have a starter template for Foundation for Apps and we can start looking at all of the features it has.

就是这样，我们现在有了Foundation for Apps的入门模板，我们可以开始查看其具有的所有功能。

一个新的网格 (A New Grid)

With this new framework, also, came a new grid to adapt to your apps' needs. It is built on Flexbox from the ground up and includes vertical grids with independently-scrollable blocks and much more.

有了这个新框架，新的网格就可以适应您的应用程序的需求。 它是从零开始在Flexbox上构建的，包括带有独立可滚动块的垂直网格等。

Foundation for Apps uses Grid Blocks inside of a Grid Frame to define their sections. You'll need to follow these lines:

Foundation for Apps在网格框架内部使用网格块来定义其部分。 您需要遵循以下几行：

<div class="grid-frame">
  <div class="grid-block">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>
</div>

As you can see, you create your application content inside a grid block and define how many of those blocks you want inside. If no other classes are passed to each grid block, then they will always take up an even amount of space on your page no matter how many you place.

如您所见，您可以在网格块内创建应用程序内容，并定义要在其中包含多少个这些块。 如果没有其他类传递给每个网格块，则无论您放置多少，它们都将始终在页面上占用均匀的空间。

Of course you can change this in a variety of ways. Try a 12 column grid where you add your class to the grid blocks like:

当然，您可以通过多种方式更改此设置。 尝试使用12列网格，在其中将类添加到网格块中，例如：

<div class="grid-block">
  <div class="medium-4 grid-block"></div>
  <div class="medium-8 grid-block"></div>
</div>

Or if you want a block to only take up as much space as it needs, depending on the content, all you need to do is make him shrink:

或者，如果您希望一个块仅占用所需的空间（取决于内容），您需要做的就是使其收缩：

<div class="grid-block">
  <div class="grid-block shrink"></div>
  <div class="grid-block"></div>
</div>

Another really great feature of this grid, when it comes to the responsive and dynamic part of websites, is to determine the maximum number of children one row in a block can have.

当涉及到网站的响应和动态部分时，该网格的另一个真正重要的功能是确定一个块中每一行可以拥有的最大子代数。

Let's say you have a block, that will dynamically get content from an API, and you want your parent block to have a max of four elements in each row that are all evenly spaced - All you would have to do is add the class small-up-4, being small the breakpoint and 4 the max number of items in each row, to that element.

比方说，你有一个块，将动态地从API获取内容，并希望您的母块有每行四个元素都均匀间隔的最大值-所有你需要做的就是添加类small-up-4 ，该元素的断点较小，每行的最大项目数为4。

This is really great because whether you have 2 or 3 items they will always have the same widths between themselves.

这真是太好了，因为无论您拥有2项还是3项，它们之间的宽度始终相同。

<div class="grid-block small-up-4">
   <!-- Children Blocks -->
</div>

There are a bunch of other options in this grid like aligning, wrapping elements, offsets, and much more. Also, you can, of course, look up all the documentation and read about it on the framework's website.

此网格中还有很多其他选项，例如对齐，换行元素，偏​​移量等等。 另外，您当然可以查阅所有文档，并在框架的网站上阅读其内容。

面板 (Panels)

What Foundations calls panels are the elements that come from Off-Canvas into the App. We commonly see this in Mobile Menus because the space is needed and so a slide-in panel will leave more space for the content.

Foundation所谓的面板是从“画布”进入应用程序的元素。 我们通常会在“移动菜单”中看到此信息，因为需要空间，因此滑入式面板将为内容留出更多空间。

Foundation makes creating these Panels incredibly easy and even creates their triggers simply by using Angular directives and placing all the code in HTML. This means that you don't have to touch a single line of Javascript.

Foundation使创建这些面板变得异常容易，甚至只需使用Angular指令并将所有代码放入HTML中就可以创建其触发器。 这意味着您不必触摸任何一行Javascript。

Panels can come from the Top, Right, Bottom or Left side of the screen and this is allowed through the use of the position attribute on each panel you create. These panels also need a unique ID so that they can be easily called out by the triggers. This is better explained through code, so here is the code to create a simple panel that comes from the top of the page and simply includes a close trigger:

面板可以来自屏幕的顶部，右侧，底部或左侧，这可以通过在您创建的每个面板上使用position属性来允许。 这些面板还需要一个唯一的ID，以便触发器可以轻松调用它们。 这可以通过代码更好地解释，因此下面的代码是创建一个简单面板的代码，该面板来自页面顶部，并且仅包含一个关闭触发器：

<div zf-panel="" id="panel-top" position="top">
  <a zf-close="" class="close-button">×</a>
  <p>Content</p>
</div>

As you can see I added both the zf-panel and the position attributes to my element. This creates a simple panel that slides in from the top of the Screen. Another thing you may notice is that I don't actually target anything in the close link and that is because this trigger is inside the element. Therefore, it's not needed, but let's say you wanted a link to open this panel, in that case, we would have to use the zf-open attribute on the link and make its value equal to the ID of the panel we want to open. For example:

如您所见，我将zf-panel和position属性都添加到了元素中。 这将创建一个从屏幕顶部滑入的简单面板。 您可能会注意到的另一件事是，我实际上没有在关闭链接中定位任何对象，这是因为此触发器位于元素内部。 因此，它不是必需的，但是，假设您想要一个链接来打开此面板，在这种情况下，我们将不得不在链接上使用zf-open属性，并使它的值等于我们要打开的面板的ID。 。 例如：

<a href="#" zf-open="panel-top" class="button">
  Open that Panel
</a>

As you can see it's really simple and all in the HTML of the page. If you've seen a basic example of this, you can see that the panels are positioned absolute and in case you want these panels to be fixed, all you need to do is add the class panel-fixed. Once you add that, it will automatically give that panel a fixed position on the screen.

如您所见，它非常简单，并且全部包含在页面HTML中。 如果您已经看到了一个基本示例，则可以看到这些面板的位置是绝对的，并且如果要固定这些面板，您要做的就是添加固定的class类。 添加后，它将自动为该面板在屏幕上提供固定位置。

运动界面 (Motion UI)

Another introduction we had when this framework arrived was Motion UI. This feature in the framework allows you to prototype animations quickly and it uses SASS mixins and CSS Animations/Transitions to do so.

当该框架出现时，我们进行的另一项介绍是Motion UI。 框架中的此功能使您可以快速制作动画原型，并使用SASS mixins和CSS动画/过渡来实现。

What I mean by all of this is that they have included SASS Mixins and custom classes to help with your animation prototyping, which means all the hard work is done for you. In addition, if you are savvy with SASS you will have no problem in spicing up these animations to your taste.

我的意思是，它们包括了SASS Mixins和自定义类，以帮助您制作动画原型，这意味着所有的辛苦工作都为您完成。 此外，如果您精通SASS，则可以根据自己的喜好来增添这些动画。

Even if you are not a combination of CSS classes, when left with the default values you can still go a long way. For instance, by only applying CSS classes on a block you can create an animation that has a delay, you can make it faster or slower, and you even change the easing without touching a line of CSS or SASS:

即使您不是CSS类的组合，当保留默认值时，您仍然可以走很长一段路。 例如，通过仅在块上应用CSS类，可以创建具有延迟的动画，可以使其更快或更慢，甚至可以更改缓动效果而无需碰到CSS或SASS行：

<div class="grid block delay fast hingeInFromTop easeInOut">
This is the content of your block.
</div>

Just by this you can see how easy it is to manipulate your animations and transition using Foundation For Apps.

这样一来，您便可以了解使用Foundation For Apps操作动画和过渡的难易程度。

移动手势 (Mobile Gestures)

One thing this framework is king of, is offering a one package solution so that you won't have to go looking for ways to solve your Mobile Problems. One problem we always have is to find libraries for how to properly handle hand gestures, which makes a mobile website truly feel like an app to the user. It also gives them the native sensation when they are using our websites.

该框架最重要的一件事就是提供一个封装的解决方案，这样您就不必寻找解决移动问题的方法。 我们始终面临的一个问题是找到有关如何正确处理手势的库，这使移动网站对用户而言确实像一个应用程序。 当他们使用我们的网站时，这也给了他们天然的感觉。

In this case, Zurb is using HammerJS to help with this problem and already has it tidily integrated with the framework so that you can use it with ease, just by assigning the correct directives to it.

在这种情况下，Zurb正在使用HammerJS来解决此问题，并且已经将其与框架进行了整齐的集成，因此您只需分配正确的指令即可轻松使用它。

For example, if you want a closable bottom panel, that goes away when the user swipes down, you just need to use the zf-swipe-close directive and set it to down, which will trigger the event only when the user swipes down.

例如，如果您想要一个可关闭的底部面板，该面板在用户向下滑动时消失，则只需要使用zf-swipe-close指令并将其设置为down，这仅在用户向下滑动时才触发事件。

An example of this would be:

例如：

<div zf-panel="" zf-swipe-close="down" id="swipe-down" position="bottom">
  <a zf-close="" class="close-button">×</a>
  <p>This pannel will go away as soon as you swipe down.</p>
</div>

Other uses to this may be to use the swipe method to change views or even to create a Tinder like interface on your app. You can see the full documentation on HammerJS on their Website.

这样做的其他用途可能是使用滑动方法来更改视图，甚至在应用程序上创建类似Tinder的界面。 您可以在其网站上查看HammerJS上的完整文档。

角路由 (Angular Routing)

The last thing we are going to touch on is the Angular Routing that this framework offers.

我们要谈的最后一件事是此框架提供的Angular Routing。

When it comes to Angular Apps we always have to do all of the Routing process, at some point, in the App's life. It's not that Angular makes that hard for us, it's only that Foundation made it even easier by using UI.Router and Gulp to allow us to write our Routing in the HTML file, as well.

当涉及到Angular Apps时，我们总是必须在应用程序的整个生命周期中完成所有路由过程。 并不是Angular为我们带来了麻烦，而仅仅是Foundation通过使用UI.Router和Gulp使我们也可以在HTML文件中编写路由而使它变得更加容易。

Let's say you have a simple "About Us" page that will be the route /about . This is how you would define that in your HTML's partial:

假设您有一个简单的“关于我们”页面，该页面将是/about路线。 这是在HTML部分中定义的方式：

---
name: about
url: /about
---

To create a simple route, this is all you really need. Add this to the top of your file and your Route is complete. Really simple, ah?

要创建一条简单的路线，这就是您真正需要的。 将其添加到文件的顶部，您的路线就完成了。 真的很简单啊？

结论 (Conclusion)

There is a lot more to cover in the framework, both in the style sector and also in angular side of things. We have not touched on some of the directives this framework has to offer, but with what we have shown you here, I hope you can see the power this framework brings to the table when it comes to creating Web Apps. In this case, it's not just a quick boilerplate for your grid, styles, and sometimes most common Javascript Utilities, it's so much more! It's a one way stop for your app's needs.

框架中还有很多内容需要涉及，无论是在样式方面还是在事物的角度方面。 我们没有涉及该框架必须提供的某些指令，但是通过这里向您展示的内容，我希望您能够看到该框架在创建Web Apps时发挥的作用。 在这种情况下，它不仅是您的网格，样式和有时是最常见的Javascript实用程序的快速样板，而且还有更多！ 这是满足您应用程序需求的一种方法。

翻译自: https://scotch.io/tutorials/getting-started-with-foundation-for-apps

foundation 框架