Introduction
This chapter demonstrates about the W3.CSS Mobile App which is known as building the mobile app using w3.CSS Classes and following are the concepts covered in this chapter.
- Building A Mobile App
Description
In order to build a Mobile App user need to build it one by one initially user need to build a basic page then adding the icons and then styling the web page user need to follow the same procedure for every web page or Mobile App. The image below demonstrates to creating the Basic Mobile Page as shown.
In order to build the Basic Mobile App follow the below procedure as shown.
Creating a Basic Mobile Page
In W3.CSS user can easily create the Basic mobile page in which initially user need to create Basic mobile page and add some content to the page by using the w3-container class. The code below demonstrates to creating the web page and add some content as shown.
[html]
<!DOCTYPE html>
<html>
<title>SPLESSONS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body style="max-width:400px">
<div class="w3-container">
<h1>Tutorials</h1>
</div>
<div class="w3-container">
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>HTML</h3>
<p>Hyper Text Markup Language.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splesson.png" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>CSS</h3>
<p>Cascading Style Sheets.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>W3.CSS</h3>
<p>Cascading style sheets developed by W3C.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Adding Color Theme
After creating the web page then user need to styling the web page by adding some themes those themes are available in w3.CSS library user need to link the library file to the html code. Color themes are available in W3.CSS Library user can use those files. The code below demonstrates to Adding the Color Themes to the basic Mobile Page as shown below.
[html]
<!DOCTYPE html>
<html>
<title>SPLESSONS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<body style="max-width:400px">
<header class="w3-container w3-card-4 w3-theme">
<h1>Header</h1>
</header>
<div class="w3-container">
<h1>Tutorials</h1>
</div>
<div class="w3-container">
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>HTML</h3>
<p>Hyper Text Markup Language.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splesson.png" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>CSS</h3>
<p>Cascading Style Sheets.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>W3.CSS</h3>
<p>Cascading style sheets developed by W3C.</p>
</div>
</div>
<footer class="w3-container w3-theme">
<h3>Footer</h3>
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Adding Icon Library
User can add Icon library to the basic mobile App. User need to add link to the HTML code The code below demonstrates the Adding Icon Library as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body style="max-width:400px">
<header class="w3-container w3-card-4 w3-theme">
<h1><i class="fa fa-bars"></i> Header</h1>
</header>
<div class="w3-container">
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>HTML</h3>
<p>Hyper Text Markup Language.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splesson.png" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>CSS</h3>
<p>Cascading Style Sheets.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3>W3.CSS</h3>
<p>Cascading style sheets developed by W3C.</p>
</div>
</div>
<footer class="w3-container w3-theme">
<h3>Footer</h3>
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Adding More Styles
User can add more styles to the Basic mobile page like user can make the image as circled image and more colors to the text and user can get the different effects by adding more effects The code below demonstrates to adding the More styles as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body style="max-width:400px">
<header class="w3-container w3-card-4 w3-theme">
<h1><i class="fa fa-bars"></i> Header</h1>
</header>
<div class="w3-container">
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img class="w3-circle"src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3 class="w3-text-red">HTML</h3>
<p>Hyper Text Markup Language.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img class="w3-circle" src="splesson.png" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3 class="w3-text-red">CSS</h3>
<p>Cascading Style Sheets.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img class="w3-circle" src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3 class="w3-text-red">W3.CSS</h3>
<p>Cascading style sheets developed by W3C.</p>
</div>
</div>
<footer class="w3-container w3-theme">
<h3>Footer</h3>
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Hiding Side Navigation
User can also hide the side navigation bar to give the better look to the Basic mobile page by using the w3-sidenav class. The code below demonstrates Hiding side navigation as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body style="max-width:600px">
<nav class="w3-sidenav w3-card-2 w3-white" style="width:30%;display:none" id="mySidenav">
<div class="w3-container w3-theme-d2">
<span onclick="w3_close()" class="w3-closenav w3-right w3-xlarge">x</span>
<br>
<div class="w3-padding w3-center">
<img class="w3-circle" src="img_avatar.jpg" alt="avatar" style="width:75%">
</div>
</div>
<br>
<a href="#">splessons</a>
<a href="#">tutorials</a>
<a href="#">About us</a>
</nav>
<header class="w3-container w3-card-4 w3-theme">
<h1>
<i class="w3-opennav fa fa-bars" onclick="w3_open()"></i>
SPLESSONS
</h1>
</header>
<div class="w3-container" onclick="w3_close()">
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3 class="w3-text-red">HTML</h3>
<p>Hyper Text Markup Language.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3 class="w3-text-red">CSS</h3>
<p>Cascading Style Sheets.</p>
</div>
</div>
<hr>
<div class="w3-row">
<div class="w3-col s3">
<img src="splessons.jpg" style="width:100%">
</div>
<div class="w3-col s9 w3-container">
<h3 class="w3-text-red">W3.CSS</h3>
<p>Cascading style sheets developed by W3C.</p>
</div>
</div>
<footer class="w3-container w3-theme w3-margin-top">
<h3>Footer</h3>
</footer>
<script>
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Creating a Basic Mobile Page.
- Adding Color Theme
- Adding Icon Library
- Adding More Styles
- Hiding Side Navigation
Key Points
- User can hide the side navigation in a mobile page.
- User can give own styles to the web page.
- User need to give the reference of W3.CSS Library.