Bring your starter theme to the next level experiment.
Uuups is an experiment how to bring your theme to the next level.
This is my playground from Justin Tadlock's starter theme called Mythic. Most of the code is the same but I have small experiments here and there.
Read documentation from Mythic Wiki.
Demo can be seen in Foxland site.
I have hopes and dreams for the starter theme:
I'll work on dev
branch where I keep un-minified CSS, JS, SVGs etc. In master
all assets are cleaned and compile when running npm run build
.
In other words master
branch is ready for production.
Pa11y runs your code against HTML CodeSniffer. Check documentation from pa11y
site.
On the command line test any local or live URL:
pa11y http://example.com/
I recommend also aXe browser add-on or aXe-CLI.
More info about Frontend checks for web accessibility.
CSS structure is probably one of the biggest aspects of the front-end and theming. It should have scalable and modular architecture.
Styles are written in resources/css
folder.
There are two separate stylesheets
which are automatically compiled to dist/css
:
style.scss
– Main stylesheet for the theme.editor.scss
– Stylesheet only for the block editor (Gutenberg).Main stylesheet style.scss
follows ITCSS approach and BEM naming convention.
The main point of ITCSS is that it separates your CSS codebase to several sections (layers). It guides you to write CSS from low-specificity selectors to more specific ones.
It also plays nicely with the new editor (Gutenberg) because block styles can be one of the layers.
We should write separate documentation about SASS and CSS, it's that important.
editor.scss
tries to put all the necessary styles
to the new editor without re-writing front-end styles.
Note a little trick where we prefix all the styles
with class editor-styles-wrapper
using postcss-editor-styles
plugin.
At the moment support for new editor means these things to me:
editor-color-palette
to match theme colors.editor-font-sizes
to match theme font sizes.align-wide
blocks.recources/css/blocks
.enqueue_block_editor_assets
hook.See previous chapter styles for the editor.
Theme mostly follows WordPress coding standards.
There is pre-commit
hook which runs PHP, Style, and JavaScript linting before new commits can be pushed to repo.
For example if there are changes in CSS files, it runs npm run lint:css
before the commit.
You can use --no-verify
flag to bypass linting check:
git commit --no-verify -m "Your commit message."
All lints can be run by command npm run lint
. Or use any of the following lint commands.
NPM task npm run lint:php
checks PHP files using WordPress coding standars (WPCS). In .phpcs.xml.dist
there is custom PHP ruleset Foxland-Default
which extends WPCS
. This is loaded via composer package.
NPM task npm run lint:css
checks CSS files using stylelint.
File .stylelintrc
is the configuration file for stylelint.
I also recommend installing stylelint extension to your IDE, for example vscode-stylelint.
NPM task npm lint:js
checks JS files using ESLint.
File .eslintrc.js
is the configuration file for ESLint. And .eslintignore
file for what files to ignore from linting.
I also recommend installing ESLint extension to your IDE, for example VS Code ESLint extension.
When you commit changes in Github, let Travis CI run and test your code.
File .travis.yml
is the configuration file for setting up Travis.
Theme has an .editorconfig
file that sets your code editor settings accordingly. Download the extension to your editor. The settings will automatically be applied when you edit code when you have the extension.
Generate .zip
file using command:
npm run release -- --version={version-number}
For example:
npm run release -- --version=1.0.0
This will generate zip file releases/uuups-1.0.0.zip
.
All the main SVG related functions can be found in the app/functions-svg.php
file. It’s well-documented in the code, but here’s a summary:
resources/svg
folder. npm run dev
or npm run build
copies these SVG files in dist/svg
folder.
Uuups\get_svg()
function returns inline SVG icon markup by default.Uuups\get_svg( [ 'icon' => 'folder-open' ]
.If the SVG is not decorative, add SVG markup directly in the markup.
What about sidebars?
For old themes I probably would not try to add align-wide support if child themes can be broken.
For new themes you can definitely have "wide" and "full-width" blocks even if there is sidebar on the right or left.
Yeah but how? Using CSS :)
Check out