- W3.CSS is a new style sheet library for styling HTML pages.
- W3.CSS provides responsiveness across platform and optimized size for Mobile applications.
- In this Demo, "We will start with W3.CSS library with some example".
- In my previous post we have learnt AppML library by W3.We will use AppML in this demo as JSON data source.
- To Demonstrate W3.CSS we have created W3CSSDemo project.The directory structure of W3CSSDemo is as follows:-
- The W3.CSS library can be downloaded from the following link:-
http://www.w3schools.com/lib/w3.css
- We have downloaded and locally used W3.CSS and AppML.JS file.
- The Student.json file contains the list of student detail which will be used by the table element present inside index.html file.The content of Student.json file are as follows:-
{
"list":[
{"name":"Sandeep", "country":"India","subject":"Computer"},
{"name":"John", "country":"UK","subject":"Geography"},
{"name":"Miller", "country":"US","subject":"Computer"}
]
}
- The index.html file contains example for W3.CSS classes for card, table and list element.The code content of index.html are as follows:-
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
</head>
<body class="w3-container w3-center" >
<h1>W3.CSS Table and AppML data source Example</h1>
<div appml-data="students.json" class="w3-table w3-striped w3-border">
<table border="1">
<tr>
<th>Name</th>
<th>Country</th>
<th>Subject</th>
</tr>
<tr appml-repeat="list">
<td>{{name}}</td>
<td>{{country}}</td>
<td>{{subject}}</td>
</tr>
</table>
</div>
<div class="w3-row">
<h1>W3.CSS Card Example</h1>
<div class="w3-card w3-third w3-green w3-padding-jumbo">
<p>Hello Developers, This is a w3-card
with w3-green as background.
</p>
</div>
</div>
<h1>W3.CSS List Example</h1>
<ul class="w3-ul w3-quarter w3-teal">
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
</ul>
</body>
<script src="appml.js"></script>
</html>
- The output of this demo looks like following screenshot.
- The demo code can be downloaded from the following link:-
https://github.com/saan1984/W3CSSDemo
Sandeep Patel