So you think you want some cool components for mobile web, huh?
Before we begin this wonderful journey lets take a second to understand what we are looking at.
Scaffolding example
Something to say.
Here is a standard pane. Implementation class pane
Pane footer. Implementation class pane-f
Here are all available headings from h1 to h6.
| Heading | Markup |
|---|---|
Heading |
h1 |
Heading |
h2 |
Heading |
h3 |
Heading |
h4 |
Heading |
h5 |
Heading |
h6 |
The easiest way to label areas of interest is to insert a lbl into your text.
| Name | Label |
|---|---|
| Default | lbl |
| Warning | lbl lbl-w |
| Danger | lbl lbl-d |
| Confirm | lbl lbl-s |
| Info | lbl lbl-b |
Buttons are very simple to implement.
| Button | class="" | Description |
|---|---|---|
| btn btn-lg | Large button | |
| btn | Default button | |
| btn btn-sm | Small button | |
| btn btn-tn | Tiny button |
Here are some predefined button types that can be used around your application.
| Button | class="" | Description |
|---|---|---|
| btn | This is the default button | |
| btn btn-w | This button is for actions such as removing and deleting | |
| btn btn-d | This button is for important notification confirmations | |
| btn btn-s | This button is for saving or updating information | |
| btn btn-b | This button is for completing multiple step forms | |
| btn btn-l a | This button is for linking to other categories |
| Button | class="" |
|---|---|
| btn btn-g-f | |
| btn btn-w-f | |
| btn btn-d-f | |
| btn btn-s-f | |
| btn btn-b-f |
Here are some examples of buttons in groups.
| Button | Description |
|---|---|
| Button group for navigation |
The generic modal has 2 basic options. First displays a 'close' button in the header portions on the modal - by enabling close: true in the extension (it will also automatically default to true).
or setting the option to false close: false, to allow for your own modal closing procedure
The following toggle button works!
| Button | class="" |
|---|---|
| tog tog-lg | |
| tog | |
| tog tog-sm | |
| tog tog-tn |
Here are some examples of the progress bar implemented.
This component allows you to swipe/advance across multiple panes.
Something navigation
Choose the supporting platform you will use in your project. This will generate the most optimized version of component libraries for that platform.
Backbone
Select the base CSS elements you want to use in your project. All style attributes can be further adjusted by your stylesheet.
Choose component you want to use.