Open your existing or create a new fork App Template.
- HTML Tag for Lists
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 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”.
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
Zurb Foundation uses a convention known as Cards for content layouts in Apps. Read more on the Layout Level 3 badge.