webdevstudios / wd_s

A starter theme from WebDevStudios.

wd_s

A starter theme from WebDevStudios. https://wdunderscores.com

Table of Contents

• Introduction
• Getting Started
  • Prerequisites
  • Quick Start
  • Advanced
• Setup
  • Development
• Contributing and Support

Introduction

Hello there! I am a versatile starter theme known as wd_s, or wdunderscores. My foundation is built primarily on PHP templates, but I offer the flexibility to incorporate custom templates through the Site Editor. It's worth noting that I'm designed for customization, so it's best not to use me as a Parent Theme. Instead, harness my potential to transform me into the most amazing WordPress theme you can envision – that's what I'm here for!

I come equipped with a host of robust web technologies, including Tailwind, npm, webpack, Sass, and PostCSS. To ensure your code aligns with WordPress standards and stays clean, I leverage @wordpress/scripts for CSS and JavaScript linting. What's more, I take accessibility seriously and proudly comply with both WCAG 2.1AA and Section 508 standards right from the start.

I also come with the Site Editor activated, providing you with even more versatility and ease in crafting your WordPress theme. Whether you're customizing templates or utilizing the Site Editor, I'm here to support your creative journey. And remember, I do require at least PHP 8.0 to be activated to unlock my full potential.

Getting Started

Prerequisites

Because I compile and bundle assets via NPM scripts, basic knowledge of the command line and the following dependencies are required:

• Node (v18+)
• NPM (v9+)
• Composer

Quick Start

If you want to keep it simple, head over to https://wdunderscores.com and generate your wd_s based theme from there. You just input the name of the theme you want to create, click the "Generate" button, and you get your ready-to-awesomize starter theme. Alternatively, you could download a pre-built ZIP

Advanced

If you want to set me up manually:

1. Download and extract the zip into your wp-content/themes directory and rename wd_s to fit your needs.

2. Find & Replace

You'll need to change all instances of the name: wd_s.

• Search for: @package wd_s and replace with: @package project_name to capture the package name
• Update "WebDevStudios\wd_s,wd_s" to: "CompanyName\project_name,project_name" (with double quotes) in phpcs.xml.dist
• Search for: WebDevStudios\wd_s and replace with: CompanyName\project_name to capture the namespaces
• Update "webdevstudios/wd_s" to "companyname/project_name" (with double quotes) in composer.json
• Search for: , 'wd_s' and replace with: , 'project_name' (inside backticks) to capture the text domain
• Update Text Domain: wd_s to: Text Domain: project_name in style.css
• Update "wd_s" to: "project_name" (with double quotes) in phpcs.xml.dist and package.json
• Update 'wd_s' to: 'project_name' (with single quotes) in inc/setup/setup.php
• Search for: wd_s_ and replace with: project_name_ to capture all the function names
• Search for: 'wd_s- and replace with: 'project_name- to capture prefixed handles
• Search for wd_s.pot and replace with: project_name.pot to capture translation files
• Search for wdunderscores.test and replace with: project_name.test to match your local development URL
• Edit the theme information in the header of style.scss to meet your needs

Setup

From the command line, change directories to your new theme directory:

cd /wp-content/themes/your-theme

Install theme dependencies and trigger an initial build.

Note: You will need to have Composer 2 and NPM 9 installed first.

npm i && composer i

Development

From the command line, type any of the following to perform an action:

Command	Action
npm run watch	Builds assets and starts Live Reload and Browsersync servers
npm run start	Builds assets and starts Live Reload server
npm run build	Builds production-ready assets for a deployment
npm run lint	Check all CSS, JS, MD, and PHP files for errors
npm run format	Fix all CSS, JS, MD, and PHP formatting errors automatically
npm run report	Gives detailed information on coding standards violations in PHP code

Building a block with wpcli

In order to build a block, run the following wpcli script.

Note: If you're using Local, you can open the shell from within Local to do this. Sitename -> Open site shell.

wp wds create_portable_block myblock --title="This is myblock" --desc="This block is used for wds." --keyword="myblock" --icon="table-row-before" --namespace="wds"

This will scaffold out a block inside of the blocks folder in the theme. Replace myblock with the name of your block and update the other items title, desc, keyword, icon, namespace with the appropriate information.

Note: If you don't see your new block available under the block listing in the editor after following the above steps, try changing the namespacing in your block's block.json to the following format your-namespace/blockname and check again.

Contributing and Support

Your contributions and support tickets are welcome. Please see our contributing guidelines before submitting a pull request.

wd_s is free software, and is released under the terms of the GNU General Public License version 2 or any later version. See LICENSE.md for complete license.

wd_s's Issues

heading classes for occasions when you might want <h2 class="h3"></h2>

one thing I've always done on projects is edit the /base/typography.scss and add something like the following:

h1,
.h1 {}

h2,
.h2 {}

h3,
.h3 {}

Because, inevitably designers don't necessarily account for SEO and source order in compositions and will always need a h2 to look like an h1, or h5 to look like a h2, etc.

Discussion: Use PostCSS

I've been doing some testing and would like to drop our Grunt dependencies: "Autoprefixer, Combine Media Queries, CSSComb, CleanCSS, and CSSmin" in favor of PostCSS plugins. PostCSS plugins would replicate the optimization tasks we currently have in place. The difference is, it does it faster and with less dependencies.

The first win is, it fixes #79 (comment).

The second win? This wouldn't require any changes to our workflow (hooray!). We'd still be using grunt watch like normal.

Finally, I love that http://codepen.io has added PostCSS to it's arsanal of inline proessors. PostCSS development has a tremendous amount of momentum right now and the list of available plugins is impressive!

This is part of my testing Gruntfile.js:

// Process Sass with LibSass (like normal)
sass: {
    options: {
        sourceMap: true,
        outputStyle: 'expanded',
        lineNumbers: true,
        includePaths: [
            'bower_components/bourbon/app/assets/stylesheets',
            'bower_components/neat/app/assets/stylesheets'
        ]
    },
    dist: {
        files: {
            'style.css': 'sass/style.scss'
        }
    }
},

// Afterwards, process the compiled style.css using PostCSS plugins
// "AutoPrefixer" and "Media Query Packer".
postcss: {
    options: {
        map: true,
        processors: [
            require('autoprefixer')({ browsers: ['last 2 versions'] }),
            require('css-mqpacker')
    ]},
    dist: {
        src: 'style.css'
    }
},

// Finally, run it through the PostCSS plugin "CSSNano" which runs a
// ton of optimizations and then minifies.
cssnano: {
    options: {
        sourcemap: true
    },
    dist: {
        files: {
            'style.min.css': 'style.css'
        }
    }
},

I've been putting this through it's paces today, and so far so good. Thoughts?

Here is a great read on PostCSS: http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889

Discussion: Better cross-browser/platform font rendering

Having issues with @font-face rendering inconsistently across browsers and operating systems.

This hero looks pixel perfect across all browsers and OSs. Would like to follow Apple's lead, and bring some default CSS to help.

Thoughts?

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: 'liga', 'kern';
}

Bring current with Automattic's _s

It's been a while since we've brought this current with _s.

Mostly, I want to make sure functions inside /inc, js, and the / root level template files match as much as possible. (aside from our own helpers)

empty /svg-icons/ dir to start out

I feel like it may be more error prone to start with dozens of svg icons on new project and then have to go back and clean out unused icons later on (especially in team environment), as opposed to starting with empty directory and add as you go? I wonder if some projects never get cleaned up, therefore lots of unused icons left causing bloat?

Discussion: Drop (possibly useless) things from customizer

The customizer is pretty powerful and we can hook into it to do a lot of things that are done on every site - a logo, social links, footer copyright text, etc.

But when's the last time we actually had someone use colors or background image in the customizer? We JUST used the background image field for a site and it's literally the only time I've ever used it.

I think maybe we could do with adding filters to remove those items that may be un-uitilized on a regular basis. If they need to be added in for a specific project, we could easily remove the filter that removes the fields/sections from the customizer.

Create a grunt based theme generator

@briannaorg Shared this with me, and I'd like to take a look at maybe integrating this with wd_s:

http://williamwalker.me/blog/levelling-up-with-grunt-project-scaffolding-with-grunt-init.html

rename SVG icons directory

Renaming /svg/ to /svg-icons/ to clarify the usage of directory and reflect that it is a watched dir. If unique svgs are needed then we put them in either /images/ or create a new dir /svg/ on per project basis.

Refactor _s_get_the_title() and _s_get_the_excerpt() template tags

Just want update these helper functions to use wp_parse_args() (instead of passing multiple args).

https://github.com/WebDevStudios/wd_s/blob/master/inc/template-tags.php#L193

Will need to create _s_get_the_title(); (Use CLP code)

Merge markers are casuing grunt styles to not work

I've been getting this error a lot when I have a merge conflict on Gruntified files. I can delete them and re grunt styles and I'm good. I'm not 100% sure how to fix it. The merge conflict markers are in the minified files (which always happens) but them trying to re-grunt styles them fails with this error.

Remove navigation.js

Because of our requirement to make wd_s Section 508 compliant, we've removed the aria markup from the primary navigation menu. navgiation.js was based on the aria markup, and is now broken.

I'm for adding a different "navicon" solution into wd_s. I feel like we do a navicon on every client project...

Source maps disappearing

Line numbers are also incorrect

Add grunt-notify

Add support for grunt-notify

Drop custom "wider-than" mixin for Neat's "media" mixin.

Neat's media mixin supports: variables, min-width, max-width, etc... basically any media query can be passed through.

By default, @include media() uses min-width so:

This would be the normal WDS workflow

Sass

.foo {
    @include media($tablet-landscape) {
         color: $color-black;
    }
}

CSS

@media screen and (min-width: 64rem) {
    .foo {
       color: #000;
    }
}

Plain 'ol pixels

Sass

.foo {
    @include media(768px) {
         color: $color-black;
    }
}

CSS

@media screen and (min-width: 768px) {
    .foo {
       color: #000;
    }
}

Use max-width

Sass

.foo {
    @include media(max-width 768px) {
       color: $color-black;
    }
}

CSS

@media screen and (max-width: 768px) {
    .foo {
       color: #000;
    }
}

Combine both min and max widths using variables

Sass

.foo {
    @include media(min-width $phone-portrait max-width $phone-landscape) {
       color: $color-black;
    }
}

CSS

@media screen and (min-width: 22.5rem) and (max-width: 40rem) {
    .foo {
       color: #000;
    }
}

See it in action here: http://neat.bourbon.io/examples/

508c: 'search' role is not valid for searchform

https://github.com/WebDevStudios/wd_s/blob/master/searchform.php#L1

The value of the 'role' attribute is not valid for this element
Elements can only have specific roles as defined by the ARIA specification. So you may be better off using a more appropriate element for this role. See http://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html.

<form role="search" method="get" class="search-form" action="http://clp.nps.dev/">

Looks like the recommendation for a search form is no role.

Images lose left-right margin when a caption is applied

Add WDS Simple Page Builder script enqueue function

Like used on CLP:

/**
 * Conditionally enqueue styles & scripts via Page Builder.
 */
function wds_clp_enqueue_page_builder_scripts() {

    // Get the page builder parts
    $parts = get_page_builder_parts();

    // Hero Grid
    if ( in_array( 'hero-grid' , $parts ) ) {
        wp_enqueue_script( 'velocity' );
    }

    // Knowledge Park Search
    if ( in_array( 'knowledge-park-search', $parts ) ) {
        wp_enqueue_script( 'chosen' );
        wp_enqueue_style( 'chosen' );
        wp_enqueue_script( 'wds-clp-knowledge-park-search' );
        wp_enqueue_script( 'jquery-ui-accordion' );
    }

}
add_action( 'wds_page_builder_after_load_parts', 'wds_clp_enqueue_page_builder_scripts' );

svg function in scripts.php causing scripts to load in body and not head

The function below causes any enqueues or hooks to wp_head to load after and not in the head, my search lead me to "you can't echo in the wp_head hook". I think getting the file contents instead of the require might work. Echo in the svg tag.

function wds_svg_definitions() {
    // Define svg sprite file
    $svg_defs = get_template_directory() . '/images/svg-defs.svg';

    // If it exsists, include it
    if ( file_exists( $svg_defs ) ) {
        require_once( $svg_defs );
    }
}
add_action( 'wp_head', 'wds_svg_definitions' );

function wds_svg_definitions() {
     ?> 
        <svg><?php echo $svg_file_contents ; ?></svg> 
    <?php
}
add_action( 'wp_head', 'wds_svg_definitions' );

Reduce the number of color variables

Specifically, color variables that set markup style for smaller things like button borders, pre, ins, etc...

508c: Using role="banner" in header is discouraged

https://github.com/WebDevStudios/wd_s/blob/master/header.php#L32

You should not use ARIA roles, that are the default for the element:
Web developers should not set the ARIA role and aria-* attributes to values that match the default implicit ARIA semantics. See http://www.w3.org/TR/html-aria

Replace lame color variable names with spiffy names

Need to swap out these boring names like "lighter-gray" with something a bit more fun.

Copy/Paste the hex codes in _colors.scss into http://chir.ag/projects/name-that-color/ and replace!

Invalid source-map path

CSS source-map should point to style.css.map

Update to grunt-sass

Any specific reason why you use grunt-contrib-sass as opposed to grunt-sass?

From a quick glance, I saw there was a large amount of @imports going on. We have had that slow us down during development. We have noticed a considerable speed up since we switched to grunt-sass, even if it only cuts 1 second off the watch.

I'd be glad to submit a pull request, just want to make sure before I do. Looks like a sweet setup!

Add z-index mixin

@aubreypwd Will create a PR for this as seen on our Designers call

remove Google Font sub-setting for latin as it is not needed

If I'm reading Google's recommendations it seems sub-settings for Latin is not needed, as it is default: https://developers.google.com/fonts/docs/getting_started#Subsets

I'm thinking we can remove this? https://github.com/WebDevStudios/wd_s/blob/master/inc/scripts.php#L31

508c: aria-expanded="false" is not allowed in menu-toggle

https://github.com/WebDevStudios/wd_s/blob/master/header.php#L45

E684 The 'aria-expanded' attribute is not allowed in this context:
The ARIA specification only allows certain 'aria-...' attributes to be used with certain roles. See http://www.w3.org/TR/wai-aria/

<div class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">

Media Query Splitting

Following the guidelines from Neat, adding non-overlapping media queries as variables works well when also using omega.
https://github.com/thoughtbot/neat#how-do-i-use-omega-in-a-mobile-first-workflow

This allows me to use mixins like this

@mixin one-quarter {
    margin-bottom:1em;

    @include media($small-screen) {
        @include span-columns(2);
        @include omega(1n);
    }
    @include media($medium-screen) {
        @include span-columns(2);
        @include omega(2n);
    }
    @include media($large-screen) {
        @include span-columns(2);
        @include omega(4n);
    }
    @include media($xl-screen) {
        @include span-columns(3);
        @include omega(4n);
    }
}

More examples: https://github.com/pstonier/rapid-springs/blob/master/sass/mixins/_mixins-master.scss

Also, note that these are written for a changing grid size (small screens are 2 columns, medium screens are 4 columns, large are 8, xl are 12).
https://github.com/pstonier/rapid-springs/blob/master/sass/base/_grid-settings.scss

For broader media queries, you can still use
@media screen and (min-width:$first-breakpoint-value)

Body background is never set

This, I can't find anywhere in the codebase. I also am not 100% sure where it would be prefered to be at. It's not really "layout" and not really a "module" ... body styles are pretty much in "normalize" which I don't really feel right at putting it in either.

body {
    background: $color-background-body;
}

Noticed this when using the customizer, you get a gray background from the customizer behind the iframe because no background is set within the theme itself.

Loss of correct line-numbers and other issues

As of right now, wd_s compilation is broken. SourceMaps and line-numbers don't work. Making it difficult to do our jobs. Debugging on the fly is required, not only to check our work, but the previous developers work too. We need SourceMaps to efficiently do our jobs.

Introduction

The old grunt autoprefixer was ripping apart the stylesheet causing the SourceMap to break. It's even listed as an issue on their Github. This was the impetus for moving to PostCSS: use the official autoprefixer plugin.

Quick History of Issues

• Back in September @efuller noticed that Source Maps and line-numbers weren't lining up. #79
• 19 days ago I merged in PostCSS support (which included the css-mqpacker plugin) a2357e1
• 6 days later, I ripped out css-mqpacker and put CMQ back in because css-mqpacker was sorting media queries based on a "first come, first sort" type of logic. cdc5cf8
• Today I flipped the compilation order of Grunt Watch, and disabled SourceMap inclusion inside style.min.css, but the issue persists for style.css. d2a3797

Down the rabbit hole
The first iteration of our PostCSS implementation was probably 90% correct, however we had an unintended issue when css-mqpacker was unsafely grouping media queries. As a quick fix, I threw the old grunt CMQ plugin back in.

Nope. Wrong.

CMQ is very basic. It only has one option to disable login. All it does is read strings of text and combine similar strings of text. In doing so, it makes a long stylesheet a little bit shorter. Because of this, it doesn't update the SourceMap. SO, the SourceMap thinks the style sheet is 3,000 lines long - and that's what it tells the web browser (even though it's only 2,948 lines long). Thus, all the line numbers are off.

I did some research and found an issue with css-mqpacker's unsafe grouping. Turns out, there is an option to disable the "first come, first sort" order that's in place by default.

So I ripped out CMQ and placed css-mqpacker back in turn off the default sort. I disabled the SourceMap feature in CSSNano and it appears to have fixed the issue.

tl;dr - Give Us A Solution!
Add css-mqpacker back into the PostCSS grunt task, and pass the option to disable it's default sort order. Disable SourceMaps in CSSNano and just spit out a plain ol' minified file for use on Production.

Extra Note
We also need to be mindful about how we write our media queries. I doubt there's any automagic plugin out there that can account for a crazy mix of min/max width queries with different numerical units (e.g.; px, em, rem). You should try to keep media queries simple (min-width) and keep the numeric unit consistent (rem).

508c: role="contentinfo" is discouraged in <footer>

https://github.com/WebDevStudios/wd_s/blob/master/footer.php#L20

You should not use ARIA roles, that are the default for the element:
Web developers should not set the ARIA role and aria-* attributes to values that match the default implicit ARIA semantics. See http://www.w3.org/TR/html-aria (displayed in new window).
<footer id="colophon" class="site-footer" role="contentinfo">

input focusing bug on iOS if font-size is anything other than 16px

I'm sure y'all are familiar with this one. iPhone, with font-size: 14px you get unwanted zooming effect of page.

I've yet to find a better (not completely opinionated, and strong-arming user's choices) solution then this: http://stackoverflow.com/a/16255670

Would like to propose adding the following code here: https://github.com/WebDevStudios/wd_s/blob/master/sass/modules/_forms.scss#L80

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {

    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        select,
        textarea,
        input {
            font-size: rem(16) !important;
        }
    }
}

Thoughts?

508c: role="main" is not valid in <main> element

https://github.com/WebDevStudios/wd_s/blob/master/page.php#L20

ARIA attributes such as 'role' and 'aria-...' are not valid here
Some elements (sometimes combined with certain attributes) can not have ARIA attributes specified. See http://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html (displayed in new window).
<main id="main" class="site-main" role="main">

Improve documentation in /svg/readme.md to cover SVG and icoMoon usage

I've had a few pings from team on how to use the .json file in wd_s /svg/. I've briefly started to update the Readme, and will get it wrapped up soon.

Make SVG's more accessible

Context https://basecamp.com/1756504/projects/7221032/todos/218217200

Will use this: http://www.sitepoint.com/tips-accessible-svg/

input[type='tel'] add to _forms.scss partial

Add new HTML5 input[type='tel'] to list of inputs with padding in _forms.scss partial: https://github.com/WebDevStudios/wd_s/blob/master/sass/modules/_forms.scss#L85

Update package.json to meet new NPM format

Newer versions of NPM are throwing an error when running npm install.

Package.json should be something like this:

  "name": "_s",
  "version": "1.0.0",
  "description": "A plugin boilerplate for new custom BuddyPress projects for WebDevStudios.",
  "author": "WebDevStudios",
  "repository": {
  "type": "git",
  "url": "https://github.com/WebDevStudios/wd_s"
},
  "bugs": {
  "url": "https://github.com/WebDevStudios/wd_s/issues/"
},
  "keywords": [
  "wordpress"
],
  "devDependencies": {
    "css-parse": "latest",
    "glob": "latest",
    "grunt": "latest",
    "grunt-autoprefixer": "latest",
    "grunt-combine-mq": "latest",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-connect": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-imagemin": "latest",
    "grunt-contrib-jshint": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-csscomb": "latest",
    "grunt-githooks": "latest",
    "grunt-newer": "latest",
    "grunt-notify": "latest",
    "grunt-phpcs": "latest",
    "grunt-sass": "latest",
    "grunt-sassdoc": "latest",
    "grunt-shell": "latest",
    "grunt-spritesmith": "latest",
    "grunt-svgmin": "latest",
    "grunt-svgstore": "latest",
    "grunt-update-submodules": "latest",
    "grunt-wp-i18n": "latest",
    "load-grunt-tasks": "latest"
  },
  "license": "GPL-2.0+"
}

Calling an <svg> in the header violates 508c

https://github.com/WebDevStudios/wd_s/blob/master/inc/scripts.php#L110

Also the display: none; throws a warning.

Should we put the <svg> call in the footer? After wp_head?

Create a generic, re-usable Navicon/Hamburger Nav

We use a navicon/burger on almost every build. Let's finally get one in here as a baseline.

Requirements:

• Must use an SVG navicon icon
• Must have a slide-out drawer
• Must be accessible and pass 508c testing
• Visible from phone-portrait -> tablet-portrait

Bourbon Refills has code for this, and I've used it on a few projects as well. http://refills.bourbon.io/components/#sliding-panel

Thoughts?

Fix i18n variable usage

Looking at this https://github.com/WebDevStudios/wd_s/blob/master/functions.php#L137

Should be this

//...
'description'   => sprintf ( __( 'Widget area for %s', '_s' ), $sidebar_name ),
//...

A small bug I know but it doesn't follow WordPress documentation outlined here: https://codex.wordpress.org/I18n_for_WordPress_Developers#Placeholders

I seen it and figured I'd open a ticket. At this time I'm unaware of any other instances of this occurring but if I see them I'll let you guys know.

Discussion: Add header/logo support to the customizer?

I've seen us starting to use the customizer a bit more. Maybe add this in along with the existing custom-background support?

http://codex.wordpress.org/Function_Reference/add_theme_support#Custom_Header

Add "no-js" and "js" support

In an effort to make it easy to sniff javascript support, I have a snippet that will add a class to the body if javascript is enabled.

Gulp Integration

I've been dropping hints about this on the last couple of Designer calls. I spent the weekend playing with Gulp for a personal client, and I really quite like it. My goal is to set up wd_s with Gulp while retaining the workflow. Maybe it would even neat to offer both a Grunt and Gulp build options?

Will demo on the next call.

Todo:

• PostCSS (for Autoprefixer and MQ Packer support)
• Combine Media Queries
• Sourcemap on minified styles
• Makepot (i18n support)
• SassDocs
• Notification (Growl) support on failures
• Move Bourbon/Neat out of Bower and into NPM
• Ensure "Clean" is working correctly
• SVGstore is adding HTML headers into svg-icons.def (this is bad)
• Recreate tasks like "styles, javascript, sprites" where applicable
• BrowserSync... how can we make this as awesome as possible?

Would also like to see examples of how others are using Gulp and their config files...

remove those pesky IDs again

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
In most cases will output
<article id="post-x" class="post-x">
This is invalid markup and We should not be using IDs to begin with. Greg said Stacey originally removed the IDs, and when we brought wd_s up-to-date with _s they came back.

Somebody should go through and remove again, and soon please.

Detecting Media Queries w/ Javascript

http://zerosixthree.se/detecting-media-queries-with-javascript/
A lot of Javascript (and jQuery) is written to stay synchronized with a theme's media query breakpoints. Example, make off-screen nav work only 767px and above. Therefore, I feel like detecting the theme's Sass @mixin built media queries and keeping the Javascript in sync (single-source) is important. This would make a great reusable feature to have baked into wd_s.

What do you think?

remove clear: both from h1, h2, h3, h4, h5, h6 declaration

This is from original _s and it always bothered me, because I end up removing on every project. Do we need it? https://github.com/WebDevStudios/wd_s/blob/master/sass/base/_typography.scss#L23

Add WAI-ARIA tags to search form

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints

Pattern Library

I know our team has hashed through this before, but thought I'd start a ticket to perhaps discuss again and document decisions here for posterity.

Was thinking to try and get a branch going with this integrated: http://documentcss.com/

Some features wd_s could use:

• auto-generated style guide
  • integrates with wd_s existing workflow (Grunt fueled), etc.
  • parses as much of existing Sass partials to generate as possible, and no large rewrites
  • what do we consider large rewrite? We did comment rewrites for SassDoc, was that too much? We'll have to be mindful of where SassDoc and Style Guide overlap. Ideally, Style Guide would replace SassDoc I believe.

Thoughts? Concerns?

Discussion: Should we move things into an /assets folder?

The plugin generator places assets into a directory. This allows for a "cleaner" root. Maybe we can follow along?

Move images, js, and sass into /assets

Thoughts?

Add "ready" support

In an effort to prevent FOUT; I have a snippet that will add the body class "ready" after all the things have downloaded, and the DOM is indeed: "ready".

Search button

It's terrible out of the box because it's 300x300 or something.