<!DOCTYPE html>
<html lang="en" ng-app="justify" ng-controller="JustifyController">
  <head>
    <meta charset="utf-8">
    <!-- basic info -->
    <title>Justify</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <h1>Justify</h1>

    <form>
      <fieldset>
        <label for="situation">Situation</label>
        <input id="situation" type="text" placeholder="do something useful" ng-model="situation">

        <button ng-click="generate()">Generate</button>
      </fieldset>
    </form>

    <p>I would {{situation || defaultSituation}}, but that requires {{noun}}.</p>

    <!-- scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="app.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en" ng-app="justify" ng-controller="JustifyController">
  <head>
    <meta charset="utf-8">
    <!-- basic info -->
    <title>Justify</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css -->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure.css">
  </head>

  <body>
    <h1>Justify</h1>

    <form class="pure-form pure-form-aligned">
      <fieldset>
        <label for="situation">Situation</label>
        <input id="situation" type="text" placeholder="do something useful" ng-model="situation">

        <button class="pure-button pure-button-primary" ng-click="generate()">Generate</button>
      </fieldset>
    </form>

    <p>I would {{situation || defaultSituation}}, but that requires {{noun}}.</p>

    <!-- scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Use Pure for the form
Use Pure for the form
