{"id":20368067,"url":"https://github.com/samikeijonen/uuups","last_synced_at":"2025-06-26T20:32:47.522Z","repository":{"id":30868829,"uuid":"124851974","full_name":"samikeijonen/uuups","owner":"samikeijonen","description":"Bring your starter theme to the next level experiment.","archived":false,"fork":false,"pushed_at":"2022-12-01T23:54:51.000Z","size":7745,"stargazers_count":46,"open_issues_count":24,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T05:37:31.832Z","etag":null,"topics":["wordpress-starter-theme","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://foxland.fi/demo/uuups/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samikeijonen.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-12T07:43:45.000Z","updated_at":"2023-04-14T08:33:00.000Z","dependencies_parsed_at":"2023-01-14T17:51:51.983Z","dependency_job_id":null,"html_url":"https://github.com/samikeijonen/uuups","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/samikeijonen/uuups","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samikeijonen%2Fuuups","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samikeijonen%2Fuuups/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samikeijonen%2Fuuups/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samikeijonen%2Fuuups/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samikeijonen","download_url":"https://codeload.github.com/samikeijonen/uuups/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samikeijonen%2Fuuups/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262139877,"owners_count":23265247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["wordpress-starter-theme","wordpress-theme"],"created_at":"2024-11-15T00:39:04.589Z","updated_at":"2025-06-26T20:32:47.428Z","avatar_url":"https://github.com/samikeijonen.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/samikeijonen/uuups.svg?branch=dev)](https://travis-ci.org/samikeijonen/uuups)\n\n# Uuups \u0026ndash; experimental WordPress Theme\n\nUuups is an experiment how to bring your theme to the next level.\n\n1. The theme uses modern PHP, JS, CSS, and other tools.\n1. The theme also attempts to stick with WP standards so that it doesn't feel too foreign.\n\n## Version from Mythic\n\nThis is my playground from [Justin Tadlock's starter theme called Mythic](https://github.com/justintadlock/mythic). Most of the code is the same\nbut I have small experiments here and there.\n\n## Documentation\n\nRead [documentation from Mythic Wiki](https://github.com/justintadlock/mythic/wiki).\n\n## Demo\n\n[Demo can be seen in Foxland site](https://foxland.fi/demo/uuups/).\n\n## My wishlist\n\nI have hopes and dreams for the starter theme:\n\n- Accessibility ready out of the box.\n- Clean semantic HTML without lots of extra DIVs\n- Scalable, modular CSS/SASS architecture. It should guide developers how they write their CSS.\n- Ready for Gutenberg and a maximum WYSIWYG experience.\n- ES6 for JavaScript.\n- Gulp, Webpack, or npm scripts for automated tasks like - compiling assets.\n  - optimising images and SVGs.\n  - CSS, JS, and PHPCS linting.\n  - SVG system.\n- Being design system ready.\n\n## My workflow\n\nI'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`.\n\nIn other words `master` branch is ready for production.\n\n## Accessibility testing\n\n[Pa11y](https://github.com/pa11y/pa11y) runs your code against [HTML CodeSniffer](http://squizlabs.github.com/HTML_CodeSniffer/). Check documentation from `pa11y` site.\n\nOn the command line test any local or live URL:\n\n```\npa11y http://example.com/\n```\n\nI recommend also [aXe browser add-on](https://www.deque.com/aXe/) or [aXe-CLI](https://github.com/dequelabs/axe-cli).\n\nMore info about [Frontend checks for web accessibility](https://make.wordpress.org/accessibility/handbook/best-practices/test-for-web-accessibility/test-for-web-accessibility-frontend-code/).\n\n## CSS structure\n\nCSS structure is probably one of\nthe biggest aspects of the front-end and theming.\nIt should have scalable and modular architecture.\n\nStyles are written in `resources/css` folder.\nThere are two separate stylesheets\nwhich are automatically compiled to `dist/css`:\n\n- `style.scss` \u0026ndash; Main stylesheet for the theme.\n- `editor.scss` \u0026ndash; Stylesheet only for the block editor (Gutenberg).\n\n### Main stylesheet\n\nMain stylesheet `style.scss` follows [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach and [BEM](http://getbem.com/) naming convention.\n\nThe main point of ITCSS is that it separates\nyour CSS codebase to several sections (layers).\nIt guides you to write CSS from low-specificity selectors to more specific ones.\n\nIt also plays nicely with the new editor (Gutenberg)\nbecause block styles can be one of the layers.\n\nWe should write separate documentation about SASS and CSS,\nit's that important.\n\n### Styles for the editor\n\n`editor.scss` tries to put all the necessary styles\nto the new editor without re-writing front-end styles.\n\nNote a little trick where we prefix all the styles\nwith class `editor-styles-wrapper` using `postcss-editor-styles` plugin.\n\n## New editor (Gutenberg) support\n\nAt the moment support for new editor means these things to me:\n\n- Add support for `editor-color-palette` to match theme colors.\n- Add support for `editor-font-sizes` to match theme font sizes.\n- Add support for `align-wide` blocks.\n- Dequeue Core block styles:\n\t- This is because I don't want to overwrite and add too spesific rules to main stylesheet.\n\t- Core blocks have their own CSS layer as mentioned before. It can be found in `recources/css/blocks`.\n- Get maximum WYSIWYG experience in the editor by\nenqueueing block related styles using `enqueue_block_editor_assets` hook.\n\nSee previous chapter [styles for the editor](#styles-for-the-editor).\n\n## Coding standards and linting\n\nTheme mostly follows [WordPress coding standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/).\n\nThere is `pre-commit` hook which runs PHP, Style, and JavaScript linting before new commits can be pushed to repo.\n\nFor example if there are changes in CSS files, it runs `npm run lint:css` before the commit.\n\nYou can use `--no-verify` flag to bypass linting check:\n\n```bash\ngit commit --no-verify -m \"Your commit message.\"\n```\n\nAll lints can be run by command `npm run lint`. Or use any of the following lint commands.\n\n### PHP linting\n\nNPM task `npm run lint:php` checks PHP files using [WordPress coding standars (WPCS)](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards). In `.phpcs.xml.dist` there is custom PHP ruleset `Foxland-Default` which extends `WPCS`. This is loaded via [composer package](https://packagist.org/packages/samikeijonen/phpcs-composer).\n\n### Style linting\n\nNPM task `npm run lint:css` checks CSS files using [stylelint](https://github.com/stylelint/stylelint).\n\nFile `.stylelintrc` is the configuration file for stylelint.\n\nI also recommend installing stylelint extension to your IDE, for example [vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint).\n\n### JavaScript linting\n\nNPM task `npm lint:js` checks JS files using [ESLint](https://eslint.org/).\n\nFile `.eslintrc.js` is the configuration file for ESLint. And `.eslintignore` file for what files to ignore from linting.\n\nI also recommend installing ESLint extension to your IDE, for example [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).\n\n### Run your code automatically through Travis CI\n\nWhen you commit changes in Github, let [Travis CI](https://travis-ci.org/) run and test your code.\n\nFile `.travis.yml` is the configuration file for setting up Travis.\n\n### Editorconfig\n\nTheme has an `.editorconfig` file that sets your code editor settings accordingly. [Download the extension to your editor](http://editorconfig.org/#download). The settings will automatically be applied when you edit code when you have the extension.\n\n## New version\n\nGenerate `.zip` file using command:\n\n```\nnpm run release --  --version={version-number}\n```\n\nFor example:\n\n```\nnpm run release --  --version=1.0.0\n```\n\nThis will generate zip file `releases/uuups-1.0.0.zip`.\n\n## SVG system\n\nAll 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:\n\n- Add SVG icons in `resources/svg` folder. `npm run dev` or `npm run build` copies these SVG files in `dist/svg` folder.\n\t- In the same cleans them up.\n\t- Adds attributes and classes for using these icons as decorative only.\n- `Uuups\\get_svg()` function returns inline SVG icon markup by default.\n- For example `Uuups\\get_svg( [ 'icon' =\u003e 'folder-open' ]`.\n- SVG icons are automatically used in Social links menu.\n\nIf the SVG is not decorative, add SVG markup directly in the markup.\n\n## FAQ\n\n\u003e What about sidebars?\n\nFor old themes I probably would not try to add align-wide support if child themes can be broken.\n\nFor new themes you can definitely have \"wide\" and \"full-width\" blocks even if there is sidebar on the right or left.\n\nYeah but how? Using CSS :)\n\n## Other starter themes\n\nCheck out\n\n- [Tonik](https://github.com/tonik/theme/).\n- [Sage](https://github.com/roots/sage/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamikeijonen%2Fuuups","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamikeijonen%2Fuuups","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamikeijonen%2Fuuups/lists"}