From c4326ef96adbbcc1b2b58a74b712d4a2a7f009ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Rog=C3=A9rio?=
- For use this components you need install with command:
+ To use this component you need install with the command:
- For use you need call the function
See this small example:
diff --git a/base/base.html b/base/base.html
index 4ec3a57..72ee296 100644
--- a/base/base.html
+++ b/base/base.html
@@ -19,8 +19,8 @@
- Base component contains the basic features to use MobileUI and any other component of this kit.
- With this component you can use the color themes, icons and some classes of positioning and alignment of elements in the interface.
+ The base component contains the basic features to use MobileUI and any other component of this kit.
+ With this component, you can use the color themes, icons and some classes of positioning and alignment of elements in the interface.
To use it you need to install with the command:
diff --git a/base/colors.html b/base/colors.html
index 28f312f..d5824ee 100644
--- a/base/colors.html
+++ b/base/colors.html
@@ -22,11 +22,11 @@
MobileUI use the suggestions material design colors because material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant. MobileUI uses the suggestions material design colors because material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant. This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.
- The themes colors is in base MobileUI, to use it install base through command:
+ The theme's colors are in base MobileUI, to use it install base through the command:
And just add the class in your component to use the color, example:
- One of MobileUI's primary concerns is UX Design, so we offer a simple way to install new fonts in your web apps.
+ One of MobileUI's primary concerns is UX Design, so we offer a easy way to install new fonts in your web apps.
You can install any source in the Google Fonts repository.
diff --git a/base/icons.html b/base/icons.html
index 08e046d..7c20b68 100644
--- a/base/icons.html
+++ b/base/icons.html
@@ -20,14 +20,14 @@
- MobileUI also comes with its own free and open-sourced icon font, Ionicons, with over 500 icons to choose from.
+ MobileUI also comes with its own free and open-source icon font, Ionicons, with over 500 icons to choose from.
- The icons is in base MobileUI, for use just install base the command:
+ The icons are in base MobileUI, for use just install base the command:
- And add Alert
The dependencies will be installed together with this module
mobileui install alert
alert('YOUR MESSAGE')
or alert(objectCustomized)
, and you can send more paramters for create alert with title or multiple options.
+ To use, you need to call the function alert('YOUR MESSAGE')
or alert(objectCustomized)
, and you can send more paramters for create alert with title or multiple options.
Base
Colors
- mobileui install base
Fonts
Icons
mobileui install base
icon
and the Ionicon classname for the icon to show, which can be easily looked up on the Ionicons homepage. You can change the color add class colors for text.
+ And add icon
and the Ionicon class name for the icon to show, which can be easily looked up on the Ionicons homepage. You can change the color add class colors for text.
- Certainly you will love using it in Progressive Web Apps + Certainly, you will love using it in Progressive Web Apps and Apache Cordova Apps. You can use only the components you want in your projects created with PhoneGap, Ionic Framework, Onsen UI, @@ -33,34 +33,58 @@
- The Installation is very simple, but first you need to install Node.js. + The Installation is straightforward, but first, you need to install Node.js. Then, install Cordova via terminal npm install -g cordova(add sudo if you are in Linux).
- After that, just execute the following command in your terminal: + After that, just execute the command in your terminal:
npm install -g mobileui-
To check if mobileui is installed or not, open the terminal and type mobileui
+To check if MobileUI is installed or not, open the terminal and type mobileui
- -Let's create a Simple Example using mobileui
+Let's create a Simple Example using MobileUI and Cordova
Open Terminal from desired location and following command is executed
Create a cordova Project using command - cordova create apptest
Change the directory to your project - cd apptest
For sample we can take header component as example, so install header component - mobileui install header
-After that add the below code in index.html -
- <div class="header purple"> - <button class="left icon ion-navicon" name="button"></button> - <h1>Application title</h1> - </div> -- -
To preview this run: mobileui preview
-By default an HTTP server will run on port 8080, but you can change it by passing the --port
parameter with the desired port, eg --port 8000
Commands:
++ cordova create apptest + cd apptest + mobileui install template cordova-blank + mobileui install header + mobileui preview ++
Let's check the commands:
+After that add the below code in index.html
+ + +By default, an HTTP server will run on port 8080, but you can change it by passing the --port
parameter with the desired port, eg --port 8000
border-[COLOR]
, alter text color using class text-[COLOR]
and add radius border using class radius
.
- For use icon in button you need add class icon-text
and you can use diferents size, see the examples below.
For use icon in button you need add class icon-text
and you can use diferent size, see the examples below.
- For use this components you need install with command: + To use this component you need install with the command:
base
.
@@ -52,9 +52,9 @@ Social login:
-Diferent sizes:
+Different sizes:
And diferent size in group:
+And different size in group: