V3 amends

assets/scripts/scripts.js

@@ -4,10 +4,12 @@ import $ from 'jquery';
  * Mobile navigation toggle
  * @param  {mixed} event
  */
+
 const toggleMenu = (event) => {
     event.preventDefault();
     $('.js-menu-toggle, .nav--header').toggleClass('open');
     $('.header').toggleClass('menu-open');
 };
+
 $('.js-menu-toggle').on('click', toggleMenu);
 

assets/styles/base/_base.scss

@@ -16,18 +16,20 @@ p,
 hr,
 ul,
 ol,
-dl,
+dl {
-address {
     margin-bottom: $base-spacing-unit;
+    &:last-child {
+        margin-bottom: 0;
+    }
 }
 
 /**
  * Basic styles for links
  */
+
 a {
     color: $brand-colour;
     text-decoration: none;
-
     &:hover {
         color: $base-colour;
         text-decoration: underline;
@@ -45,6 +47,7 @@ a[href^="tel"] {
 /**
  * Rules
  */
+
 hr {
     height: 1px;
     background-color: $base-colour;

assets/styles/base/_forms.scss

@@ -1,6 +1,3 @@
-/**
- * Blanket input styles for normalisation
- */
 *:focus {
     outline: 0;
 }
@@ -12,9 +9,9 @@ textarea {
     border: solid 1px $base-colour;
     border-radius: 0;
     color: $base-colour;
-  line-height: ($base-spacing-unit * 1.5);
+    line-height: $base-spacing-unit * 1.5;
-  height: ($base-spacing-unit * 1.5);
+    height: $base-spacing-unit * 1.5;
-  padding: 0 ($base-spacing-unit / 2);
+    padding: 0 #{$base-spacing-unit / 2};
     width: 100%;
 }
 
@@ -30,7 +27,7 @@ input[type="radio"] {
 input[type="file"] {
     line-height: normal;
     height: auto;
-  padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
+    padding: #{$base-spacing-unit / 4} #{$base-spacing-unit / 2};
 }
 
 input[type="submit"] {
@@ -45,11 +42,11 @@ input[disabled] {
 select {
     line-height: normal;
     padding: 0;
-  padding-left: ($base-spacing-unit / 2);
+    padding-left: $base-spacing-unit / 2;
 }
 
 textarea {
-  min-height: ($base-spacing-unit * 4);
+    min-height: $base-spacing-unit * 4;
     overflow: auto;
     vertical-align: top;
     resize: vertical;
@@ -60,67 +57,20 @@ textarea {
 /**
  * Form utility classes
  */
+
 .form--inline {
     .form__group {
         display: inline-block;
     }
 }
 
-.checkbox,
+.form {
-.radio {
-  display: block;
-  padding-left: $base-spacing-unit;
-
-  &.inline {
-    display: inline-block;
-  }
-
-  > input {
-    float: left;
-    margin-left: -($base-spacing-unit);
-    margin-top: 4px;
-  }
-}
-
     .form__group {
         display: block;
         margin-bottom: $base-spacing-unit;
-}
-
         .form__label {
             display: block;
             margin-bottom: ($base-spacing-unit / 2);
         }
-
-
-
-/**
- * Input Group
- *
- * Allows for prepend/append of elements
- * (such as icons) on an input.
- */
-.input-group {
-  position: relative;
-
-  > input {
-    padding: 0 ($base-spacing-unit * 2);
-  }
-
-  .input-group__addon {
-    line-height: ($base-spacing-unit * 1.5);
-    height: ($base-spacing-unit * 1.5);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: ($base-spacing-unit * 1.5);
-
-    &:first-child {
-      left: 0;
-    }
-
-    &:last-child {
-      right: 0;
-    }
     }
 }

assets/styles/base/_images.scss

@@ -4,9 +4,11 @@ img {
     vertical-align: top;
 }
 
+
 /**
  * Responsive images
  */
+
 .is-fluid {
     display: block;
     width: 100%;

assets/styles/components/_buttons.scss

@@ -3,7 +3,7 @@
     color: $base-background-colour;
     border: 1px solid transparent;
     display: inline-block;
-  padding: ($base-spacing-unit / 4) $base-spacing-unit;
+    padding: #{$base-spacing-unit / 4} $base-spacing-unit;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -22,7 +22,7 @@
         text-decoration: none;
         background-color: $base-background-colour;
         color: $brand-colour;
-    border: 1px solid $brand-colour;
+        border-color: $brand-colour;
     }
 
     &.is-disabled,
@@ -40,7 +40,7 @@
     &:hover {
         background-color: $brand-colour;
         color: $base-background-colour;
-    border: 1px solid transparent;
+        border-color: transparent;
     }
 }
 

assets/styles/components/_nav.scss

@@ -1,4 +1,7 @@
-// hamburger menu
+/**
+ * Hamburger menu
+ */
+
 .nav-burger {
     position: fixed;
     top: $base-spacing-unit;
@@ -35,9 +38,11 @@
 }
 
 
-// applies to all navs
+/**
+ * Navs
+ */
+
 .nav {
-  ul {
     list-style: none;
     margin: 0;
 
@@ -53,10 +58,8 @@
         }
     }
 }
-}
 
 .nav--header {
-  // header nav styling goes here
 
     // mobile nav
     @include resp-max($breakpoint-md) {

assets/styles/config/_mixins.scss

@@ -1,6 +1,7 @@
 /*
  * Media query to respond to a minimum size (mobile first)
  */
+
  @mixin resp-min($size) {
     @media screen and (min-width: $size) {
         @content;
@@ -11,6 +12,7 @@
 /*
  * Media query to respond to a maximum size
  */
+
 @mixin resp-max($size) {
     @media screen and (max-width: $size) {
         @content;
@@ -21,6 +23,7 @@
 /*
  * Output font size in px/rem
  */
+
 @mixin font-size($px) {
     font-size: $px + px;
     font-size: #{$px / 16}rem;
@@ -30,6 +33,7 @@
 /*
  * Placeholder mixin for <input>
  */
+
 @mixin placeholder {
     $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
     @each $placeholder in $placeholders {

assets/styles/utils/_helpers.scss

@@ -1,6 +1,7 @@
 /**
 * Clearing and floating
 */
+
 .alignleft,
 .float-left {
     float: left;
@@ -33,14 +34,14 @@
 }
 
 .clearfix {
-  @include clearfix();
+    @include clearfix;
 }
 
 
-
 /**
 * Text aligments
 */
+
 .align-text-left {
     text-align: left;
 }
@@ -57,6 +58,7 @@
 /**
  * Elements visibility
  */
+
 .visible-on-mobile {
     display: none !important;
 
@@ -82,3 +84,19 @@
         display: none !important;
     }
 }
+
+
+/**
+ * Accessibility
+ */
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}

assets/styles/vendor/simple-grid/_mixins.scss

@@ -7,6 +7,12 @@
         @if $i != 0 {
             .col--#{$name}-#{$i} {
                 width: percentage($i/$grid-columns);
+                .row--flex & {
+                    flex-basis: percentage($i/$grid-columns);
+                    max-width: percentage($i/$grid-columns);
+                    width: auto;
+                    float: none;
+                }
             }
         }
         .col--#{$name}-offset-#{$i} {

assets/styles/vendor/simple-grid/simple-grid.scss

@@ -19,12 +19,18 @@
 }
 
 .row {
-    @include clearfix;
     list-style: none;
     margin-left: -$grid-gutter;
+    &:not(.row--flex) {
+        @include clearfix;
+    }
     &.row--gutterless {
         margin-left: 0;
     }
+    &.row--flex {
+        display: flex;
+        flex-wrap: wrap;
+    }
 }
 
 .col {

footer.php

@@ -3,7 +3,7 @@
                 <nav class="footer__navigation">
                     <?php wp_nav_menu(['theme_location' => 'footer', 'menu_class' => 'nav nav--footer']); ?>
                 </nav>
-                &copy; <?php bloginfo('name'); ?> <?php echo date('Y'); ?>
+                <p class="footer__copyright">&copy; <?php echo get_bloginfo( 'name' ); ?> <?php echo date('Y'); ?></p>
             </div>
         </footer>
         <?php wp_footer(); ?>

functions.php

@@ -12,6 +12,7 @@ require_once 'includes/custom-functions.php';
  */
 
 if ( function_exists( 'add_theme_support' ) ) {
+
     // Add support for document title tag
     add_theme_support( 'title-tag' );
 
@@ -84,7 +85,8 @@ add_action('wp_enqueue_scripts', 'barebones_enqueue_scripts');
 
 function barebones_register_nav_menus() {
     register_nav_menus([
-        'header' => 'Header'
+        'header' => 'Header',
+        'footer' => 'Footer',
     ]);
 }
 
@@ -212,7 +214,7 @@ function front_page_on_pages_menu() {
     global $submenu;
     if ( get_option( 'page_on_front' ) ) {
         $submenu['edit.php?post_type=page'][501] = array( 
-            'Front Page', 
+            __( 'Front Page', 'barebones' ), 
             'manage_options', 
             get_edit_post_link( get_option( 'page_on_front' ) )
         ); 

header.php

@@ -24,7 +24,7 @@
             <div class="container">
                 <a href="<?php bloginfo('url'); ?>" class="header__logo">
                     <?php echo is_front_page() ? '<h1>' : ''; ?>
-                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.svg" onerror="this.src='<?php bloginfo('stylesheet_directory'); ?>/img/logo.png'" alt="<?php bloginfo('title'); ?>" />
+                        <img src="<?php echo get_bloginfo( 'stylesheet_directory' ); ?>/img/logo.svg" onerror="this.src='<?php echo get_bloginfo( 'stylesheet_directory' ); ?>/img/logo.png'" alt="<?php echo get_bloginfo( 'title' ); ?>" />
                     <?php echo is_front_page() ? '</h1>' : ''; ?>
                 </a>
                 <a href="#" class="nav-burger js-menu-toggle">

page.php

@@ -8,7 +8,7 @@
             <article <?php post_class(); ?>>
 
                 <header role="heading">
-                    <h3 class="post__title"><?php the_title(); ?></h3>
+                    <h1 class="post__title"><?php the_title(); ?></h1>
                 </header>
 
                 <?php the_content(); ?>

single.php

@@ -8,7 +8,7 @@
             <article <?php post_class(); ?>>
 
                 <header class="post__header" role="heading">
-                    <h3 class="post__title"><?php the_title(); ?></h3>
+                    <h1 class="post__title"><?php the_title(); ?></h1>
                 </header>
 
                 <?php the_content(); ?>