AngularJS W3.CSS: Modern UI, Zero Fuss - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Makes Their App Look Awesome

Scene: A Client Wants a Nicer UI

The StartApp Task Manager works well, but the client has a new request:

“Can you make the app look sleek and modern—without loading Bootstrap or writing tons of CSS?”

Lina (Designer): “I want a beautiful UI that just works out of the box. I’ve heard of W3.CSS. It’s light, easy, and works perfectly with AngularJS.”

Sara (Junior Dev): “Great! W3.CSS classes are simple to add, and AngularJS bindings work seamlessly with them.”

1. Add W3.CSS to Your Project

Just include the stylesheet in your HTML’s <head>:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

2. Build a Stylish AngularJS Table

Controller Data:

$scope.tasks = [
  { name: "Design logo", status: "open" },
  { name: "Setup database", status: "done" },
  { name: "Write docs", status: "open" }
];

HTML Table:

<table class="w3-table w3-bordered w3-striped w3-card-4">
  <tr>
    <th>Task</th>
    <th>Status</th>
  </tr>
  <tr ng-repeat="t in tasks">
    <td>{{ t.name }}</td>
    <td>
      <span class="w3-tag" ng-class="{'w3-green': t.status=='done', 'w3-yellow': t.status=='open'}">
        {{ t.status | uppercase }}
      </span>
    </td>
  </tr>
</table>
  • Instantly get a card-like, responsive, stylish table!

3. Beautiful Forms with W3.CSS

Form Example:

<form class="w3-container w3-card-4 w3-light-grey w3-text-blue" style="max-width:400px">
  <h3 class="w3-center">Register</h3>
  <div class="w3-section">
    <label>Name</label>
    <input class="w3-input w3-border" ng-model="user.name" required>
  </div>
  <div class="w3-section">
    <label>Email</label>
    <input class="w3-input w3-border" ng-model="user.email" required>
  </div>
  <button class="w3-button w3-blue w3-margin-bottom" ng-click="register()">Submit</button>
</form>

4. Live Preview and Status Alerts

Lina: “Let’s show a confirmation with W3.CSS alerts.”

<div class="w3-panel w3-green" ng-show="success">
  Registration successful!
</div>
<div class="w3-panel w3-red" ng-show="error">
  Please fill in all required fields.
</div>

5. Responsive Layouts: W3.CSS Grids

Sample Responsive Card Grid:

<div class="w3-row-padding">
  <div class="w3-third" ng-repeat="project in projects">
    <div class="w3-card-4 w3-margin w3-padding">
      <h4>{{ project.name }}</h4>
      <p>{{ project.desc }}</p>
    </div>
  </div>
</div>
  • w3-row-padding and w3-third instantly create a flexible, responsive grid.

6. Team Discussion: Why Use W3.CSS with AngularJS?

  • Sara: “No JavaScript conflicts—just use the class names for instant style.”
  • Lina: “Lightweight, beautiful, and easy to tweak. Great for demos and production!”
  • Mike (Team Lead): “Faster prototyping, happy clients, and less to maintain.”

7. Full Example: W3.CSS + AngularJS App

<!DOCTYPE html>
<html>
<head>
  <title>StartApp with W3.CSS</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="taskApp" ng-controller="taskCtrl" class="w3-container">
  <h2 class="w3-text-blue">Task Manager</h2>
  <form class="w3-container w3-light-grey w3-card-4 w3-margin-bottom" style="max-width:500px">
    <div class="w3-section">
      <label>New Task</label>
      <input class="w3-input w3-border" ng-model="newTask" placeholder="Task name">
    </div>
    <button class="w3-button w3-blue w3-margin-bottom" ng-click="addTask()">Add Task</button>
  </form>
  <table class="w3-table w3-bordered w3-striped w3-card-4">
    <tr>
      <th>Task</th>
      <th>Status</th>
    </tr>
    <tr ng-repeat="t in tasks">
      <td>{{ t.name }}</td>
      <td>
        <span class="w3-tag" ng-class="{'w3-green': t.status=='done', 'w3-yellow': t.status=='open'}">
          {{ t.status | uppercase }}
        </span>
      </td>
    </tr>
  </table>
</div>
<script>
angular.module('taskApp', []).controller('taskCtrl', function($scope) {
  $scope.tasks = [
    { name: "Design logo", status: "open" },
    { name: "Setup database", status: "done" },
    { name: "Write docs", status: "open" }
  ];
  $scope.addTask = function() {
    if ($scope.newTask) {
      $scope.tasks.push({ name: $scope.newTask, status: "open" });
      $scope.newTask = "";
    }
  };
});
</script>
</body>
</html>

Key Takeaways

  • W3.CSS and AngularJS combine for instant, beautiful, responsive apps—no JS conflicts.
  • Update UI instantly with Angular’s data binding and W3.CSS classes.
  • Build professional UIs for demos and production—without heavy frameworks or custom CSS.

Team Conclusion

Lina: “I can finally make our app beautiful and modern—no extra JavaScript or design headaches!”

Mike: “Let’s ship this to the client, and try adding W3.CSS modals or navbars next!”

Try these examples in the [W3Schools AngularJS + W3.CSS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_w3css).

⚠️ **GitHub.com Fallback** ⚠️