Skip to content

Commit

Permalink
update install
Browse files Browse the repository at this point in the history
  • Loading branch information
Fábio Rogério committed Oct 9, 2017
1 parent 5b3425f commit c4326ef
Show file tree
Hide file tree
Showing 26 changed files with 85 additions and 61 deletions.
4 changes: 2 additions & 2 deletions alert/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Alert</h2>
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install alert</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
<p>
For use you need call the function <code>alert('YOUR MESSAGE')</code> or <code>alert(objectCustomized)</code>, and you can send more paramters for create alert with title or multiple options.
To use, you need to call the function <code>alert('YOUR MESSAGE')</code> or <code>alert(objectCustomized)</code>, and you can send more paramters for create alert with title or multiple options.
</p>
<p>
See this small example:
Expand Down
4 changes: 2 additions & 2 deletions base/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Base</h2>
<p>
Base component contains the basic features to use MobileUI and any other component of this kit.
With this component you can use the <a href="#colors">color themes</a>, <a href="#icons">icons</a> 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 <a href="#colors">color themes</a>, <a href="#icons">icons</a> and some classes of positioning and alignment of elements in the interface.
</p>
<p>
To use it you need to install with the command:
Expand Down
4 changes: 2 additions & 2 deletions base/colors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
<body class="content-land">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Colors</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.</p>
<p>
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:
</p>
<pre>mobileui install base</pre>
<p>And just add the class in your component to use the color, example: </p>
Expand Down
2 changes: 1 addition & 1 deletion base/fonts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Fonts</h2>
<p>
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.
</p>
<p>
You can install any source in the <a href="https://fonts.google.com" target="_blank">Google Fonts</a> repository.
Expand Down
6 changes: 3 additions & 3 deletions base/icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Icons</h2>
<p>
MobileUI also comes with its own free and open-sourced icon font, <a href="http://ionicons.com/" target="_blank">Ionicons</a>, with over 500 icons to choose from.
MobileUI also comes with its own free and open-source icon font, <a href="http://ionicons.com/" target="_blank">Ionicons</a>, with over 500 icons to choose from.
</p>
<p>
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:
</p>
<pre>mobileui install base</pre>
<p>
And add <code>icon</code> and the Ionicon classname for the icon to show, which can be easily looked up on the <a href="http://ionicons.com/" target="_blank">Ionicons</a> homepage. You can change the color add class colors for text.
And add <code>icon</code> and the Ionicon class name for the icon to show, which can be easily looked up on the <a href="http://ionicons.com/" target="_blank">Ionicons</a> homepage. You can change the color add class colors for text.
</p>
<textarea class="bind-code" mode="text/html" custom-class="result-icon">
<i class="icon ion-navicon"></i>
Expand Down
58 changes: 41 additions & 17 deletions base/install.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Getting started</h2>
are really going to use for UI.
</p>
<p>
Certainly you will love using it in <a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">Progressive Web Apps</a>
Certainly, you will love using it in <a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">Progressive Web Apps</a>
and <a href="https://cordova.apache.org/" target="_blank">Apache Cordova Apps</a>.
You can use only the components you want in your projects created with <a href="http://phonegap.com/" target="_blank">PhoneGap</a>,
<a href="http://ionicframework.com/" target="_blank">Ionic Framework</a>, <a href="https://onsen.io/" target="_blank">Onsen UI</a>,
Expand All @@ -33,34 +33,58 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Getting started</h2>
appearance of the app based on the platform.
</p>
<p>
The Installation is very simple, but first you need to install <a href="https://nodejs.org" target="_blank">Node.js</a>.
The Installation is straightforward, but first, you need to install <a href="https://nodejs.org" target="_blank">Node.js</a>.
Then, install Cordova via terminal <strong>npm install -g cordova</strong>(add sudo if you are in Linux).
</p>
<p>
After that, just execute the following command in your terminal:
After that, just execute the command in your terminal:
</p>
<pre>npm install -g mobileui</pre>
<p>To check if mobileui is installed or not, open the terminal and type <strong>mobileui</strong></p>
<p>To check if MobileUI is installed or not, open the terminal and type <strong>mobileui</strong></p>


<h4>Simple Example</h4>
<h4><strong>Simple Example</strong></h4>

<p>Let's create a Simple Example using mobileui</p>
<p>Let's create a Simple Example using MobileUI and Cordova</p>

<p>Open Terminal from desired location and following command is executed</p>
<p> Create a cordova Project using command - <strong>cordova create apptest</strong> </p>
<p> Change the directory to your project - <strong>cd apptest</strong> </p>
<p> For sample we can take <strong>header component</strong> as example, so install header component - <strong>mobileui install header</strong> </p>
<p> After that add the below code in index.html
<pre>
&lt;div class="header purple"&gt;
&lt;button class="left icon ion-navicon" name="button"&gt;&lt;/button&gt;
&lt;h1&gt;Application title&lt;/h1&gt;
&lt;/div&gt;
</pre>
</p>
<p> To preview this run: <strong>mobileui preview</strong> </p>
<p>By default an HTTP server will run on port 8080, but you can change it by passing the <code>--port</code> parameter with the desired port, eg <code>--port 8000</code></p>
<p>Commands:</p>
<pre>
cordova create apptest
cd apptest
mobileui install template cordova-blank
mobileui install header
mobileui preview
</pre>
<p>Let's check the commands:</p>
<ul>
<li>
<strong>cordova create apptest</strong> - Create a cordova Project
</li>
<li>
<strong>cd apptest</strong> - Change the directory to your project
</li>
<li>
<strong>mobileui install template cordova-blank</strong> - Clears the sample files created by the Cordova
</li>
<li>
<strong>mobileui install header</strong> - For sample we can take header component
</li>
<li>
<strong>mobileui preview</strong> - Emulates the app to run in the browser
</li>
</ul>

<p> After that add the below code in index.html </p>
<textarea class="bind-just-code" mode="text/html">
<div class="header purple">
<button class="left icon ion-navicon" name="button"></button>
<h1>Application title</h1>
</div></textarea>

<p>By default, an HTTP server will run on port 8080, but you can change it by passing the <code>--port</code> parameter with the desired port, eg <code>--port 8000</code></p>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
Expand Down
10 changes: 5 additions & 5 deletions button/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Button</h2>
You can use <a href="#colors">colors theme</a> and <a href="#icons">icons</a> in button. If you need use base mode just add theme color name,
you can alter border color using class <code>border-[COLOR]</code>, alter text color using class <code>text-[COLOR]</code> and add radius border using class <code>radius</code>.
</p>
<p>For use icon in button you need add class <code>icon-text</code> and you can use diferents size, see the examples below.</p>
<p>For use icon in button you need add class <code>icon-text</code> and you can use diferent size, see the examples below.</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
Expand All @@ -52,9 +52,9 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Button</h2>
<p>Social login:</p>
<button class="blue icon-text">
<i class="icon ion-social-facebook"></i>
Login width Facebook
Login with Facebook
</button>
<p>Diferent sizes:</p>
<p>Different sizes:</p>
<button class="red icon-text big">
<i class="icon ion-trash-b"></i>
Delete
Expand All @@ -70,7 +70,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Button</h2>
<button class="teal-700 border-teal-700">Middle</button>
<button class="teal border-teal-700 radius-right">Right</button>
</div>
<p>And diferent size in group:</p>
<p>And different size in group:</p>
<div class="buttons-group full small">
<button class="red border-red-600 radius-left">Left</button>
<button class="red border-red-600">Middle</button>
Expand Down
2 changes: 1 addition & 1 deletion chart-bar/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Chart Bar</h2>
This component provides an efficient and customizable bar chart using the capabilities of the <code>base</code>.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
Expand Down
2 changes: 1 addition & 1 deletion chartjs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Chart.js</h2>

</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install chartjs</pre>
<p>
Expand Down
2 changes: 1 addition & 1 deletion cover/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Cover</h2>
its container without losing its proportions. You can also place additional content, like text or image,
on top of the image.</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
Expand Down
6 changes: 3 additions & 3 deletions grid/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@
<body class="content">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Grid</h2>
<p>MobileUI use <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module</a> standard.</p>
<p>MobileUI uses <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module</a> standard.</p>
<p>
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.
</p>
<p>
The <code>row</code> classname is used to designate, surprise, a row, and <code>col</code> is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't
The <code>row</code> class name is used to designate, surprise, a row, and <code>col</code> is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't
matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automatically.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install grid</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
Expand Down
4 changes: 2 additions & 2 deletions header/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Header</h2>
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.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code> and <code>button</code>.
Expand Down Expand Up @@ -179,7 +179,7 @@ <h2>Rosangela Oliveira</h2>
</div>
<div class="footer sub green-800">
<div class="title">
All itens is ready!
All items are ready!
</div>
</div>
<p>Content here.</p>
Expand Down
4 changes: 2 additions & 2 deletions include/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Include</h2>
<p>
This component include a external file HTML in your page.
This component include an external file HTML in your page.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install include</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
Expand Down
6 changes: 3 additions & 3 deletions input/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Input</h2>
Inputs are essential in an application to collect user data, so we need to worry about the layout and MobileUI does it for you.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code> and <code>list</code>.
Expand Down Expand Up @@ -195,7 +195,7 @@ <h2>Show on Home Screen</h2>
</div>
</div>
<div class="item grey-200 text-grey text-light">
<p>Show new of the app on your Hone Screen.</p>
<p>Show new of the app on your Home Screen.</p>
</div>
<div class="item">
<h2>Auto Backup</h2>
Expand All @@ -204,7 +204,7 @@ <h2>Auto Backup</h2>
</div>
</div>
<div class="item grey-200 text-grey text-light">
<p>Allow backup of the app in background when you not used.</p>
<p>Allow backup of the app in the background when you not used.</p>
</div>
<div class="item">
<h2>Allow Remove App</h2>
Expand Down
2 changes: 1 addition & 1 deletion jquery/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">jQuery</h2>
If you use jQuery, you already know how to use Zepto.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install jquery</pre>
<p>See the Zepto documentation and its resources at <a href="http://zeptojs.com/" target="_blank">zeptojs.com</a>.</p>
Expand Down
6 changes: 3 additions & 3 deletions list/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">List</h2>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
Expand Down Expand Up @@ -53,7 +53,7 @@ <h2>Vanessa brown</h2>
</div>
</div></textarea>
<p>
You can put images and icones in list.
You can put images and icons in list.
</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
Expand Down Expand Up @@ -101,7 +101,7 @@ <h2>Vanessa brown</h2>
<textarea class="bind-code" mode="text/html" replace="body,div">
<body class="padding grey-100">
<h1 class="text-bold">List of contacts</h1>
<p>List of your contacts save in this deivce.</p>
<p>List of your contacts saved in this device.</p>
<div class="list radius white">
<div class="item">
<div class="left">
Expand Down
2 changes: 1 addition & 1 deletion loading/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Loading</h2>
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install loading</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
Expand Down
4 changes: 2 additions & 2 deletions menu/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Menu</h2>
Menu adapts to the appropriate style based on the platform.
</p>
<p>
For use this component you need install with command:
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code> and <code>list</code>.
Expand Down Expand Up @@ -200,7 +200,7 @@ <h2 class="strong">Carter Hudson</h2>
</div>
</div>
</body></textarea>
<p>For advanced mode you can listener the event <code>openMenu</code> and <code>closeMenu</code>.</p>
<p>For advanced mode you can listen to the event <code>openMenu</code> and <code>closeMenu</code>.</p>
<textarea class="bind-just-code" mode="text/javascript">
document.addEventListener('openMenu', function(e){
//It does something when the menu is opened
Expand Down
2 changes: 1 addition & 1 deletion mobileuijs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">MobileUI.JS</h2>
This component is a simple library for manipulating data, states of elements and Ajax request in JavaScript.
</p>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install mobileuijs</pre>
<p>
Expand Down
2 changes: 1 addition & 1 deletion popover/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Popover</h2>
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install popover</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
Expand Down
2 changes: 1 addition & 1 deletion progress-circle/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Progress Circle</h2>
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install progress-circle</pre>
<table class="tableDoc">
Expand Down
2 changes: 1 addition & 1 deletion progress-semicircle/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Progress Semicircle</h2>
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<p>
For use this components you need install with command:
To use this component you need install with the command:
</p>
<pre>mobileui install progress-semicircle</pre>
<table class="tableDoc">
Expand Down
Loading

0 comments on commit c4326ef

Please sign in to comment.