Include CSS from pure.css and update styles and markup a bit.

mockup/index.html

@@ -38,17 +38,18 @@
                 <a class="chatbox-btn close-chatbox-button icon-close"></a>
             </div>
             <div class="controlbox-panes">
-                <div id="login-dialog" class="controlbox-pane"><form id="converse-login" method="post">
+                <div id="login-dialog" class="controlbox-pane">
+                <form class="pure-form pure-form-stacked" id="converse-login" method="post">
                     <label>XMPP Username:</label>
-                    <input type="username" name="jid" placeholder="user@server">
+                    <input type="text" name="jid" placeholder="user@server">
                     <label>Password:</label>
                     <input type="password" name="password" placeholder="password">
-                    <input class="submit" type="submit" value="Log In">
+                    <input class="pure-button submit" type="submit" value="Log In">
                     <span class="conn-feedback"></span>
                 </form>
                 </div>
                 <div id="register" class="controlbox-pane" style="display: none;">
-                    <form id="converse-register">
+                    <form id="converse-register" class="pure-form">
                         <span class="reg-feedback"></span>
                         <label>Your XMPP provider's domain name:</label>
                         <input type="text" name="domain" placeholder=" e.g. conversejs.org">
@@ -56,7 +57,7 @@
                             Tip: A list of public XMPP providers is available 
                             <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
                         </p>
-                        <input class="submit" type="submit" value="Fetch registration form">
+                        <input class="pure-button submit" type="submit" value="Fetch registration form">
                     </form>
                 </div>
             </div>

sass/_chatbox.scss

@@ -86,7 +86,7 @@
                 span {
                     display: inline-block;
                     &.chat-msg-author {
-                        max-width: 100px;
+                        max-width: 100%;
                         font-weight: bold;
                         white-space: nowrap;
                         float: left;

sass/_controlbox.scss

@@ -75,15 +75,6 @@
         #converse-register, #converse-login {
             margin: 2em 1em 1em 1em;
             background: white;
-
-            .login-submit, .submit {
-                height: 30px;
-                padding: 0px;
-                font-size: $font-size;
-            }
-            .submit {
-                margin: 1em 0;
-            }
             .login-anon {
                 height: auto;
                 white-space: normal;
@@ -101,8 +92,7 @@
             input {
                 width: 100%;
                 height: 30px;
-                margin: 5px 0 10px 0;
-                padding-left: 0.5em;
+                margin: 1em 0;
             }
         }
         #users {

sass/_normalize.scss

@@ -1,4 +1,10 @@
 #conversejs {
+    @import "pure/base";
+    @import "pure/grids";
+    @import "pure/forms";
+    @import "pure/buttons";
+    @import "pure/menus";
+
     @include box-sizing(border-box);
     *, *:before, *:after {
         @include box-sizing(border-box);

src/templates/login_panel.html

@@ -1,18 +1,18 @@
-<form id="converse-login" method="post">
+<form class="pure-form pure-form-stacked" id="converse-login" method="post">
     {[ if (auto_login) { ]}
         <span class="spinner login-submit"/>
     {[ } ]}
     {[ if (!auto_login) { ]}
         {[ if (authentication == LOGIN) { ]}
             <label>{{label_username}}</label>
-            <input name="jid" placeholder="{{placeholder_username}}">
+            <input type="text" name="jid" placeholder="{{placeholder_username}}">
             <label>{{label_password}}</label>
             <input type="password" name="password" placeholder="{{placeholder_password}}">
             <input class="submit" type="submit" value="{{label_login}}">
             <span class="conn-feedback"></span>
         {[ } ]}
         {[ if (authentication == ANONYMOUS) { ]}
-            <input type="submit" class="submit login-anon" value="{{label_anon_login}}"/>
+            <input type="pure-button submit" class="submit login-anon" value="{{label_anon_login}}"/>
         {[ } ]}
         {[ if (authentication == PREBIND) { ]}
             <p>Disconnected.</p>

src/templates/register_panel.html

@@ -1,7 +1,7 @@
-<form id="converse-register">
+<form id="converse-register" class="pure-form">
     <span class="reg-feedback"></span>
     <label>{{label_domain}}</label>
     <input type="text" name="domain" placeholder="{{domain_placeholder}}">
     <p class="form-help">{{help_providers}} <a href="{{href_providers}}" class="url" target="_blank">{{help_providers_link}}</a>.</p>
-    <input class="submit" type="submit" value="{{label_register}}">
+    <input class="pure-button submit" type="submit" value="{{label_register}}">
 </form>