Styling & Layout

Getting Started

Open your existing or create a new fork App Template.

Key Terms

  • HTML Tag for Lists
  • Screen
  • Panel
  • CSS
  • Selector

Screens & Panels Review

You’ll want to be sure all the screens you have in your app are in your navigation panel.

Below is a panel that links to the Home screen and a screen called “All Badges”.

 <div zf-panel="" id="panelName"> 
   <a zf-close="" class="close-button">×</a> 
   <ul>
     <li><a href="#home">Badges</a></li>
     <li><a href="#all-badges">All Badges</a></li>
   </ul>
 </div>

CSS Selectors

CSS rules are how you can change the color, font, or position of an HTML element. A selector lets you specify which elements the rule is applied to.

.panel   Selects an element with class=”panel”.

#home  Selects an element with id=”home”.

Further reading: Selector Cheatsheet and Style Cheatsheet.

Grid Layouts

foundation-grid-system

A 12 Column Grid

Designers use Grid Layouts to help layout Apps and Web Sites.

Every Grid has 12 columns.

Foundation comes with built-in classes for grid layouts.

‘small’, ‘medium’, or ‘large’ refers the the size of the user’s screen. The number refers to how many columns wide the element should be. (1 – 12 columns.)

For example, on a small screen like an iPhone your element might occupy 6 columns. The class would be: .small-6   The same element on a larger screen might have  .medium-4

Using Cards

Zurb Foundation uses a convention known as Cards for content layouts in Apps. Read more on the Layout Level 3 badge.