TheBestTutorials.css - Building a Mobile App
☰ Movies 2014
Frozen
The response to the animations was ridiculous.
The Fault in Our Stars
Touching, gripping and genuinely well made.
The Avengers
A huge success for Marvel and Disney.
Create a Basic Mobile Page
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<body style="max-width:400px">
<!-- Content goes here -->
</body>
</html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<body style="max-width:400px">
<!-- Content goes here -->
</body>
</html>
The style attribute "max-width:400px" simulates a small phone. It will be removed later.
Add Content
Example (using classic HTML elements)
<div class="subhodaya-container">
<h1>Movies 2014</h1>
</div>
<div class="subhodaya-row">
<div class="subhodaya-col s3">
<img src="img_avatar.jpg">
</div>
<div class="subhodaya-col s9 subhodaya-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="subhodaya-container">
<h3>Footer</h3>
</div>
Try It Yourself »
<h1>Movies 2014</h1>
</div>
<div class="subhodaya-row">
<div class="subhodaya-col s3">
<img src="img_avatar.jpg">
</div>
<div class="subhodaya-col s9 subhodaya-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="subhodaya-container">
<h3>Footer</h3>
</div>
Example (using semantic HTML elements)
<header class="subhodaya-container">
<h1>Header</h1>
</header>
<div class="subhodaya-row">
<div class="subhodaya-col s3">
<img src="img_avatar.jpg">
</div>
<div class="subhodaya-col s9 subhodaya-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="subhodaya-container">
<h3>Footer</h3>
</footer>
</body>
</html>
Try It Yourself »
<h1>Header</h1>
</header>
<div class="subhodaya-row">
<div class="subhodaya-col s3">
<img src="img_avatar.jpg">
</div>
<div class="subhodaya-col s9 subhodaya-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="subhodaya-container">
<h3>Footer</h3>
</footer>
</body>
</html>
Add a Color Theme
Examples
<link rel="stylesheet" href="http://tutorials/lib/subhodaya-theme-blue.css">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya-theme-red.css">
Try It Yourself »
Read more about color-themes in TheBestTutorials.css Color Themes.
Add Your Icon Library
Example
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>
<i class="fa fa-bars"></i> Header
</h1>
Try It Yourself »
<h1>
<i class="fa fa-bars"></i> Header
</h1>
This example uses Font Awesome icons. You can use any icon library.
Add More Style
Example
<img class="subhodaya-cicle" src="img_avatar.jpg" alt="avatar">
<h3 class="subhodaya-text-theme">Frozen</h3>
Try It Yourself »
<h3 class="subhodaya-text-theme">Frozen</h3>
Add Side Navigation
Example
<nav class="subhodaya-sidenav subhodaya-card-2
subhodaya-white" style="width:30%">
<div class="subhodaya-red">
<a href="javascript:void(0)" onclick="subhodaya_close()"
class="subhodaya-closenav subhodaya-right subhodaya-xlarge">X</a>
<div class="subhodaya-padding-large subhodaya-center">
<img class="subhodaya-circle" src="img_avatar.jpg" alt="avatar">
</div>
</div>
<br>
<a href="#">Home</a>
<a href="#">Friends</a>
<a href="#">Messages</a>
</nav>
<script>
function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
Try It Yourself »
<div class="subhodaya-red">
<a href="javascript:void(0)" onclick="subhodaya_close()"
class="subhodaya-closenav subhodaya-right subhodaya-xlarge">X</a>
<div class="subhodaya-padding-large subhodaya-center">
<img class="subhodaya-circle" src="img_avatar.jpg" alt="avatar">
</div>
</div>
<br>
<a href="#">Home</a>
<a href="#">Friends</a>
<a href="#">Messages</a>
</nav>
<script>
function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
Hide the Side Navigation
Example
<nav class="subhodaya-sidenav subhodaya-card-2 subhodaya-white" style="width:30%;display:none">
Try It Yourself »
Fixed Navigation, Header and Footer
Example
<header
class="subhodaya-top">
<nav class="subhodaya-top">
<footer class="subhodaya-bottom">
Try It Yourself »
<nav class="subhodaya-top">
<footer class="subhodaya-bottom">
