Revised code

Improved code structure, @see https://getuikit.com/docs/form. Added correct textdomain for i18n functions. Revised according to WordPress Coding Standards. Set input field width to "uk-form-width-large" for usablity. Updated global border color to ensure visiblity on white background.

Recompile site.scss after update.

comments.php

@@ -24,15 +24,16 @@
 
 	<?php
 	// You can start editing here -- including this comment!
-	if ( have_comments() ) : ?>
+	if ( have_comments() ) :
+		?>
 		<h2 class="comments-title">
 			<?php
 			$comment_count = get_comments_number();
 			if ( 1 === $comment_count ) {
 				printf(
 					/* translators: 1: title. */
 					esc_html_e( 'One thought on &ldquo;%1$s&rdquo;', 'themewpugph' ),
-					'<span>' . get_the_title() . '</span>'
+					'<span>' . esc_html( get_the_title() ) . '</span>'
 				);
 			} else {
 				printf( // WPCS: XSS OK.
@@ -49,35 +50,99 @@
 
 		<ol class="comment-list">
 			<?php
-				wp_list_comments( array(
-					'walker'		=> new ThemeWPUGPH_Comments(),
-					'style'      		=> 'ol',
-					'short_ping' 		=> true,
-					'avatar_size'		=> 50,
-				) );
+			wp_list_comments(
+				array(
+					'walker'      => new ThemeWPUGPH_Comments(),
+					'style'       => 'ol',
+					'short_ping'  => true,
+					'avatar_size' => 50,
+				)
+			);
 			?>
 		</ol><!-- .comment-list -->
 
-		<?php the_comments_navigation();
+		<?php
+		the_comments_navigation();
 
-		// If comments are closed and there are comments, let's leave a little note, shall we?
-		if ( ! comments_open() ) : ?>
+			// If comments are closed and there are comments, let's leave a little note, shall we?
+		if ( ! comments_open() ) :
+			?>
 			<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'themewpugph' ); ?></p>
-		<?php
+			<?php
 		endif;
 
 	endif; // Check for have_comments().
 
-	comment_form( array(
-		'class_submit' 			=> 'uk-button uk-button-primary',
-		'comment_field'     => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label> <textarea id="comment" class="uk-width-1-1" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p>',
-		'fields' 						=> array(
-														'author' => '<p class="comment-form-author uk">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" class="uk-width-1-1" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" /></p>',
-														'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" class="uk-width-1-1" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" /></p>',
-														'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' . '<input id="url" class="uk-width-1-1" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
-													),
-		'submit_button'     => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
-	));
+	$field_required = $req ? 'required' : '';
+
+	// Comment field.
+	$comment_label = _x( 'Comment', 'noun', 'themewpugph' );
+	$comment_field = <<<UIKIT3
+<div class="uk-margin">
+	<label class="uk-form-label" for="comment">
+		{$comment_label}
+	</label>
+	<div class="uk-form-controls">
+		<textarea id="comment" class="uk-textarea uk-form-width-large" name="comment" required></textarea>
+	</div>
+</div>
+UIKIT3;
+
+	// Author field.
+	$author_label = __( 'Name', 'themewpugph' ) . ( $req ? '<span class="required">*</span>' : '' );
+	$author_value = esc_attr( $commenter['comment_author'] );
+	$author_field = <<<UIKIT3
+<div class="uk-margin">
+	<label class="uk-form-label" for="author">
+		{$author_label}
+	</label>
+	<div class="uk-form-controls">
+		<input id="author" class="uk-input uk-form-width-large" name="author" type="text" value="{$author_value}" {$field_required} />
+	</div>
+</div>
+UIKIT3;
+
+	// Email field.
+	$email_label = __( 'Email', 'themewpugph' ) . ( $req ? '<span class="required">*</span>' : '' );
+	$email_value = esc_attr( $commenter['comment_author_email'] );
+	$email_field = <<<UIKIT3
+<div class="uk-margin">
+	<label class="uk-form-label" for="author">
+		{$email_label}
+	</label>
+	<div class="uk-form-controls">
+		<input id="email" class="uk-input uk-form-width-large" name="email" type="email" value="{$email_value}" {$field_required} />
+	</div>
+</div>
+UIKIT3;
+
+	// URL field.
+	$url_label = __( 'Website', 'themewpugph' );
+	$url_value = esc_attr( $commenter['comment_author_url'] );
+	$url_field = <<<UIKIT3
+<div class="uk-margin">
+<label class="uk-form-label" for="author">
+	{$url_label}
+</label>
+<div class="uk-form-controls">
+	<input id="url" class="uk-input uk-form-width-large" name="url" type="url" value="{$url_value}" />
+</div>
+</div>
+UIKIT3;
+
+	comment_form(
+		array(
+			'class_form'    => 'uk-form-stacked',
+			'class_submit'  => 'uk-button uk-button-primary',
+			'comment_field' => $comment_field,
+			'fields'        => array(
+				'author' => $author_field,
+				'email'  => $email_field,
+				'url'    => $url_field,
+			),
+			'submit_button' => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
+		)
+	);
 	?>
 
 </div><!-- #comments -->

scss/_import-mixins.scss

@@ -0,0 +1,3 @@
+@mixin hook-form {
+    border: 1px solid $global-muted-color;
+}

scss/variables.scss

@@ -82,7 +82,7 @@ $global-danger-background:                       #f0506e !default;
 //
 
 $global-border-width:                            1px !default;
-$global-border:                                  #e5e5e5 !default;
+$global-border:                                  $global-muted-color !default;
 
 //
 // Box-Shadows