Branching out from HopScotch, I am reformulating mostly the front-end of the theme. Here comes Applicator – which I plan to submit to WordPress Free Themes.
The basic HTML skeleton are based on WordPress Twentyfifteen and HTML5 Boilerplate / Mobile. Basically the content of <head> are snippets from these awesome frameworks.
Currently, I am building components one by one – starting from the Masthead constructor.
Files
- header.php
- functions.php
- > functions
- initial
- setup.php
- aside.php
- hooks.php
- markup
- html-class.php
- primary-navigation.php
- style and scripts
- styles.php
- scripts.php
- initial
Components of Masthead Constructor
- Web Product Name
- Primary Menu
Accessibility Features
- Accessible Names
- Sub-Navigation Toggle Action
Generic Components
- comp – Component
- notice – Message
- accessible_name – Labels for Accessibility
- axn – Actions
Classes
- State – the state of the UI
Folders
- functions – Functions
- js – JavaScripts
- css – Stylesheets
- img – Images
Notes
- Always escape text strings (e.g., <?php _e( ‘Label’, ‘domain’ ); ?>)
JavaScript Detection and Class Names
If JavaScript is supported/enabled by the browser, there are two classes added in <html>:
- js
Found in functions > setup.php. It replaces the default “no-js” class name that is added by default in <html>
JavaScripts
- html5.js
HTML5 Shiv – for IE 8 and below
Located in js > html5.js - plugins.js
To avoid console errors in browsers without a console
Located in js > plugins.js - skip-link-focus-fix.js
Makes “skip to content” link work correctly in IE9, Chrome, and Opera for better accessibility
Located in js > skip-link-focus-fix.js
Source: Twenty Fifteen WordPress Theme
CSS Layers
- HTML5 Boilerplate
normalize.css
main.css
Coming straight from H5BP, these stylesheets modify the default browser stylesheet for the better. It is considered “default CSS on steroids”. - Usability
usability.css
It adds usability to Active Elements and other elements that can be interacted with. - Layout
layout.css
Anything visual concerning spacings and dimensions goes here. - Typography
typography.css
Dealing with the CSS font properties. But if there’s a usability issue with the default font-size of an element, it goes to Usability. - Color
color.css
A touch of color for usability and visual design.
Structure
- Constructors
- Masthead
- Content
- Colophon
- Sub-Constructors
- Navigation
- Aside
Image Assets
- Vector Assets
located in img > vector-assets.php
called from header.php
Contains SVG markup of basic utility icons to enable color customization
Functions
HTML Class
Adds classes into <html>
- html
simply adds the class “html” so that CSS doesn’t need to use the element selector - masthead-aside–active / masthead-aside–inactive
class if Masthead Aside is active or inactive - view–front / view–inner
class if on the front page or inner page - browser–chrome / browser–gecko / browser–safari / browser–opera / browser–lynx / browser–ns4 / browser–ie / browser–unlisted
class depending on the browser user agent - device–mobile / device–not-mobile
based on wp_is_mobile() - theme–parent / theme–child
class if using a parent or child theme
Leave a Reply