AngularJS and W3.CSS
What is W3.CSS?
- W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS framework.
- Its aim is to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and Desktop
- W3.CSS was designed to be a high quality alternative to Bootstrap and is developed by w3school.com
What is angularJS?
- AngularJS is a structural framework for dynamic web apps which extends HTML with new attributes.
- It provides automated testing and is perfect for single page application
- It gives application a clean structure and lot of reusable code.
Most important part of W3.CSS :
- w3-container: adds a 16px left and right padding to any HTML element.
- w3-fontSize : w3-tiny, w3-small, w3-medium(default), w3-large, w3-xlarge, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.
- w3-text: It provides css features like alignment, opacity, shadow, special effect.
- w3-input: It provides input cards, coloured labels, border, checkbox, radio buttons, etc
Example:
html
<!DOCTYPE html><html><head> <link rel="stylesheet" <script src= </script> <style> .pad { margin: 0 0 0 0; } </style></head><body ng-app="myApp" ng-controller="myCtrl"> <div class="w3-container "> <p class="w3-jumbo w3-text-green pad" align="center">GeeksforGeeks</p> <p class="w3-large w3-text-green pad" align="center" > A computer science portal for geeks</p> <form> <h3 align="center" > Enter user details </h3> <label>First Name:</label> <input class="w3-input w3-border w3-round-xxlarge" type="text" ng-model="fname" placeholder="First Name"></br> <label>Last Name:</label> <input class="w3-input w3-border w3-round-xxlarge" type="text" ng-model="lname" placeholder="Last Name"></br> <label>Email id:</label> <input class="w3-input w3-border w3-round-xxlarge" type="email" ng-model="mail" placeholder="Email id"></br> <label>Password:</label> <input class="w3-input w3-border w3-round-xxlarge" type="password" ng-model="pass" placeholder="Password"></br> <p align="center"> <button class="w3-btn w3-green w3-ripple " > Save </button></p> </form> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.fname = "Fname"; $scope.lname = "Lname"; $scope.mail = "user@geeksforgeeks.com"; $scope.pass = "password"; }); </script></body></html> |
Output:
GeeksforGeeks login page
.png)
