Getting Began with Basis for Apps

The Foundation family is the idea upon which we construct nice digital merchandise. Platform-agnostic, versatile and minimal, our CSS framework has one objective: Assist folks design higher merchandise sooner.

Just a few years in the past we determined to cease repeating ourselves. All of our shoppers wanted the identical base code upon which we may apply branding, type, and different design facets that made their websites distinct. We known as it Basis, and launched it as open supply software program for everybody to make use of.

Many advertising websites should not responsive — the truth is, many sites have no consideration for mobile devices at all. So it’s no shock that designing responsive advertising websites is a cumbersome course of that’s difficult to check. In the meantime it’s considered best-practice by large names within the trade.

Responsive apps are even worse off. HTML and CSS have been by no means meant to deal with advanced interactions or to think about bandwidth overhead, to not point out all the pieces from smartphone-sized screens to 40″ shows. Deploying an online app that works throughout all platforms isn't any small endeavor.

To fight these issues, we launched subsequent variations of Basis as open supply software program to assist folks design for real-world conditions — with out getting in the way in which of their artistic efforts.

This two-part collection covers the 2 Basis frameworks. Partly one we’ll use Foundation for Apps to construct a easy Gmail-esque RSS view. Partly two we’ll use Foundation for Sites to construct a advertising web site that promotes the app.

Do you know that there's a enormous number of Foundation Themes & Templates accessible on ThemeForest?

Half 1: Construct a Gmail-like RSS View in a Snap

Basis for Apps gives three instruments to assist us produce net apps with little fuss: A Flexbox-based grid, Movement UI and stateful views with Angular. Right here we’ll begin with the fundamentals, constructing the skeleton of an online app utilizing the grid.

Set up Basis for Apps

We’ll need a few items to get started.

1. Set up the CLI. “foundation-apps new view-app“. This downloads the repo and its dependencies for you.
2. “foundation-apps watch” begins a Gulp job that compiles and watches Sass, converts entrance matter to Routes and begins a neighborhood server for you. All that from three little phrases.
3. All this downloads the code with a easy starting HTML file so that you can use. We’ll construct our view on this file.

Constructing the App Format

Right here’s what we’re constructing: A easy Gmail-esque view. Content material within the center, feeds on the aspect. Menu up prime.

Basis for Apps works mobile-first, which implies its default types purpose for smartphone-sized screens, which bigger types override. We’ll begin by creating the grid.

1. .grid-frame is the outer factor. It will get used as soon as. It makes use of vheight to fill all the browser window.
2. Grid-content and grid-block change conduct of their quick youngsters.
3. .grid-block — align quick little one parts subsequent to one another, it doesn't matter what they're. Paragraphs, divs, all of them line up.
4. .grid-content — content material is simply content material. Flows as regular.

This instance has .grid-frame round two vertical .grid-blocks. The grid is horizontal by default. You may change that with “.vertical" to the dad or mum (on this case, the .grid-frame).

“.shrink” class prevents divs from taking on even quantities of area within the dad or mum. They solely take the area their content material wants.

<div class="grid-frame vertical">
  <div class="grid-content shrink" type="padding: zero;">
    …
  </div>
</div>

The primary is a menu. We’ll come again to that in a minute. The second block has two nested parts: a sidebar for feeds and a major content material space for the present feed’s articles.

<div class="grid-block">
  <div zf-panel class="medium-grid-block medium-2 
    panel panel-left" id="sidebar">
    …
  </div>
</div>
<div class="grid-block small-12 medium-10 medium-12">
  <div ui-view class="grid-content">
    …
  </div>
</div>

A panel is usually a grid-block that's a part of your format. The medium-grid-block class implies that on medium-up this will probably be a grid block. On small it will disguise away. You may then use our toggle api on any button to open/shut it on small (This will probably be defined later).

Lastly, we add a primary nav listing to the menu. It’s only a <ul>, like this:

<ul>
  <li><a href="/search?q=envato.com&ref=tiennguyenvan&aff=tiennguyenvan">Hyperlink A</a></li>
  <li><a href="/search?q=envato.com&ref=tiennguyenvan&aff=tiennguyenvan">Hyperlink B</a></li>
  <li><a href="/search?q=envato.com&ref=tiennguyenvan&aff=tiennguyenvan">Hyperlink C</a></li>
</ul>

This format too advanced for smaller screens — smartphones and a few tablets. So we flip the aspect bar right into a panel. That is the place the menu comes into play.

1. Give the sidebar id="feed-list".
2. Add .zf-toggle="feed-list" to the menu.
3. Refresh your browser. That’s it.

zf-toggle="x" will open/shut a grid block with id="x"

And that’s it: The format for a easy, mobile-optimized RSS view constructed with Basis for Apps.

Now that we've the product, we want a advertising web site to put it up for sale. Basis for Websites is the instrument we’ll use for that, coming in part two.

Download the Source Files

HomeTrends

Trends

Web Development