Getting Started with Foundation for Apps

Free Course

Getting Started with Angular 2

Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features.

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.

What is Foundation for Apps?

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.

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.

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.

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.

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


npm install -g foundation-cli bower gulp

If this command returns an error please run it using 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.

figure_27ddc628a233185df5a0c219fdc40f21

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:


foundation-apps new ScotchApp
figure_241af64d655a753a2466b88c2c868617

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.

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.

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.

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


<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:


<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.

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


<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.

horizontal-vertical-scroll

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.

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:


<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:


<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.

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.

main-image-blog

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.

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:


<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.

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.

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.

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.

Angular Routing

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

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.

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:


---
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.

Sara

Sara Vieira is a freelance Front-End Developer from Portugal with a passion for everything Web related. She is also a drummer and a big time TV Show addict.