Documentation & Components

The nuts and bolts of the AngularGap Framework

Need icons? Check out Angularicons, our custom-built icon font made specifically for AngularGap.

Header

Button

Block Button

Outline Button

Clear Button

Icon Button

Home

Favorites

Back

Header

Header

List

  • Battletoads
  • Contra
  • Duck Tales
  • Mega Man
  • Metroid
  • Mike Tyson's Punch-Out
  • R.C. Pro-Am
  • Spy Hunter
  • Super Mario Bros.
  • The Legend of Zelda

List Button

  • Call Ma

Form

Rember Password

Inline Lable

Rember Password

Form Addon

Rember Password

Default Input

Input Icon

Card

They're are a great way to contain and organize information, while also setting up predictable expectations for the user.

Card Form

Rember Password

Toggle

  • CheckBox Toggle
  • CheckBox Toggle Default
  • CheckBox Toggle Checked
  • CheckBox Toggle disabled
  • Radio Toggle
  • Radio Toggle Default
  • Radio Toggle Checked
  • Radio Toggle disabled

Checkbox

Radio

Range

  • Ranges In A List

Spinner

Progress

Masonry

Grid

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3

Evenly Spaced Columns

.col
.col
.col
.col
.col

Explicit Column Sizes

.col.col--1of2
.col
.col
.col.col--2of3
.col
.col
.col.col--3of4
.col
.col

Offset- Columns

.col
.col
.col
.col
.col

Vertically Aligned

.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4

Header

Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.

                

Header

Footer

Footers are regions at the bottom of a screen that can contain various types of content.

	              

Button

Ah, the Button, an essential part of any mobile experience. Like the Header, they come in the full spectrum of AngularGap's default colors.

By default a button has display: inline-block applied. Other options include block buttons for a full width.

	              
	              
	              
	              
              

Block Button

Adding button--block to a button applies display: block display. A block button will however go 100% of its parent's width. In the example, the button's containing content element also has padding applied, so there is some breathing room between the edge of the device and the buttons.

	              
	              
	              
	              
              

Outline Button

Use button--outline to apply an outline button style, which also has a transparent background.

                
                
                
                
              

Clear Button

Add button--clear to remove the border and make the text stand out.

                
                
                
                
              

Icon Button

Icons can easily be added to any button by using either the built in AngularGapons, or any custom font-pack you choose. Learn more about icons.

Icons can also be set with a child element inside the button, however, assigning the icon directly to the button reduces the number of elements in the DOM.

                 Home
                 Favorites
                
Back

Header Button

When buttons are placed in headers or footers, they take the style of the bar by default, so you don't have to use the extra style classes. To change this, add the desired style class.

                

Header

Clear Button Header

For a more minimal approach to header buttons, simply add the button-clear classname to remove the background button color and border.

                

Header

Button Group

Buttons can also be easily grouped together using the button-group classname. In this example, a button bar was added to the default header bar, as well as in the main content area of the screen.

                
              

List

The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

The list view is a very versitile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.

                
  • ...

List Divider

List items can also be dividers to organize and group the list items. Use the item--divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

                
  • ...
  • ...
  • ...
  • ...

List Icon

Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each list__item element. Icons can easily be added to any item by using either the built in AngularIcons, or any custom font-pack you choose. Learn more about icons.

                
              

List Button

List items can also be dividers to organize and group the list items. Use the item--divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

                
Call Ma

List Avatar

List avatars are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail style list, use the list-thumbnail classname. In this example, we are using images of album covers.

                
              

List Thumbnail

List Thumbnail are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item.

                
              

Form

A list is also used to group related input elements. input-control is then used to designate each individual input field and it's associated label.

                 
Rember Password

Inline Label

Use input-label to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too.

                  
Rember Password

From Addon

Use input-addon to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too.

                
Rember Password

Default Input

Use the input-wrap classname to wrap a input. Placing a button inside the item.

                

Input Icon

Use the input-wrap input--icon classname to wrap a input. Placing a button inside the item.

                

Header Input

Inputs can also be placed in headers, along with buttons to submit or cancel the form.

                  

Card

They're are a great way to contain and organize information, while also setting up predictable expectations for the user.

        				

They're are a great way to contain and organize information, while also setting up predictable expectations for the user.

Card List

Use the card list classname to create a card with lists.

                
              

Card From

Use the card list classname to create a card with form.

                
Rember Password

Tab Bar

The Tab Bar is a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.

The containing tab bar should have the tab classname, and each tab should have the tab__item classname. By default, tabs will be without an icon and text-only.

                
              

Icon-only Tab Bar

Add tab__icon--only along with the tabs classname.

                

Top Icon Tab Bar

The classic tab bar. Add tab--iconTop along with the tab classname.

                
              

Top Icon Tab Bar

Add tab--iconLeft along with the tab classname.

                
              

Toggle

A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. AngularGap prefers to wrap the checkbox input with the <label> in order to make the entire toggle easy to tap or drag.

                
                ...
                
              

Checkbox

A checkbox is no different than the HTML checkbox input, except it's styled differently. This is an example of multiple checkboxes within a list. Note the list--checkbox class was added along side list__item for each item.

AngularGap prefers to use the <label> element for a checkbox item in order to make the entire checkbox tappable.

                
              

Radio

Radio act no differently as standard radio input elements. Following this convention will display a list of radio buttons similarly seen in modern app.

AngularGap prefers to use the <label> element for a radio item in order to make the entire area tappable.

                
              

Range

This is a Range. Ranges can be themed to any default color, and used in various other elements such as a list item.

                

Spinner

This is a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely.

                

Progress

Progress bars use CSS3 transitions and animations to achieve some of their effects.

                

Masonry

CSS columns. Granted, their purpose is to display text in columns like a newspaper, but their display mode is exactly what’s needed to recreate the Masonry effect.

                

Grid

AngularGap's grid system is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage here is that the devices that AngularGap supports, all support flexbox.

Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be. And to add to the crazy, you can vertically align content within each column.

Use the grid classname is used to designate, surprise, a row, and col is used for a column. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automagically.

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Evenly Spaced Columns

By default every col added inside a grid will automatically receive an equal amount of the available area. Notice in the code below that no sizes are specified anywhere in the classnames, yet each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).

                
.col
.col
.col
.col
.col

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Evenly Spaced Columns

You can explicitly state the size of a column if for example you'd want specific columns to be larger than the others in the same row. By default each column will evenly take up the available area, but in the case where a column should be a certain size, Angulargap's grid uses a percent system (in contrast to a locked in 12 column grid).

An advantage with this grid system is that you only have to state the percentage for the column that needs it, and the others will still evenly divide up the available areas.

                
.col.col--1of2
.col
.col
.col.col--2of3
.col
.col
.col.col--3of4
.col
.col

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Explicit Column Percentage Classnames
.col--1of10 10%
.col--1of5 20%
.col--1of4 25%
.col--1of3 33.3333%
.col--1of2 50%
.col--2of3 66.6666%
.col--3of4 75%
.col--4of5 80%
.col--9of10 90%

Offset Columns

Columns can also be offset from the left. We'll let the code and demo speak for itself.

                
.col
.col
.col
.col
.col

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Offset Column Percentage Classnames
.col-offset--1of10 10%
.col-offset--1of5 20%
.col-offset--1of4 25%
.col-offset--1of3 33.3333%
.col-offset--1of2 50%
.col-offset--2of3 66.6666%
.col-offset--3of4 75%
.col-offset--4of5 80%
.col-offset--9of10 90%

Vertically Aligned

Another trick up flexbox's sleeve is the ability to easily vertically align columns. Vertical alignment includes top, center and bottom, and can be applied to every column in a row, or to specific columns.

In the demo, we've made the last column in each row to have the tallest content in order to demonstrate how the content of the others vertically align. The first row shows the default which is to take the same height as the tallest column in the same row.

                
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4

Note: The borders and gray background in the demo were added so it's easier to see the structure.