-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- put entire document structure in base template - move header and footer elements into partials - move skip-to-content links into landmark area - move menu to partials - move base template into layouts folder - path to base template - move example page template out of pages folder - delete unused image file - delete unused header and footer files - add documentation for views folder structure
- Loading branch information
Showing
18 changed files
with
99 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,37 @@ | ||
Project Structure | ||
================= | ||
# Project Structure | ||
|
||
All the files regarding editing the theme can be found in the `src` directory. Inside this directory are three sub-directories: | ||
|
||
JavasScript (`js/`) | ||
------------------- | ||
## JavasScript (`js/`) | ||
|
||
The `js/` directory holds our individual JavaScript files. These are concatenated via [Babel][babel] with the build. Tests will check that JavaScript follows Sparkbox's [linting standards][sb-eslint]. | ||
|
||
Sass (`scss/`) | ||
-------------- | ||
## Sass (`scss/`) | ||
|
||
The `scss/` directory holds our styles for the site which are written using [Sass][sass] and follows a modified [BEMIT][bemit] approach to naming and organizing. Tests will check that SCSS follows Sparkbox's Sass [linting standards][sb-stylelint]. | ||
|
||
PHP (`php/`) | ||
-------------- | ||
The `php/` directory holds the PHP template files for the WordPress theme. Other core, non-php files are included here as well. It structured to have a “lean” `functions.php` and include functionality in the `inc` subdirectory. This directory was built off of the [Underscores Starter Theme][underscores]. Tests will check that PHP files follow the [WordPress Coding Standards][wpcs]. | ||
## PHP (`php/`) | ||
|
||
The `php/` directory holds the PHP template files for the WordPress theme. Other core, non-php files are included here as well. It structured to have a “lean” `functions.php` and include functionality in the `inc` subdirectory. This directory was built off of the [Underscores Starter Theme][underscores]. Tests will check that PHP files follow the [WordPress Coding Standards][wpcs]. | ||
|
||
### PHP Subdirectories | ||
|
||
- `inc/` - Includes directory, to keep the `functions.php` file clean. Some important files to note are: | ||
- `shortcodes/*.php` - Add shortcodes for the content editor to use | ||
- `helpers/*.php` - Add helper functions here, separated by purpose | ||
- `theme-scripts.php` - Add CSS and JavaScript files here. | ||
- `shortcodes/*.php` - Add shortcodes for the content editor to use | ||
- `helpers/*.php` - Add helper functions here, separated by purpose | ||
- `theme-scripts.php` - Add CSS and JavaScript files here. | ||
- `views/` - [Twig][twig] is used to separate presentation from logic, and all `.twig` components can be found here. Some Twig extensions, notably [HTML Extension][html-extension] and [String Extension][string-extension] have been added to enhance templates with data URIs, class management, text manipulation, and ASCII-safe string transformations. | ||
|
||
[babel]:https://babeljs.io | ||
[node]:https://nodejs.org/en/ | ||
[sb-eslint]:https://github.com/sparkbox/eslint-config-sparkbox | ||
[sb-stylelint]:https://github.com/sparkbox/stylelint-config-sparkbox | ||
[wpcs]:https://github.com/WordPress/WordPress-Coding-Standards | ||
[bemit]:https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ | ||
[twig]:https://twig.symfony.com/ | ||
[html-extension]:https://github.com/twigphp/html-extra | ||
[string-extension]:https://github.com/twigphp/string-extra | ||
[underscores]:https://underscores.me/ | ||
- `layouts` - Any twig templates that include the full document structure should go here. That includes the default `base.twig` template and any alternatives, such as for art-directed posts. | ||
- `partials` - Twig templates for components or pieces of the page to be reused should go here. | ||
- `shortcodes` - Twig templates for shortcodes should go here. | ||
|
||
[babel]: https://babeljs.io | ||
[node]: https://nodejs.org/en/ | ||
[sb-eslint]: https://github.com/sparkbox/eslint-config-sparkbox | ||
[sb-stylelint]: https://github.com/sparkbox/stylelint-config-sparkbox | ||
[wpcs]: https://github.com/WordPress/WordPress-Coding-Standards | ||
[bemit]: https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ | ||
[twig]: https://twig.symfony.com/ | ||
[html-extension]: https://github.com/twigphp/html-extra | ||
[string-extension]: https://github.com/twigphp/string-extra | ||
[underscores]: https://underscores.me/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{% extends "base.twig" %} | ||
{% extends "layouts/base.twig" %} | ||
|
||
{% block content %} | ||
<div class="obj-width-limiter"> | ||
|
This file was deleted.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
src/php/views/pages/example-page.twig → src/php/views/example-page.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{% extends "base.twig" %} | ||
{% extends "layouts/base.twig" %} | ||
|
||
{% block content %} | ||
|
||
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{% extends "base.twig" %} | ||
{% extends "layouts/base.twig" %} | ||
|
||
{% block content %} | ||
<div class="obj-width-limiter"> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<!doctype html> | ||
<html {{ site.language_attributes }} class="no-js"> | ||
<head> | ||
<meta charset="{{ site.charset }}"/> | ||
<meta name="description" content="{{ site.description }}"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="profile" href="https://gmpg.org/xfn/11"> | ||
{{ function('wp_head') }} | ||
</head> | ||
<body {{ body_class }}> | ||
{{ function('wp_body_open') }} | ||
|
||
{% include 'partials/header.twig' %} | ||
|
||
<main id="main"> | ||
<article id="post-{{ post.id }}" class="post-type-{{ post.post_type }} {{ function('get_post_class')|join(' ') }}"> | ||
{% if post.title %} | ||
<div class="obj-width-limiter"> | ||
<h1>{{ post.title }}</h1> | ||
</div> | ||
{% endif %} | ||
|
||
<div class="obj-width-limiter cmp-post-body"> | ||
{# content block from child templates #} | ||
{% block content %} | ||
<div class="obj-width-limiter"> | ||
Sorry, no content | ||
</div> | ||
{% endblock %} | ||
{% if sidebar_widget %} | ||
<aside class="obj-width-limiter cmp-primary-sidebar"> | ||
{{ sidebar_widget }} | ||
</aside> | ||
{% endif %} | ||
</div> | ||
</article> | ||
</main> | ||
|
||
{% include 'partials/footer.twig' %} | ||
|
||
{{ function('wp_footer') }} | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
{% extends "base.twig" %} | ||
{% extends "layouts/base.twig" %} | ||
|
||
{% block content %} | ||
|
||
<div class="obj-width-limiter"> | ||
{{ post.content }} | ||
</div> | ||
<div class="obj-width-limiter"> | ||
{{ post.content }} | ||
</div> | ||
|
||
{% endblock %} |
6 changes: 0 additions & 6 deletions
6
src/php/views/footer.twig → src/php/views/partials/footer.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,13 @@ | ||
</main> | ||
|
||
<footer class="cmp-sticky-footer"> | ||
<div class="obj-width-limiter"> | ||
<p> | ||
© | ||
{{ 'now'|date('Y') }} | ||
|
||
<span aria-hidden="true"> | </span> | ||
|
||
<a href="{{ function('get_privacy_policy_url') }}"> | ||
Privacy Policy | ||
</a> | ||
</p> | ||
{{ footer_widget }} | ||
</div> | ||
</footer> | ||
|
||
{{ function('wp_footer') }}</body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<header> | ||
<div class="obj-width-limiter"> | ||
<a class="cmp-skip-to-content" href="#main">Skip to content</a> | ||
<a class="cmp-skip-to-content" href="#nav">Skip to navigation</a> | ||
</div> | ||
|
||
<div id="nav" class="obj-width-limiter"> | ||
{% block header %} | ||
<div class="cmp-main-nav"> | ||
<div> | ||
<a href="{{ site.url }}" class="cmp-main-nav__home-link" rel=" home">{{ site.name }}</a> | ||
</div> | ||
<nav class="cmp-main-nav__menu" aria-label="Main"> | ||
{% include "partials/menu.twig" %} | ||
</nav> | ||
</div> | ||
{% endblock %} | ||
</div> | ||
</header> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{% extends "base.twig" %} | ||
{% extends "layouts/base.twig" %} | ||
|
||
{% block content %} | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
{% extends "base.twig" %} | ||
{% extends "layouts/base.twig" %} | ||
|
||
{% block content %} | ||
<div class="obj-width-limiter"> | ||
{{ function('get_the_password_form') }} | ||
</div> | ||
<div class="obj-width-limiter"> | ||
{{ function('get_the_password_form') }} | ||
</div> | ||
{% endblock %} |