├── resources
    ├── img
    │   ├── .gitkeep
    │   └── README.md
    ├── js
    │   ├── .gitkeep
    │   ├── editor.js
    │   ├── README.md
    │   └── app.js
    ├── fonts
    │   ├── .gitkeep
    │   └── README.md
    ├── README.md
    ├── scss
    │   ├── 5-blocks
    │   │   ├── block.button.scss
    │   │   ├── block.columns.scss
    │   │   ├── block.cover.scss
    │   │   ├── block.file.scss
    │   │   ├── block.gallery.scss
    │   │   ├── block.group.scss
    │   │   ├── block.heading.scss
    │   │   ├── block.quote.scss
    │   │   ├── block.table.scss
    │   │   ├── block.media-text.scss
    │   │   └── block.seperator.scss
    │   ├── 6-templates
    │   │   ├── singular.scss
    │   │   ├── front-page.scss
    │   │   └── archive.scss
    │   ├── 3-elements
    │   │   ├── html.scss
    │   │   ├── lists.scss
    │   │   ├── figure.scss
    │   │   ├── main.scss
    │   │   ├── images.scss
    │   │   ├── README.md
    │   │   ├── links.scss
    │   │   ├── navigation.scss
    │   │   ├── heading.scss
    │   │   ├── body.scss
    │   │   └── form.scss
    │   ├── 4-components
    │   │   ├── sidebar.scss
    │   │   ├── footer.scss
    │   │   ├── header.scss
    │   │   ├── navigation.toogle.scss
    │   │   ├── logo.scss
    │   │   ├── README.md
    │   │   ├── navigation.meta.scss
    │   │   ├── navigation.footer.scss
    │   │   ├── pagination.scss
    │   │   └── navigation.main.scss
    │   ├── login.scss
    │   ├── 7-utilities
    │   │   ├── container.scss
    │   │   ├── README.md
    │   │   ├── alignment.scss
    │   │   └── screen-reader-text.scss
    │   ├── 2-generic
    │   │   ├── global.scss
    │   │   ├── README.md
    │   │   ├── custom-media-queries.scss
    │   │   └── custom-properties.scss
    │   ├── 1-tools
    │   │   ├── README.md
    │   │   ├── placeholder.copy.scss
    │   │   ├── tools.scss
    │   │   ├── placeholder.headings.scss
    │   │   ├── placeholder.grid.scss
    │   │   ├── placeholder.button.scss
    │   │   ├── placeholder.container.scss
    │   │   └── mixin.fluid-type.scss
    │   ├── README.md
    │   ├── app.scss
    │   └── editor-styles.scss
    └── views
    │   ├── template-parts
    │       ├── foot.php
    │       ├── README.md
    │       ├── sidebar.php
    │       ├── loop.php
    │       ├── loop-search.php
    │       ├── head.php
    │       ├── footer.php
    │       └── header.php
    │   ├── README.md
    │   ├── index.php
    │   ├── sidebar.php
    │   ├── contents
    │       ├── content-page.php
    │       ├── README.md
    │       ├── content.php
    │       ├── content-search.php
    │       ├── content-404.php
    │       ├── content-post.php
    │       ├── content-archive.php
    │       └── content-test.php
    │   ├── footer.php
    │   ├── header.php
    │   ├── 404.php
    │   ├── page-test.php
    │   ├── singular.php
    │   ├── search.php
    │   ├── home.php
    │   ├── front-page.php
    │   └── archive.php
├── .browserslistrc
├── fonts.list
├── index.php
├── CHANGELOG.md
├── .gitignore
├── .editorconfig
├── functions.helpers.php
├── style.css
├── languages
    └── README.md
├── postcss.config.js
├── functions.custom.php
├── .github
    └── workflows
    │   └── php.yml
├── INSTALLATION.md
├── package.json
├── composer.json
├── README.md
├── wpackio.server.js
├── wpackio.project.js
├── composer.lock
└── functions.php


/resources/img/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/js/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/fonts/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 0.25%, not dead


--------------------------------------------------------------------------------
/fonts.list:
--------------------------------------------------------------------------------
1 | Roboto|Roboto+Condensed
2 | 


--------------------------------------------------------------------------------
/resources/README.md:
--------------------------------------------------------------------------------
1 | # Source files
2 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.button.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.columns.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.cover.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.file.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.gallery.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.group.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.heading.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.quote.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.table.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/6-templates/singular.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | // Silence is golden
3 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.media-text.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/resources/scss/5-blocks/block.seperator.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 1.0.0
2 | 
3 | * Initial release
4 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/html.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * <html>
3 |  */
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .env
3 | dist
4 | node_modules
5 | vendor
6 | 


--------------------------------------------------------------------------------
/resources/fonts/README.md:
--------------------------------------------------------------------------------
1 | # Fonts
2 | 
3 | Put local fonts in here
4 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/sidebar.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Sidebar
3 |  */
4 | 


--------------------------------------------------------------------------------
/resources/scss/6-templates/front-page.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Front page
3 |  */
4 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/lists.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Lists
3 |  */
4 | ul {
5 | }
6 | 


--------------------------------------------------------------------------------
/resources/scss/6-templates/archive.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Archive template
3 |  */
4 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/foot.php:
--------------------------------------------------------------------------------
1 | <?php wp_footer() ?>
2 | </body>
3 | </html>
4 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/README.md:
--------------------------------------------------------------------------------
1 | # Partials
2 | 
3 | Put reusable parts in here
4 | 


--------------------------------------------------------------------------------
/resources/js/editor.js:
--------------------------------------------------------------------------------
1 | import '../scss/editor-styles.scss'
2 | 
3 | console.log("Theme Editor Script");


--------------------------------------------------------------------------------
/resources/scss/3-elements/figure.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * <figure>
3 |  */
4 | figure {
5 |     padding: 0;
6 | }
7 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/main.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Main content container
3 |  */
4 | .content {
5 |     flex: 1;
6 | }
7 | 


--------------------------------------------------------------------------------
/resources/scss/login.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  *
3 |  * Stylesheet for login page
4 |  *
5 |  */
6 | @import '0-settings/*.scss';
7 | 


--------------------------------------------------------------------------------
/resources/scss/7-utilities/container.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Container
3 |  */
4 | .container {
5 |     @extend %container;
6 | }
7 | 


--------------------------------------------------------------------------------
/resources/img/README.md:
--------------------------------------------------------------------------------
1 | # Images
2 | 
3 | Put any image required by the theme in here
4 | These images will be compressed by Gulp task
5 | 


--------------------------------------------------------------------------------
/resources/scss/2-generic/global.scss:
--------------------------------------------------------------------------------
1 | :first-child {
2 |     margin-top: 0;
3 | }
4 | 
5 | :last-child {
6 |     margin-bottom: 0;
7 | }
8 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/footer.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Footer
 3 |  */
 4 | .footer {
 5 | 
 6 |     &__container {
 7 | 
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/header.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Header
 3 |  */
 4 | .header {
 5 | 
 6 |     &__container {
 7 | 
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/images.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * <img>
3 |  */
4 | img {
5 |     height: auto;
6 |     max-width: 100%;
7 |     width: auto;
8 | }
9 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/navigation.toogle.scss:
--------------------------------------------------------------------------------
1 | /**
2 |  * Toggle navigation button
3 |  */
4 | .navigation-toggle {
5 |     &__icon {
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/README.md:
--------------------------------------------------------------------------------
1 | # Tools
2 | 
3 | Tools – globally used mixins, placeholders and functions. It’s important not to output any CSS in this layer.
4 | 


--------------------------------------------------------------------------------
/resources/js/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript
2 | 
3 | -   Put JavScript files in this folder.
4 | -   Files are minified and sourcemapped by Gulp and put into the dist folder
5 | 


--------------------------------------------------------------------------------
/resources/scss/2-generic/README.md:
--------------------------------------------------------------------------------
1 | # Generic
2 | 
3 | Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
4 | 


--------------------------------------------------------------------------------
/resources/views/README.md:
--------------------------------------------------------------------------------
1 | # Views
2 | 
3 | **Only put WordPress or custom template files in here**
4 | 
5 | Check: https://wphierarchy.com/ for further template hierarchy documentation
6 | 


--------------------------------------------------------------------------------
/resources/scss/7-utilities/README.md:
--------------------------------------------------------------------------------
1 | # Utilities
2 | 
3 | Utilities – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
4 | 


--------------------------------------------------------------------------------
/resources/views/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Index template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | wp_die(__('Template missing', 'TEXTDOMAIN'));
10 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/README.md:
--------------------------------------------------------------------------------
1 | # Elements
2 | 
3 | Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | trim_trailing_whitespace = true
 8 | indent_style = space
 9 | indent_size = 4
10 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/logo.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Logo
 3 |  *
 4 |  * a.custom-logo-link
 5 |  *   img.custom-logo
 6 |  */
 7 | .custom-logo-link {
 8 | 
 9 | }
10 | 
11 | .custom-logo {
12 | 
13 | }
14 | 


--------------------------------------------------------------------------------
/resources/scss/README.md:
--------------------------------------------------------------------------------
1 | # SCSS
2 | 
3 | We are using [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) file organisation with [BEM](http://getbem.com/) naming convention.
4 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/README.md:
--------------------------------------------------------------------------------
1 | # Components
2 | 
3 | Components – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components
4 | 


--------------------------------------------------------------------------------
/resources/views/sidebar.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /**
3 |  * Sidebar partial
4 |  *
5 |  * Werbeagenten\Aurora
6 |  * @version 1.0.0
7 |  */
8 | get_template_part('resources/views/template-parts/sidebar', get_post_type());
9 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/placeholder.copy.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copy text styles
 3 |  *
 4 |  * Define global copy text styles
 5 |  */
 6 | %copy {
 7 | }
 8 | 
 9 | %copy--large {
10 | }
11 | 
12 | %copy--small {
13 | }
14 | 


--------------------------------------------------------------------------------
/functions.helpers.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /**
3 |  * ------------------------------------------------------------------------------
4 |  * Helper functions
5 |  * ------------------------------------------------------------------------------
6 |  */
7 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/tools.scss:
--------------------------------------------------------------------------------
1 | // @import "./mixin.fluid-type.scss";
2 | // @import "./placeholder.button.scss";
3 | // @import "./placeholder.copy.scss";
4 | // @import "./placeholder.grid.scss";
5 | // @import "./placeholder.headings.scss";


--------------------------------------------------------------------------------
/resources/views/contents/content-page.php:
--------------------------------------------------------------------------------
 1 | <article id="post-<?php the_ID() ?>" <?php post_class('entry') ?>>
 2 | 
 3 |     <div class="entry__content cf">
 4 | 
 5 |         <?php the_content() ?>
 6 | 
 7 |     </div>
 8 | 
 9 | </article>
10 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/sidebar.php:
--------------------------------------------------------------------------------
 1 | <?php if (!is_active_sidebar('sidebar')) {
 2 |     return;
 3 | } ?>
 4 | 
 5 | <section class="sidebar" role="complementary ">
 6 | 
 7 |     <?php dynamic_sidebar('sidebar') ?>
 8 | 
 9 | </section>
10 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/placeholder.headings.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Heading styles
 3 |  *
 4 |  * Define global heading styles for reusage in components
 5 |  */
 6 | 
 7 | %heading--primary {
 8 | }
 9 | 
10 | %heading--secondary {
11 | }
12 | 
13 | %heading--tertiary {
14 | }
15 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Theme Name: Aurora
3 | Theme URI: https://github.com/Horttcore/WordPress-Theme-Boilerplate
4 | Description: WordPress Boilerplate Theme by Ralf Hortt
5 | Author: <a href="https://horttcore.de">Ralf Hortt</a>
6 | Version: 1.0.0
7 | Textdomain: TEXTDOMAIN
8 | */
9 | 


--------------------------------------------------------------------------------
/languages/README.md:
--------------------------------------------------------------------------------
 1 | # Translation
 2 | 
 3 | ## Generate pot file
 4 | Use `wp i18n make-pot` command to generate a .pot file
 5 | 
 6 | ### Example
 7 | 
 8 | `wp i18n make-pot . languages/theme.pot --domain="TEXTDOMAIN"`
 9 | 
10 | ## Usage
11 | Put theme .mo and .po files in here
12 | 


--------------------------------------------------------------------------------
/resources/scss/app.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Site stylesheet
 3 |  */
 4 | @import "1-tools/*.scss";
 5 | @import "2-generic/*.scss";
 6 | @import "3-elements/*.scss";
 7 | @import "4-components/*.scss";
 8 | @import "5-blocks/*.scss";
 9 | @import "6-templates/*.scss";
10 | @import "7-utilities/*.scss";


--------------------------------------------------------------------------------
/resources/views/contents/README.md:
--------------------------------------------------------------------------------
 1 | # Content
 2 | 
 3 | **Only put content files in here**
 4 | 
 5 | Schema:
 6 | 
 7 | -   content.php
 8 | -   content-{postType}.php
 9 | -   content-archive.php
10 | -   content-archive-{postType}.php
11 | -   content-search.php
12 | -   content-404.php
13 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/links.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * <a>
 3 |  */
 4 | a {
 5 |     transition: all var(--animation__duration);
 6 | 
 7 |     &:not([class]) {
 8 |         text-decoration: underline;
 9 | 
10 |         &:hover {
11 |             text-decoration: none;
12 |         }
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/placeholder.grid.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Basic grid container
 3 |  *
 4 |  * @see https://css-tricks.com/patterns-for-practical-css-custom-properties-use/
 5 |  */
 6 | %grid {
 7 |     --columns: auto-fit;
 8 |     display: grid;
 9 |     grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
10 | }
11 | 


--------------------------------------------------------------------------------
/resources/scss/7-utilities/alignment.scss:
--------------------------------------------------------------------------------
 1 | .align {
 2 | 
 3 |     &left {
 4 |         float: left;
 5 |     }
 6 | 
 7 |     &right {
 8 |         float: right;
 9 |     }
10 | 
11 |     &wide {
12 |         @extend %container--wide;
13 |     }
14 | 
15 |     &full {
16 |         @extend %container--full;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/loop.php:
--------------------------------------------------------------------------------
 1 | <div class="posts">
 2 | 
 3 |     <?php
 4 |     while (have_posts()) :
 5 |         the_post();
 6 |         get_template_part('resources/views/contents/content-archive', get_post_type());
 7 |     endwhile;
 8 |     ?>
 9 | 
10 | </div>
11 | 
12 | <?php the_posts_pagination(); ?>
13 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/loop-search.php:
--------------------------------------------------------------------------------
 1 | <div class="posts">
 2 | 
 3 |     <?php
 4 |     while (have_posts()) :
 5 |         the_post();
 6 |         get_template_part('resources/views/contents/content-search', get_post_type());
 7 |     endwhile;
 8 |     ?>
 9 | 
10 | </div>
11 | 
12 | <?php the_posts_pagination(); ?>
13 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/navigation.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * <nav>
 3 |  */
 4 | nav {
 5 | 
 6 |     ul {
 7 |         list-style: none;
 8 |         margin: 0;
 9 |         padding: 0;
10 |     }
11 | 
12 |     li {
13 |         margin: 0;
14 |         padding: 0;
15 |     }
16 | 
17 |     a {
18 |         text-decoration: none;
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/resources/scss/2-generic/custom-media-queries.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Custom media queries
 3 |  *
 4 |  * Defining custom media queries
 5 |  * usage: `@media (--adminbar--sticky);`
 6 |  */
 7 | @custom-media --adminbar--sticky (min-width: 37.5em);
 8 | @custom-media --adminbar--full (min-width: 48.875em);
 9 | @custom-media --mobile-nav (min-width: 48.875em);
10 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/navigation.meta.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Meta navigation
 3 |  *
 4 |  * nav
 5 |  * - ul
 6 |  * -- li
 7 |  * --- a
 8 |  */
 9 | .meta-navigation {
10 |     li {
11 |         display: inline-block;
12 |     }
13 | 
14 |     a {
15 |         &:hover {
16 |         }
17 |     }
18 | 
19 |     .current-menu-item {
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/navigation.footer.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Footer navigation
 3 |  *
 4 |  * nav
 5 |  * - ul
 6 |  * -- li
 7 |  * --- a
 8 |  */
 9 | .footer-navigation {
10 |     li {
11 |         display: inline-block;
12 |     }
13 | 
14 |     a {
15 |         &:hover {
16 |         }
17 |     }
18 | 
19 |     .current-menu-item {
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable global-require, import/no-extraneous-dependencies */
2 | module.exports = {
3 | 	// You can add more plugins and other postcss config
4 | 	// For more info see
5 | 	// <https://github.com/postcss/postcss-loader#configuration>
6 | 	// There is no need to use cssnano, webpack takes care of it!
7 | 	plugins: [require('autoprefixer')],
8 | };
9 | 


--------------------------------------------------------------------------------
/resources/views/footer.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Footer
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  * Footer
12 |  */
13 | get_template_part('resources/views/template-parts/footer', get_post_type());
14 | 
15 | 
16 | /**
17 |  * Foot
18 |  */
19 | get_template_part('resources/views/template-parts/foot', get_post_type());
20 | 


--------------------------------------------------------------------------------
/resources/views/header.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Header
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  * <head>
12 |  */
13 | get_template_part('resources/views/template-parts/head', get_post_type());
14 | 
15 | 
16 | /**
17 |  * Header
18 |  */
19 | get_template_part('resources/views/template-parts/header', get_post_type());
20 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/heading.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * <h>
 3 |  */
 4 | h1,
 5 | h2,
 6 | h3,
 7 | h4,
 8 | h5,
 9 | h6 {
10 |     font-family: var(--font__heading);
11 | }
12 | 
13 | h1 {
14 |     @extend %heading--primary !optional;
15 | }
16 | 
17 | h2 {
18 |     @extend %heading--secondary !optional;
19 | }
20 | 
21 | h3 {
22 |     @extend %heading--teritary !optional;
23 | }
24 | 


--------------------------------------------------------------------------------
/resources/views/contents/content.php:
--------------------------------------------------------------------------------
 1 | <article id="post-<?php the_ID() ?>" <?php post_class('entry') ?> role="main">
 2 | 
 3 |     <header class="entry__header">
 4 | 
 5 |         <h1 class="entry__title"><?php the_title() ?></h1>
 6 | 
 7 |     </header>
 8 | 
 9 |     <div class="entry__content cf">
10 | 
11 |         <?php the_content() ?>
12 | 
13 |     </div>
14 | 
15 | </article>
16 | 


--------------------------------------------------------------------------------
/resources/views/contents/content-search.php:
--------------------------------------------------------------------------------
 1 | <article id="post-<?php the_ID() ?>" <?php post_class('entry') ?> role="main">
 2 | 
 3 |     <header class="entry__header">
 4 | 
 5 |         <h1 class="entry__title"><?php the_title() ?></h1>
 6 | 
 7 |     </header>
 8 | 
 9 |     <div class="entry__content cf">
10 | 
11 |         <?php the_content() ?>
12 | 
13 |     </div>
14 | 
15 | </article>
16 | 


--------------------------------------------------------------------------------
/resources/views/contents/content-404.php:
--------------------------------------------------------------------------------
 1 | <article id="post-error-404" <?php post_class('entry') ?>>
 2 | 
 3 |     <h1 class="entry__title"><?php _e('Seite nicht gefunden', 'TEXTDOMAIN') ?></h1>
 4 | 
 5 |     <div class="entry__content cf">
 6 | 
 7 |         <p><?php _e('Der von Ihnen gewünschte Inhalt konnte nicht gefunden werden', 'TEXTDOMAIN') ?></p>
 8 | 
 9 |     </div>
10 | 
11 | </article>
12 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/head.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html <?php language_attributes(); ?>>
 3 | <head>
 4 | <meta charset="<?php bloginfo('charset'); ?>" />
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | <meta name="viewport" content="width=device-width, initial-scale=1">
 7 | <?php wp_head(); ?>
 8 | </head>
 9 | 
10 | <body <?php body_class(); ?>>
11 | <?php wp_body_open(); ?>
12 | 


--------------------------------------------------------------------------------
/resources/scss/editor-styles.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Editor stylesheet
 4 |  *
 5 |  * Editor styles should be added on a try and error basis 
 6 |  *
 7 |  */
 8 | // @import "1-tools/*.scss";
 9 | // @import "2-generic/*.scss";
10 | // @import "3-elements/*.scss";
11 | // @import "4-components/*.scss";
12 | // @import "5-blocks/*.scss";
13 | // @import "6-templates/*.scss";
14 | // @import "7-utilities/*.scss";
15 | 


--------------------------------------------------------------------------------
/resources/views/contents/content-post.php:
--------------------------------------------------------------------------------
 1 | <article id="post-<?php the_ID() ?>" <?php post_class('entry') ?>>
 2 | 
 3 |     <header class="entry__header">
 4 | 
 5 |         <div class="entry-date"><?php the_date() ?></div>
 6 | 
 7 |         <h1 class="entry__title"><?php the_title() ?></h1>
 8 | 
 9 |     </header>
10 | 
11 |     <div class="entry__content cf">
12 | 
13 |         <?php the_content() ?>
14 | 
15 |     </div>
16 | 
17 | </article>
18 | 


--------------------------------------------------------------------------------
/functions.custom.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * ------------------------------------------------------------------------------
 4 |  * Helper functions
 5 |  * ------------------------------------------------------------------------------
 6 |  */
 7 | function inlineSvg(int $attachmentId): string
 8 | {
 9 |     $type = get_post_mime_type($attachmentId);
10 |     if ( 'image/svg+xml' != $type )
11 |         return '';
12 | 
13 |     return file_get_contents(get_attached_file($attachmentId));
14 | }
15 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/placeholder.button.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Button styles
 3 |  *
 4 |  * Define global button styles
 5 |  */
 6 | 
 7 | %button {
 8 |     align-items: center;
 9 |     display: inline-flex;
10 |     font-family: inherit;
11 |     line-height: 1;
12 | }
13 | 
14 | %button--primary {
15 |     @extend %button;
16 | }
17 | 
18 | %button--secondary {
19 |     @extend %button;
20 | }
21 | 
22 | %button--text {
23 |     @extend %button;
24 | }
25 | 
26 | %button--cancel {
27 |     @extend %button;
28 | }
29 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/body.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * <body>
 3 |  */
 4 | body {
 5 |     background-color: var(--color__white);
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     font-family: var(--font__copy);
 9 |     line-height: 1.5;
10 |     min-height: 100vh;
11 |     overflow-x: hidden;
12 | 
13 |     &.admin-bar {
14 |         min-height: calc(100vh - var(--adminbar__height--narrow));
15 | 
16 |         @media (--adminbar--full) {
17 |             min-height: calc(100vh - var(--adminbar__height));
18 |         }
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/resources/views/contents/content-archive.php:
--------------------------------------------------------------------------------
 1 | <article id="post-<?php the_ID() ?>" <?php post_class('entry') ?>>
 2 | 
 3 |     <header class="entry__header">
 4 | 
 5 |         <div class="entry__date"><?php the_time(get_option('date_format')) ?></div>
 6 | 
 7 |         <h1 class="entry__title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
 8 | 
 9 |     </header>
10 | 
11 |     <div class="entry__content cf">
12 | 
13 |         <?php the_content(__('Weiterlesen &raquo;', 'TEXTDOMAIN')) ?>
14 | 
15 |     </div>
16 | 
17 | </article>
18 | 


--------------------------------------------------------------------------------
/resources/scss/3-elements/form.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Input
 3 |  */
 4 | input[type='text'],
 5 | input[type='email'],
 6 | input[type='password'],
 7 | input[type='number'],
 8 | textarea {
 9 | }
10 | 
11 | /**
12 |  * Input options
13 |  */
14 | input[type='checkbox'],
15 | input[type='radio'] {
16 |     width: auto;
17 | }
18 | 
19 | /**
20 |  * Submit button
21 |  */
22 | button[type='submit'],
23 | input[type='submit'] {
24 |     @extend %button--primary !optional;
25 | }
26 | 
27 | /**
28 |  * Textarea
29 |  */
30 | textarea {
31 |     resize: vertical;
32 | }
33 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/footer.php:
--------------------------------------------------------------------------------
 1 | <footer class="footer">
 2 | 
 3 |     <div class="footer__container container">
 4 | 
 5 |         <?php
 6 |         wp_nav_menu(array(
 7 |             'theme_location'    => 'footer',
 8 |             'container'         => 'nav',
 9 |             'container_class'   => 'footer-navigation',
10 |             'container_id'      => 'footer-navigation',
11 |             'menu_class'        => '',
12 |             'menu_id'           => '',
13 |             'before'            => '',
14 |             'fallback_cb'       => '',
15 |         ));
16 |         ?>
17 | 
18 |     </div>
19 | 
20 | </footer>
21 | 


--------------------------------------------------------------------------------
/.github/workflows/php.yml:
--------------------------------------------------------------------------------
 1 | name: PHP Composer
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     steps:
11 |     - uses: actions/checkout@v1
12 | 
13 |     - name: Validate composer.json and composer.lock
14 |       run: composer validate
15 | 
16 |     - name: Install dependencies
17 |       run: composer install --prefer-dist --no-progress --no-suggest
18 | 
19 |     # Add a test script to composer.json, for instance: "test": "vendor/bin/phpunit"
20 |     # Docs: https://getcomposer.org/doc/articles/scripts.md
21 | 
22 |     # - name: Run test suite
23 |     #   run: composer run-script test
24 | 


--------------------------------------------------------------------------------
/resources/scss/2-generic/custom-properties.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Custom Properties
 3 |  *
 4 |  * Defining custom properties
 5 |  * usage: `color: var(--color-primary);`
 6 |  */
 7 | :root {
 8 |     // Font stacks
 9 |     --font__copy: sans-serif;
10 |     --font__heading: sans-serif;
11 |     // Color by name
12 |     --color__black: #000;
13 |     --color__white: #fff;
14 |     // Color by usage
15 |     --color__primary: red;
16 |     --color__secondary: green;
17 |     --color__tertiary: blue;
18 |     --color__accent: yellow;
19 |     // Animation
20 |     --animation__duration: .2s;
21 |     // Misc
22 |     --adminbar__height--narrow: 32px;
23 |     --adminbar__height: 46px;
24 | }
25 | 


--------------------------------------------------------------------------------
/resources/views/404.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * 404 template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  * Header
12 |  */
13 | get_template_part('resources/views/header', '404');
14 | 
15 | 
16 | /**
17 |  * Content
18 |  */
19 | ?>
20 | <div class="content">
21 | 
22 |     <div class="container">
23 | 
24 |         <main class="main">
25 | 
26 |             <?php get_template_part('resources/views/contents/content', '404') ?>
27 | 
28 |         </main>
29 | 
30 |         <?php get_template_part('resources/views/template-parts/sidebar', '404') ?>
31 | 
32 |     </div>
33 | 
34 | </div>
35 | 
36 | <?php
37 | /**
38 |  * Footer
39 |  */
40 | get_template_part('resources/views/footer', '404');
41 | 


--------------------------------------------------------------------------------
/INSTALLATION.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | 
 3 | ## Requirements
 4 | 
 5 | -   [composer](https://getcomposer.org/)
 6 | -   [node](https://nodejs.org/)
 7 | -   [npm](https://nodejs.org/) / [yarn](https://yarnpkg.com/)
 8 | -   [bower](https://bower.io/)
 9 | 
10 | ## Optional
11 | 
12 | -   [phpcs](https://github.com/squizlabs/PHP_CodeSniffer)
13 | -   [phpmd](https://phpmd.org/)
14 | -   [phpcbf](https://github.com/squizlabs/PHP_CodeSniffer/wiki/Fixing-Errors-Automatically)
15 | -   [eslint](https://eslint.org/)
16 | -   [stylelint](https://stylelint.io/)
17 | 
18 | ## Installation
19 | 
20 | -   Run `composer create-project ralfhortt/aurora my-theme`
21 | -   Run `npm install` or `yarn` to install dependencies
22 | -   Edit `.env` for browser sync support
23 | 


--------------------------------------------------------------------------------
/resources/scss/7-utilities/screen-reader-text.scss:
--------------------------------------------------------------------------------
 1 | .screen-reader-text {
 2 |     border: 0;
 3 |     clip: rect(1px, 1px, 1px, 1px);
 4 |     clip-path: inset(50%);
 5 |     height: 1px;
 6 |     margin: -1px;
 7 |     overflow: hidden;
 8 |     padding: 0;
 9 |     position: absolute;
10 |     width: 1px;
11 |     word-wrap: normal !important;
12 | }
13 | 
14 | .screen-reader-text:focus {
15 |     background-color: #eee;
16 |     clip: auto !important;
17 |     clip-path: none;
18 |     color: #444;
19 |     display: block;
20 |     font-size: 1em;
21 |     height: auto;
22 |     left: 5px;
23 |     line-height: normal;
24 |     padding: 15px 23px 14px;
25 |     text-decoration: none;
26 |     top: 5px;
27 |     width: auto;
28 |     z-index: 100000; /* Above WP toolbar. */
29 | }
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "derweili-wordpress-starter-theme",
 3 |   "version": "1.0.0",
 4 |   "description": "A new WordPress Boilerplate Theme by Horttcore",
 5 |   "author": "TW Werbeagenten Heidelberg GmbH <mail@werbeagenten.de>",
 6 |   "license": "GPL-2.0+",
 7 |   "homepage": "https://werbeagenten.de",
 8 |   "scripts": {
 9 |     "bootstrap": "wpackio-scripts bootstrap",
10 |     "build": "wpackio-scripts build",
11 |     "start": "wpackio-scripts start",
12 |     "archive": "wpackio-scripts pack"
13 |   },
14 |   "devDependencies": {
15 |     "@wpackio/scripts": "^4.4.1",
16 |     "fork-ts-checker-webpack-plugin": "^5.0.14",
17 |     "node-sass": "^4.14.1"
18 |   },
19 |   "dependencies": {
20 |     "@wpackio/entrypoint": "^4.4.1",
21 |     "node-sass-glob-importer": "^5.3.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/placeholder.container.scss:
--------------------------------------------------------------------------------
 1 | %container {
 2 |     margin-left: auto;
 3 |     margin-right: auto;
 4 |     max-width: calc(2em + var(--content-width));
 5 |     padding-left: 1em;
 6 |     padding-right: 1em;
 7 |     width: 100%;
 8 | 
 9 |     @media (--adminbar--full) {
10 |         max-width: calc(4em + var(--content-width));
11 |         padding-left: 2em;
12 |         padding-right: 2em;
13 |     }
14 | 
15 |     &--wide {
16 |         @media (min-width: 950px) {
17 |             left: calc(50% - 50vw);
18 |             margin-left: -125px;
19 |             margin-right: -125px;
20 |             max-width: 100vw;
21 |             position: relative;
22 |         }
23 |     }
24 | 
25 |     &--full {
26 |         left: calc(50% - 50vw);
27 |         position: relative;
28 |         width: 100vw;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/resources/views/page-test.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Blog template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  * Header
12 |  */
13 | get_template_part('resources/views/header', get_post_type());
14 | 
15 | 
16 | /**
17 |  * Content
18 |  */
19 | ?>
20 | <div class="content">
21 | 
22 |     <div class="container">
23 | 
24 |         <main class="main">
25 | 
26 |             <?php
27 |             the_post();
28 |             get_template_part('resources/views/contents/content', 'test');
29 |             ?>
30 | 
31 |         </main>
32 | 
33 |         <?php get_template_part('resources/views/template-parts/sidebar', get_post_type()) ?>
34 | 
35 |     </div>
36 | 
37 | </div>
38 | 
39 | <?php
40 | /**
41 |  * Footer
42 |  */
43 | get_template_part('resources/views/footer', get_post_type());
44 | 


--------------------------------------------------------------------------------
/resources/views/singular.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Single view template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  * Header
12 |  */
13 | get_template_part('resources/views/header', get_post_type());
14 | 
15 | 
16 | /**
17 |  * Content
18 |  */
19 | ?>
20 | <div class="content">
21 | 
22 |     <div class="container">
23 | 
24 |         <main class="main">
25 | 
26 |             <?php
27 |             the_post();
28 |             get_template_part('resources/views/contents/content', get_post_type());
29 |             ?>
30 | 
31 |         </main>
32 | 
33 |         <?php get_template_part('resources/views/template-parts/sidebar', get_post_type()) ?>
34 | 
35 |     </div>
36 | 
37 | </div>
38 | 
39 | <?php
40 | /**
41 |  * Footer
42 |  */
43 | get_template_part('resources/views/footer', get_post_type());
44 | 


--------------------------------------------------------------------------------
/resources/scss/1-tools/mixin.fluid-type.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Fluid type
 3 |  *
 4 |  * @see https://github.com/robertraichle/fluid-type-mixin
 5 |  */
 6 | @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
 7 |     @each $property in $properties {
 8 |         #{$property}: $min-value;
 9 |     }
10 | 
11 |     @media screen and (min-width: $min-vw) {
12 |         @each $property in $properties {
13 |             #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
14 |         }
15 |     }
16 | 
17 |     @media screen and (min-width: $max-vw) {
18 |         @each $property in $properties {
19 |             #{$property}: $max-value;
20 |         }
21 |     }
22 | }
23 | 
24 | @function strip-unit($value) {
25 |     @return $value / ($value * 0 + 1);
26 | }
27 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/pagination.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Pagination
 3 |  *
 4 |  * nav.pagination
 5 |  *     h2.screen-reader-text
 6 |  *     div.nav-links
 7 |  *         a.prev
 8 |  *         span.current
 9 |  *         a.page-numbers
10 |  *         span.dots
11 |  *         a.page-numbers
12 |  *         a.next
13 |  */
14 | .pagination {
15 |     margin-top: 4em;
16 | }
17 | 
18 | .page-numbers {
19 |     // background-color: var(--color__grey);
20 |     // color: var(--color__primary);
21 |     line-height: 1;
22 |     padding: .25em .5em;
23 | 
24 |     &:not(.dots):not(.current):hover {
25 |         // background-color: var(--color__grey--dark);
26 |         // color: var(--color__white);
27 |     }
28 | }
29 | 
30 | .prev,
31 | .dots,
32 | .next {
33 |     // background-color: transparent;
34 | }
35 | 
36 | .current {
37 |     // background-color: var(--color__primary);
38 |     // color: var(--color__white);
39 | }
40 | 


--------------------------------------------------------------------------------
/resources/views/search.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Search template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  *
12 |  * <head>
13 |  *
14 |  */
15 | get_template_part('resources/views/header', 'search');
16 | 
17 | 
18 | /**
19 |  *
20 |  * Content loop
21 |  *
22 |  */
23 | ?>
24 | <div class="content">
25 | 
26 |     <div class="container">
27 | 
28 |         <main class="main">
29 | 
30 |             <h1 class="archive-title"><?php printf(__('Suchergebnis für: %s'), get_search_query()) ?></h1>
31 | 
32 |             <?php get_template_part('resources/views/template-parts/loop') ?>
33 | 
34 |         </main>
35 | 
36 |         <?php get_template_part('resources/views/template-parts/sidebar', get_post_type()) ?>
37 | 
38 |     </div>
39 | 
40 | </div>
41 | 
42 | 
43 | <?php
44 | /**
45 |  *
46 |  * Footer
47 |  *
48 |  */
49 | get_template_part('resources/views/footer', 'search');
50 | 


--------------------------------------------------------------------------------
/resources/views/home.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Blog template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  *
12 |  * <head>
13 |  *
14 |  */
15 | get_template_part('resources/views/header', 'blog');
16 | 
17 | 
18 | /**
19 |  *
20 |  * Content loop
21 |  *
22 |  */
23 | ?>
24 | <div class="content">
25 | 
26 |     <div class="container">
27 | 
28 |         <main class="main">
29 | 
30 |             <h1 class="archive-title"><?php echo single_cat_title() ?></h1>
31 | 
32 |             <?php get_template_part('resources/views/template-parts/loop', 'blog') ?>
33 | 
34 |         </main><!-- .main -->
35 | 
36 |         <?php get_template_part('resources/views/template-parts/sidebar', 'blog') ?>
37 | 
38 |     </div><!-- .container -->
39 | 
40 | </div><!-- .content -->
41 | 
42 | 
43 | <?php
44 | /**
45 |  *
46 |  * Footer
47 |  *
48 |  */
49 | get_template_part('resources/views/footer', 'blog');
50 | 


--------------------------------------------------------------------------------
/resources/views/front-page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Header
 5 |  *
 6 |  * Werbeagenten\Aurora
 7 |  * @version 1.0.0
 8 |  */
 9 | 
10 | 
11 | /**
12 |  * <head>
13 |  */
14 | get_template_part('resources/views/template-parts/head', get_post_type());
15 | 
16 | 
17 | /**
18 |  * Header
19 |  */
20 | get_template_part('resources/views/template-parts/header', get_post_type());
21 | 
22 | 
23 | /**
24 |  * Content
25 |  */
26 | ?>
27 | <div class="content">
28 | 
29 |     <div class="container">
30 | 
31 |         <main class="main">
32 | 
33 |             <?php
34 |             while (have_posts()) :
35 |                 the_post();
36 |                 get_template_part('resources/views/contents/content', get_post_type());
37 |             endwhile;
38 |             ?>
39 | 
40 |         </main>
41 | 
42 |         <?php get_template_part('resources/views/template-parts/sidebar', get_post_type()) ?>
43 | 
44 |     </div>
45 | 
46 | </div>
47 | 
48 | <?php
49 | /**
50 |  * Footer
51 |  */
52 | get_template_part('resources/views/footer', get_post_type());
53 | 


--------------------------------------------------------------------------------
/resources/views/archive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Single view template
 4 |  *
 5 |  * Werbeagenten\Aurora
 6 |  * @version 1.0.0
 7 |  */
 8 | 
 9 | 
10 | /**
11 |  * Header
12 |  */
13 | get_template_part('resources/views/header', get_post_type());
14 | 
15 | 
16 | /**
17 |  * Content
18 |  */
19 | ?>
20 | <div class="content">
21 | 
22 |     <div class="container">
23 | 
24 |         <main class="main">
25 | 
26 |             <?php the_archive_title('<h1 class="archive__title">', '</h1>') ?>
27 | 
28 |             <div class="posts">
29 | 
30 |                 <?php
31 |                 while (have_posts()) :
32 |                     the_post();
33 |                     get_template_part('resources/views/contents/content-archive', get_post_type());
34 |                 endwhile;
35 |                 ?>
36 | 
37 |             </div>
38 | 
39 |             <?php the_posts_pagination(); ?>
40 | 
41 |         </main>
42 | 
43 |         <?php get_template_part('resources/views/template-parts/sidebar', get_post_type()) ?>
44 | 
45 |     </div>
46 | 
47 | </div>
48 | 
49 | <?php
50 | /**
51 |  * Footer
52 |  */
53 | get_template_part('resources/views/footer', get_post_type());
54 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "derweili/wordpress-starter-theme",
 3 |     "description": "WordPress Starter Theme",
 4 |     "type": "wordpress-theme",
 5 |     "autoload": {
 6 |         "psr-4": {
 7 |             "Werbeagenten\\Aurora\\": "src/classes/"
 8 |         },
 9 |         "files": [
10 |             "functions.custom.php",
11 |             "functions.helpers.php"
12 |         ]
13 |     },
14 |     "require": {
15 |         "horttcore/wp-customizer": "*",
16 |         "horttcore/wp-assets": "*",
17 |         "ralfhortt/wp-template-loader": "*",
18 |         "ralfhortt/wp-image-sizes": "*",
19 |         "ralfhortt/wp-content-width": "*",
20 |         "wpackio/enqueue": "^2.2"
21 |     },
22 |     "scripts": {
23 |         "post-create-project-cmd": "composer run-script replace-textdomain && composer run-script copy-env",
24 |         "replace-textdomain": "DIR=$(basename $PWD); LC_ALL=C find ./ -not \\( -path \".//vendor/*\" -o -path \".//node_modules/*\" -o -path \".//.git/*\" \\) -type f \\( -iname '*.js' -o -iname '*.php' -o -iname '*.css' \\) -exec sed -i '' -e \"s/TEXTDOMAIN/${DIR}/g\" {} \\;",
25 |         "copy-env": "cp .env.example .env"
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/resources/views/template-parts/header.php:
--------------------------------------------------------------------------------
 1 | <a class="screen-reader-text" href="#main-navigation"><?php _e('Zum Inhalt', 'TEXTDOMAIN') ?></a>
 2 | <a class="screen-reader-text" href="#main-navigation"><?php _e('Zum Hauptmenü', 'TEXTDOMAIN') ?></a>
 3 | 
 4 | <header class="header" role="banner">
 5 | 
 6 |     <div class="header__container container">
 7 | 
 8 |         <?php the_custom_logo() ?>
 9 | 
10 |         <button class="navigation-toggle"><span class="navigation-toggle__icon"></span></button>
11 | 
12 |         <?php
13 |         wp_nav_menu(array(
14 |             'theme_location'    => 'main',
15 |             'container'         => 'nav',
16 |             'container_class'   => 'main-navigation',
17 |             'container_id'      => 'main-navigation',
18 |             'menu_class'        => '',
19 |             'menu_id'           => '',
20 |             'before'            => '',
21 |             'fallback_cb'       => '',
22 |         ));
23 |         ?>
24 | 
25 |         <?php
26 |         wp_nav_menu(array(
27 |             'theme_location'    => 'meta',
28 |             'container'         => 'nav',
29 |             'container_class'   => 'meta-navigation',
30 |             'container_id'      => 'meta-navigation',
31 |             'menu_class'        => '',
32 |             'menu_id'           => '',
33 |             'before'            => '',
34 |             'fallback_cb'       => '',
35 |         ));
36 |         ?>
37 | 
38 |     </div>
39 | 
40 | </header>
41 | 


--------------------------------------------------------------------------------
/resources/js/app.js:
--------------------------------------------------------------------------------
 1 | import '../scss/app.scss'
 2 | 
 3 | const App = {
 4 |     /**
 5 |      * Cache elenents and bind events
 6 |      */
 7 |     boot: function() {
 8 |         // Cache elements for reusing
 9 |         App.html = jQuery("html");
10 |         App.body = jQuery("body");
11 |         App.toggleNavButton = jQuery(".navigation-toggle");
12 |         App.toggleSubNavButton = jQuery(".menu-item-has-children > a");
13 | 
14 |         App.bindings();
15 |     },
16 | 
17 |     /**
18 |      * Bind events
19 |      */
20 |     bindings: function() {
21 |         App.toggleNavButton.click(function(e) {
22 |             e.preventDefault();
23 |             App.toggleNav();
24 |         });
25 | 
26 |         App.toggleSubNavButton.click(function(e) {
27 |             if (!App.toggleNavButton.is(":visible")) return;
28 | 
29 |             e.preventDefault();
30 |             App.toggleSubNav(jQuery(this));
31 |         });
32 |     },
33 | 
34 |     /**
35 |      * Toogle nav
36 |      */
37 |     toggleNav: function() {
38 |         App.body.toggleClass("nav-is--visible");
39 |     },
40 | 
41 |     /**
42 |      * Toggle subnav
43 |      */
44 |     toggleSubNav: function(button) {
45 |         let container = button.parent();
46 |         let subnav = container.find("> ul");
47 | 
48 |         container.toggleClass("subnav-is--visible");
49 |         subnav.slideToggle();
50 |     }
51 | };
52 | 
53 | jQuery(document).ready(function() {
54 |     App.boot();
55 | });
56 | 
57 | console.log('theme app js')


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Aurora Theme
 2 | 
 3 | ## Documentation
 4 | 
 5 | Every folder contains a `README.md` with further instructions
 6 | 
 7 | ## Installation
 8 | 
 9 | `$ composer create-project ralfhortt/wordpress-theme-boilerplate`
10 | Check `INSTALLATION.md` for detailed installation steps
11 | 
12 | ## Build Process
13 | 
14 | ### Fonts
15 | 
16 | -   Set Google fonts url in `fonts.list` file
17 | -   Run `npm run fonts` or `yarn fonts` for downloading google fonts
18 | 
19 | ### Production
20 | 
21 | -   Run `npm run production` or `yarn production` for production build
22 | 
23 | ### Development
24 | 
25 | -   Run `npm run dev` or `yarn dev` on development systems
26 | 
27 | #### Linters
28 | 
29 | Run `npm run lint` or `yarn lint` linting files
30 | 
31 | -   [phpcs](https://github.com/squizlabs/PHP_CodeSniffer) ([VScode](https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs))
32 | -   [phpmd](https://phpmd.org/) ([VScode](https://marketplace.visualstudio.com/items?itemName=ecodes.vscode-phpmd))
33 | -   [eslint](https://eslint.org/) ([VScode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint))
34 | -   [stylelint](https://stylelint.io/) ([VScode](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint))
35 | 
36 | #### Fixers
37 | 
38 | Run `npm run fix` or `yarn fix` for auto fixing
39 | 
40 | -   [eslint](https://eslint.org/)
41 | -   [stylelint](https://stylelint.io/)
42 | -   [phpcbf](https://github.com/squizlabs/PHP_CodeSniffer/wiki/Fixing-Errors-Automatically)
43 | 


--------------------------------------------------------------------------------
/wpackio.server.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	// Your LAN IP or host where you would want the live server
 3 | 	// Override this if you know your correct external IP (LAN)
 4 | 	// Otherwise, the system will always use localhost and will not
 5 | 	// work for external IP.
 6 | 	// This will also create some issues with file watching because for
 7 | 	// some reason, service-worker doesn't work on localhost?
 8 | 	// https://github.com/BrowserSync/browser-sync/issues/1295
 9 | 	// So it is recommended to change this to your LAN IP.
10 | 	// If you intend to access it from your LAN (probably do?)
11 | 	// If you keep null, then wpackio-scripts will try to determine your LAN IP
12 | 	// on it's own, which might not always be satisfying. But it is in most cases.
13 | 	host: undefined,
14 | 	// Your WordPress development server address
15 | 	// This is super important
16 | 	proxy: 'https://themetest.test/',
17 | 	// PORT on your localhost where you would want live server to hook
18 | 	port: 3000,
19 | 	// UI passed directly to browsersync
20 | 	ui: {
21 | 		port: 3001,
22 | 	},
23 | 	// Whether to show the "BrowserSync Connected"
24 | 	notify: false,
25 | 	// Open the local URL, set to false to disable
26 | 	open: true,
27 | 	// BrowserSync ghostMode, set to false to completely disable
28 | 	ghostMode: {
29 | 		clicks: true,
30 | 		scroll: true,
31 | 		forms: true,
32 | 	},
33 | 	// Override system calculated public path of the `dist` directory
34 | 	// This must have forward slash, otherwise it will not work.
35 | 	distPublicPath: undefined,
36 | };
37 | 


--------------------------------------------------------------------------------
/resources/scss/4-components/navigation.main.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Header navigation
 3 |  *
 4 |  * nav
 5 |  * - ul
 6 |  * -- li
 7 |  * --- a
 8 |  * --- ul
 9 |  * ---- …
10 |  */
11 | .main-navigation {
12 | 
13 |     @media (--mobile-nav) {
14 |         /* LVL 1 */
15 |         > ul {
16 |             display: inline-flex;
17 | 
18 |             > li {
19 |                 position: relative;
20 | 
21 |                 /* Hover LVL 1 */
22 |                 &:hover {
23 | 
24 |                     > a {
25 |                     }
26 |                 }
27 | 
28 |                 > a {
29 |                 }
30 | 
31 |                 /* LVL 2 */
32 |                 &:hover {
33 | 
34 |                     > ul {
35 |                         height: auto;
36 |                         opacity: 1;
37 |                         overflow: visible;
38 |                     }
39 |                 }
40 | 
41 |                 > ul {
42 |                     height: 0;
43 |                     left: 0;
44 |                     opacity: 0;
45 |                     overflow: hidden;
46 |                     position: absolute;
47 |                     top: 100%;
48 |                     width: 240px;
49 | 
50 |                     > li {
51 |                         position: relative;
52 | 
53 |                         /* Hover LVL 2 */
54 |                         &:hover {
55 | 
56 |                             > a {
57 |                             }
58 |                         }
59 | 
60 |                         > a {
61 |                             display: block;
62 |                         }
63 |                     }
64 | 
65 |                     /* Highlight LVL 2 */
66 |                     > .current-menu-ancestor,
67 |                     > .current-menu-item {
68 | 
69 |                         > a {
70 |                         }
71 |                     }
72 |                 }
73 |             }
74 | 
75 |             /* Highlight LVL 1 */
76 |             > .current-menu-ancestor,
77 |             > .current-menu-item {
78 | 
79 |                 > a {
80 |                 }
81 |             }
82 |         }
83 |     }
84 | }
85 | 


--------------------------------------------------------------------------------
/wpackio.project.js:
--------------------------------------------------------------------------------
  1 | const pkg = require('./package.json');
  2 | 
  3 | const globImporter = require('node-sass-glob-importer');
  4 | 
  5 | /**
  6 |  * Add node-sass-glob-importer to exsting webpack configuration
  7 |  * 
  8 |  * @param {*} config 
  9 |  * @param {*} merge 
 10 |  * @param {*} appDir 
 11 |  * @param {*} isDev 
 12 |  */
 13 | const addNodeSassGlobImporter = (config, merge, appDir, isDev) => {
 14 | 	// Create a new config
 15 | 	const newConfig = { ...config };
 16 | 
 17 | 	/**
 18 | 	 * Get rule and use index of the loader
 19 | 	 */
 20 | 	let sassRuleIndex = null;
 21 | 	let sassUseIndex = null;
 22 | 	
 23 | 	for (let ruleIndex = 0; ruleIndex < newConfig.module.rules.length; ruleIndex++) {
 24 | 		
 25 | 		const rule = newConfig.module.rules[ruleIndex];
 26 | 
 27 | 		for (let useIndex = 0; useIndex < rule.use.length; useIndex++) {
 28 | 			if( rule.use[useIndex].loader.includes('sass-loader') ) {
 29 | 				sassRuleIndex = ruleIndex;
 30 | 				sassUseIndex = useIndex;
 31 | 
 32 | 				break;
 33 | 			}
 34 | 		}
 35 | 		
 36 | 		if(sassRuleIndex !== null ) break;
 37 | 	}
 38 | 	
 39 | 	// add new sassOptions object to the sass-loader options
 40 | 	newConfig.module.rules[sassRuleIndex].use[sassUseIndex].options.sassOptions = {};
 41 | 	newConfig.module.rules[sassRuleIndex].use[sassUseIndex].options.sassOptions.importer = globImporter();
 42 | 	
 43 | 	return newConfig;
 44 | }
 45 | 
 46 | module.exports = {
 47 | 	// Project Identity
 48 | 	appName: 'derweiliWordPressStarterTheme', // Unique name of your project
 49 | 	type: 'theme', // Plugin or theme
 50 | 	slug: 'derweili-wordpress-starter-theme', // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
 51 | 	// Used to generate banners on top of compiled stuff
 52 | 	bannerConfig: {
 53 | 		name: 'derweiliWordPressStarterTheme',
 54 | 		author: 'derweili <jw@derweili.de>',
 55 | 		license: 'GPL-2.0+',
 56 | 		link: 'GPL-2.0+',
 57 | 		version: pkg.version,
 58 | 		copyrightText:
 59 | 			'This software is released under the GPL-2.0+ License\nhttps://opensource.org/licenses/GPL-2.0+',
 60 | 		credit: true,
 61 | 	},
 62 | 	// Files we need to compile, and where to put
 63 | 	files: [
 64 | 		// If this has length === 1, then single compiler
 65 | 		{
 66 | 			name: 'app',
 67 | 			entry: {
 68 | 				// mention each non-interdependent files as entry points
 69 | 		     // The keys of the object will be used to generate filenames
 70 | 		     // The values can be string or Array of strings (string|string[])
 71 | 		     // But unlike webpack itself, it can not be anything else
 72 | 		     // <https://webpack.js.org/concepts/#entry>
 73 | 		     // You do not need to worry about file-size, because we would do
 74 | 		     // code splitting automatically. When using ES6 modules, forget
 75 | 		     // global namespace pollutions 😉
 76 | 				// vendor: './src/mobile/vendor.js', // Could be a string
 77 | 				main: [
 78 | 					'./resources/js/app.js',
 79 | 				], // Or an array of string (string[])
 80 | 				editor: [
 81 | 					'./resources/js/editor.js',
 82 | 				], // Or an array of string (string[])
 83 | 			},
 84 | 			/**
 85 | 			 * Extend webpack configuration to support node-sass-glob-importer
 86 | 			 */
 87 | 			webpackConfig: addNodeSassGlobImporter
 88 | 		},
 89 | 		// If has more length, then multi-compiler
 90 | 	],
 91 | 	// Output path relative to the context directory
 92 | 	// We need relative path here, else, we can not map to publicPath
 93 | 	outputPath: 'dist',
 94 | 	// Project specific config
 95 | 	// Needs react(jsx)?
 96 | 	hasReact: true,
 97 | 	// Needs sass?
 98 | 	hasSass: true,
 99 | 	// Needs less?
100 | 	hasLess: false,
101 | 	// Needs flowtype?
102 | 	hasFlow: false,
103 | 	// Externals
104 | 	// <https://webpack.js.org/configuration/externals/>
105 | 	externals: {
106 | 		jquery: 'jQuery',
107 | 	},
108 | 	// Webpack Aliases
109 | 	// <https://webpack.js.org/configuration/resolve/#resolve-alias>
110 | 	alias: undefined,
111 | 	// Show overlay on development
112 | 	errorOverlay: true,
113 | 	// Auto optimization by webpack
114 | 	// Split all common chunks with default config
115 | 	// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
116 | 	// Won't hurt because we use PHP to automate loading
117 | 	optimizeSplitChunks: true,
118 | 	// Usually PHP and other files to watch and reload when changed
119 | 	watch: './**/*.php',
120 | 	// Files that you want to copy to your ultimate theme/plugin package
121 | 	// Supports glob matching from minimatch
122 | 	// @link <https://github.com/isaacs/minimatch#usage>
123 | 	packageFiles: [
124 | 		'inc/**',
125 | 		'vendor/**',
126 | 		'dist/**',
127 | 		'*.php',
128 | 		'*.md',
129 | 		'readme.txt',
130 | 		'languages/**',
131 | 		'layouts/**',
132 | 		'LICENSE',
133 | 		'*.css',
134 | 	],
135 | 	// Path to package directory, relative to the root
136 | 	packageDirPath: 'package',
137 | };
138 | 


--------------------------------------------------------------------------------
/composer.lock:
--------------------------------------------------------------------------------
  1 | {
  2 |     "_readme": [
  3 |         "This file locks the dependencies of your project to a known state",
  4 |         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
  5 |         "This file is @generated automatically"
  6 |     ],
  7 |     "content-hash": "bfaf0e3fec119b96f4f99f69efb09c2b",
  8 |     "packages": [
  9 |         {
 10 |             "name": "horttcore/wp-assets",
 11 |             "version": "2.0",
 12 |             "source": {
 13 |                 "type": "git",
 14 |                 "url": "https://github.com/Horttcore/wp-assets.git",
 15 |                 "reference": "abe562d3a7a6b07eddea6833e45568042fa4268f"
 16 |             },
 17 |             "dist": {
 18 |                 "type": "zip",
 19 |                 "url": "https://api.github.com/repos/Horttcore/wp-assets/zipball/abe562d3a7a6b07eddea6833e45568042fa4268f",
 20 |                 "reference": "abe562d3a7a6b07eddea6833e45568042fa4268f",
 21 |                 "shasum": ""
 22 |             },
 23 |             "type": "library",
 24 |             "autoload": {
 25 |                 "psr-4": {
 26 |                     "RalfHortt\\Assets\\": "src/"
 27 |                 }
 28 |             },
 29 |             "notification-url": "https://packagist.org/downloads/",
 30 |             "license": [
 31 |                 "MIT"
 32 |             ],
 33 |             "authors": [
 34 |                 {
 35 |                     "name": "Ralf Hortt",
 36 |                     "email": "me@horttcore.de"
 37 |                 }
 38 |             ],
 39 |             "description": "A helper package for working with the WordPress assets",
 40 |             "time": "2020-03-27T08:06:12+00:00"
 41 |         },
 42 |         {
 43 |             "name": "horttcore/wp-customizer",
 44 |             "version": "2.1.0",
 45 |             "source": {
 46 |                 "type": "git",
 47 |                 "url": "https://github.com/Horttcore/wp-customizer.git",
 48 |                 "reference": "e71109aea56738151a028b7d25bddae488dde235"
 49 |             },
 50 |             "dist": {
 51 |                 "type": "zip",
 52 |                 "url": "https://api.github.com/repos/Horttcore/wp-customizer/zipball/e71109aea56738151a028b7d25bddae488dde235",
 53 |                 "reference": "e71109aea56738151a028b7d25bddae488dde235",
 54 |                 "shasum": ""
 55 |             },
 56 |             "type": "library",
 57 |             "autoload": {
 58 |                 "psr-4": {
 59 |                     "Horttcore\\Customizer\\": "src/"
 60 |                 }
 61 |             },
 62 |             "notification-url": "https://packagist.org/downloads/",
 63 |             "license": [
 64 |                 "MIT"
 65 |             ],
 66 |             "authors": [
 67 |                 {
 68 |                     "name": "Ralf Hortt",
 69 |                     "email": "me@horttcore.de"
 70 |                 }
 71 |             ],
 72 |             "description": "A helper package for working with the WordPress Customizer",
 73 |             "time": "2019-09-18T20:26:55+00:00"
 74 |         },
 75 |         {
 76 |             "name": "ralfhortt/wp-content-width",
 77 |             "version": "1.4",
 78 |             "source": {
 79 |                 "type": "git",
 80 |                 "url": "https://github.com/Horttcore/wp-content-width.git",
 81 |                 "reference": "d3b3f5a28935d04d8d66f020ccc1c52aa7e6cdbc"
 82 |             },
 83 |             "dist": {
 84 |                 "type": "zip",
 85 |                 "url": "https://api.github.com/repos/Horttcore/wp-content-width/zipball/d3b3f5a28935d04d8d66f020ccc1c52aa7e6cdbc",
 86 |                 "reference": "d3b3f5a28935d04d8d66f020ccc1c52aa7e6cdbc",
 87 |                 "shasum": ""
 88 |             },
 89 |             "type": "library",
 90 |             "autoload": {
 91 |                 "psr-4": {
 92 |                     "RalfHortt\\ContentWidth\\": "src/"
 93 |                 }
 94 |             },
 95 |             "notification-url": "https://packagist.org/downloads/",
 96 |             "license": [
 97 |                 "GPL-2.0-or-later"
 98 |             ],
 99 |             "authors": [
100 |                 {
101 |                     "name": "Ralf Hortt",
102 |                     "email": "me@horttcore.de"
103 |                 }
104 |             ],
105 |             "description": "Setting the global WordPress variable `$content_width` in a single place for php and css",
106 |             "time": "2020-01-16T13:36:22+00:00"
107 |         },
108 |         {
109 |             "name": "ralfhortt/wp-image-sizes",
110 |             "version": "1.0.0",
111 |             "source": {
112 |                 "type": "git",
113 |                 "url": "https://github.com/Horttcore/wp-image-sizes.git",
114 |                 "reference": "05418c0477dec8ca41754999aa030517fb7e1ef5"
115 |             },
116 |             "dist": {
117 |                 "type": "zip",
118 |                 "url": "https://api.github.com/repos/Horttcore/wp-image-sizes/zipball/05418c0477dec8ca41754999aa030517fb7e1ef5",
119 |                 "reference": "05418c0477dec8ca41754999aa030517fb7e1ef5",
120 |                 "shasum": ""
121 |             },
122 |             "type": "library",
123 |             "autoload": {
124 |                 "psr-4": {
125 |                     "RalfHortt\\ImageSizes\\": "src"
126 |                 }
127 |             },
128 |             "notification-url": "https://packagist.org/downloads/",
129 |             "license": [
130 |                 "GPL-2.0-or-later"
131 |             ],
132 |             "authors": [
133 |                 {
134 |                     "name": "Ralf Hortt",
135 |                     "email": "me@horttcore.de"
136 |                 }
137 |             ],
138 |             "description": "A helper class to register image sizes",
139 |             "time": "2019-05-31T20:45:23+00:00"
140 |         },
141 |         {
142 |             "name": "ralfhortt/wp-template-loader",
143 |             "version": "1.1.1",
144 |             "source": {
145 |                 "type": "git",
146 |                 "url": "https://github.com/Horttcore/wp-template-loader.git",
147 |                 "reference": "e0a8c24b10eb0cb0eb64d2c17c49ba7618862db2"
148 |             },
149 |             "dist": {
150 |                 "type": "zip",
151 |                 "url": "https://api.github.com/repos/Horttcore/wp-template-loader/zipball/e0a8c24b10eb0cb0eb64d2c17c49ba7618862db2",
152 |                 "reference": "e0a8c24b10eb0cb0eb64d2c17c49ba7618862db2",
153 |                 "shasum": ""
154 |             },
155 |             "type": "library",
156 |             "autoload": {
157 |                 "psr-4": {
158 |                     "RalfHortt\\TemplateLoader\\": "src"
159 |                 }
160 |             },
161 |             "notification-url": "https://packagist.org/downloads/",
162 |             "license": [
163 |                 "GPL-2.0-or-later"
164 |             ],
165 |             "authors": [
166 |                 {
167 |                     "name": "Ralf Hortt",
168 |                     "email": "me@horttcore.de"
169 |                 }
170 |             ],
171 |             "description": "A helper class to load template files from another location",
172 |             "time": "2019-06-04T20:00:05+00:00"
173 |         },
174 |         {
175 |             "name": "wpackio/enqueue",
176 |             "version": "2.2.0",
177 |             "source": {
178 |                 "type": "git",
179 |                 "url": "https://github.com/swashata/wpackio-enqueue.git",
180 |                 "reference": "596fb1d6af97b96906058237165f3fe161ffa685"
181 |             },
182 |             "dist": {
183 |                 "type": "zip",
184 |                 "url": "https://api.github.com/repos/swashata/wpackio-enqueue/zipball/596fb1d6af97b96906058237165f3fe161ffa685",
185 |                 "reference": "596fb1d6af97b96906058237165f3fe161ffa685",
186 |                 "shasum": ""
187 |             },
188 |             "require-dev": {
189 |                 "brain/monkey": "^2.2.0",
190 |                 "dealerdirect/phpcodesniffer-composer-installer": "^0.5",
191 |                 "giacocorsiglia/wordpress-stubs": "^4.9.5",
192 |                 "pcov/clobber": "^2.0",
193 |                 "phpcompatibility/phpcompatibility-wp": "^2.1.0",
194 |                 "phpunit/phpunit": "^7.3.0",
195 |                 "spatie/phpunit-snapshot-assertions": "^1.3.1",
196 |                 "wp-coding-standards/wpcs": "^2.2"
197 |             },
198 |             "type": "library",
199 |             "autoload": {
200 |                 "psr-4": {
201 |                     "WPackio\\": "inc"
202 |                 }
203 |             },
204 |             "notification-url": "https://packagist.org/downloads/",
205 |             "license": [
206 |                 "MIT"
207 |             ],
208 |             "authors": [
209 |                 {
210 |                     "name": "Swashata Ghosh",
211 |                     "email": "swashata4u@gmail.com"
212 |                 }
213 |             ],
214 |             "description": "API to enqueue assets generated by @wpackio/scripts into your WordPress plugin or theme.",
215 |             "time": "2020-06-22T03:45:46+00:00"
216 |         }
217 |     ],
218 |     "packages-dev": [],
219 |     "aliases": [],
220 |     "minimum-stability": "stable",
221 |     "stability-flags": [],
222 |     "prefer-stable": false,
223 |     "prefer-lowest": false,
224 |     "platform": [],
225 |     "platform-dev": []
226 | }
227 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * ------------------------------------------------------------------------------
  4 |  * Theme configuration
  5 |  *
  6 |  * - Composer autoloader
  7 |  * - Adding theme support for features
  8 |  * - Register assets
  9 |  * - Register menus
 10 |  * - Register sidebars
 11 |  * - Register image sizes
 12 |  * - Register customizer fields
 13 |  * - Optimize WordPress output
 14 |  * - Register new directory for WordPress template files
 15 |  * ------------------------------------------------------------------------------
 16 |  */
 17 | use \RalfHortt\Assets\Script;
 18 | use \RalfHortt\Assets\Style;
 19 | use \Horttcore\Customizer\Customize;
 20 | use \RalfHortt\ContentWidth\ContentWidth;
 21 | use \RalfHortt\ImageSizes\ImageSize;
 22 | use \RalfHortt\TemplateLoader\TemplateLocator;
 23 | 
 24 | /**
 25 |  * ------------------------------------------------------------------------------
 26 |  * Autoloader
 27 |  *
 28 |  * Load composer autoloader file
 29 |  * ------------------------------------------------------------------------------
 30 |  */
 31 | $autoloader = __DIR__ . '/vendor/autoload.php';
 32 | 
 33 | if (is_readable($autoloader)) :
 34 |     include $autoloader;
 35 | endif;
 36 | 
 37 | if (!defined('WPINC')) :
 38 |     die;
 39 | endif;
 40 | 
 41 | /**
 42 |  * ------------------------------------------------------------------------------
 43 |  * Setup theme
 44 |  * ------------------------------------------------------------------------------
 45 |  */
 46 | add_action('after_setup_theme', function () {
 47 |     /**
 48 |      * ------------------------------------------------------------------------------
 49 |      * Setup theme support features
 50 |      *
 51 |      * @see https://developer.wordpress.org/block-editor/developers/themes/theme-support/
 52 |      * @see https://developer.wordpress.org/reference/functions/add_theme_support/
 53 |      * ------------------------------------------------------------------------------
 54 |      */
 55 |     add_theme_support('custom-logo');
 56 |     add_theme_support('html5', ['comment-list', 'comment-form', 'search-form', 'gallery', 'caption']);
 57 |     add_theme_support('post-thumbnails');
 58 |     add_theme_support('responsive-embeds');
 59 |     add_theme_support('title-tag');
 60 |     add_theme_support('custom-logo');
 61 |     add_theme_support('align-wide');
 62 |     add_theme_support('disable-custom-colors');
 63 |     add_theme_support('disable-custom-font-sizes');
 64 |     add_theme_support(
 65 |         'editor-color-palette',
 66 |         [
 67 |             [
 68 |                 'name' => __('Schwarz', 'TEXTDOMAIN'),
 69 |                 'slug' => 'black',
 70 |                 'color' => '#000',
 71 |             ],
 72 |         ]
 73 |     );
 74 |     add_theme_support('editor-font-sizes', [
 75 |         [
 76 |             'name' => __('Klein', 'TEXTDOMAIN'),
 77 |             'size' => 12,
 78 |             'slug' => 'small'
 79 |         ],
 80 |         [
 81 |             'name' => __('Normal', 'TEXTDOMAIN'),
 82 |             'size' => 16,
 83 |             'slug' => 'normal'
 84 |         ],
 85 |         [
 86 |             'name' => __('Groß', 'TEXTDOMAIN'),
 87 |             'size' => 32,
 88 |             'slug' => 'large'
 89 |         ],
 90 |     ]);
 91 |     add_theme_support('editor-styles');
 92 |     add_editor_style('dist/css/editor-styles.css');
 93 | 
 94 | 
 95 |     /**
 96 |      * ------------------------------------------------------------------------------
 97 |      * Set content width
 98 |      *
 99 |      * @see https://codex.wordpress.org/Content_Width
100 |      * ------------------------------------------------------------------------------
101 |      */
102 |     (new ContentWidth(980))->register();
103 | 
104 | 
105 |     /**
106 |      * ------------------------------------------------------------------------------
107 |      * Assets management
108 |      *
109 |      * @see https://github.com/Horttcore/wp-assets
110 |      * ------------------------------------------------------------------------------
111 |      */
112 | 
113 |     global $wpack_enqueue;
114 |     $wpack_enqueue = new \WPackio\Enqueue(
115 |         // Name of the project, same as `appName` in wpackio.project.js
116 |         'derweiliWordPressStarterTheme',
117 |         // Output directory, same as `outputPath` in wpackio.project.js
118 |         'dist',
119 |         // Version of your plugin
120 |         '1.0.0',
121 |         // Type of your project, same as `type` in wpackio.project.js
122 |         'theme',
123 |         // Plugin location, pass false in case of theme.
124 |         false
125 |     );
126 | 
127 |     add_action(
128 |         'wp_enqueue_scripts',
129 |         function () {
130 |             global $wpack_enqueue;
131 | 
132 |             $assetsConfig = [
133 |                 'js' => true,
134 |                 'css' => true,
135 |                 'js_dep' => ['jquery'],
136 |                 'css_dep' => [],
137 |                 'in_footer' => true,
138 |                 'media' => 'all',
139 |             ];
140 | 
141 |             $wpack_enqueue->enqueue( 'app', 'main', $assetsConfig );
142 |         }
143 |     );
144 | 
145 |     add_action(
146 |         'enqueue_block_editor_assets',
147 |         function () {
148 |             global $wpack_enqueue;
149 | 
150 |             $assetsConfig = [
151 |                 'js' => true,
152 |                 'css' => true,
153 |                 'js_dep' => [ 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor' ],
154 |                 'css_dep' => [],
155 |                 'in_footer' => false,
156 |                 'media' => 'all',
157 |             ];
158 | 
159 |             $wpack_enqueue->enqueue( 'app', 'editor', $assetsConfig );
160 |         }
161 |     );
162 | 
163 |     /**
164 |      * ------------------------------------------------------------------------------
165 |      * Register menu location
166 |      *
167 |      * @see https://developer.wordpress.org/reference/functions/register_nav_menus/
168 |      * ------------------------------------------------------------------------------
169 |      */
170 |     register_nav_menus(
171 |         [
172 |             'meta' => __('Metamenü', 'TEXTDOMAIN'),
173 |             'main' => __('Hauptmenü', 'TEXTDOMAIN'),
174 |             'footer' => __('Footermenü', 'TEXTDOMAIN'),
175 |         ]
176 |     );
177 | 
178 | 
179 |     /**
180 |      * ------------------------------------------------------------------------------
181 |      * Register sidebars
182 |      *
183 |      * @see https://developer.wordpress.org/reference/functions/register_sidebar/
184 |      * ------------------------------------------------------------------------------
185 |      */
186 |     register_sidebar(
187 |         [
188 |             'name' => __('Seitenleiste', 'TEXTDOMAIN'),
189 |             'id' => 'sidebar',
190 |             'before_widget' => '<aside id="%1$s" class="widget %2$s">',
191 |             'after_widget'  => '</aside>',
192 |             'before_title'  => '<h1 class="widget__title">',
193 |             'after_title'   => '</h1>'
194 |         ]
195 |     );
196 | 
197 | 
198 |     /**
199 |      * ------------------------------------------------------------------------------
200 |      * Define custom image sizes
201 |      *
202 |      * @see https://developer.wordpress.org/reference/functions/register_sidebar/
203 |      * ------------------------------------------------------------------------------
204 |      */
205 |     (new ImageSize('name', __('Label', 'TEXTDOMAIN'), 50, 50, true))->register();
206 | 
207 | 
208 |     /**
209 |      * ------------------------------------------------------------------------------
210 |      * Customizer
211 |      *
212 |      * @see https://github.com/Horttcore/wp-customizer
213 |      * ------------------------------------------------------------------------------
214 |      */
215 |     (new Customize)
216 |         ->panel(__('Einstellungen', 'TEXTDOMAIN'))
217 |         ->section(__('Kontakt', 'TEXTDOMAIN'))
218 |         ->text('company', __('Unternehmen', 'TEXTDOMAIN'))
219 |         ->text('street', __('Straße', 'TEXTDOMAIN'))
220 |         ->text('street-number', __('Hausnummer', 'TEXTDOMAIN'))
221 |         ->text('zip', __('PLZ', 'TEXTDOMAIN'))
222 |         ->text('city', __('Ort', 'TEXTDOMAIN'))
223 |         ->text('phone', __('Telefon', 'TEXTDOMAIN'))
224 |         ->text('fax', __('Fax', 'TEXTDOMAIN'))
225 |         ->text('mobile', __('Mobil', 'TEXTDOMAIN'))
226 |         ->text('email', __('E-Mail', 'TEXTDOMAIN'))
227 |         ->url('website', __('Webseite', 'TEXTDOMAIN'))
228 |         ->url('map', __('Karte', 'TEXTDOMAIN'))
229 |         ->section(__('Social Media', 'TEXTDOMAIN'))
230 |         ->url('facebook', __('Facebook', 'TEXTDOMAIN'))
231 |         ->url('twitter', __('Twitter', 'TEXTDOMAIN'))
232 |         ->url('instagram', __('Instagram', 'TEXTDOMAIN'))
233 |         ->section(__('Tracking Codes', 'TEXTDOMAIN'))
234 |         ->textarea('google-tag-manager', __('Google Tag Manager', 'TEXTDOMAIN'))
235 |         ->register();
236 | 
237 | 
238 |     /**
239 |      * ------------------------------------------------------------------------------
240 |      * Optimizations
241 |      * ------------------------------------------------------------------------------
242 |      */
243 |     remove_action('admin_print_styles', 'print_emoji_styles'); // Emoji
244 |     remove_action('wp_head', 'print_emoji_detection_script', 7); // Emoji
245 |     remove_action('admin_print_scripts', 'print_emoji_detection_script'); // Emoji
246 |     remove_action('wp_print_styles', 'print_emoji_styles'); // Emoji
247 |     remove_filter('wp_mail', 'wp_staticize_emoji_for_email'); // Emoji
248 |     remove_filter('the_content_feed', 'wp_staticize_emoji'); // Emoji
249 |     remove_filter('comment_text_rss', 'wp_staticize_emoji'); // Emoji
250 |     remove_action('wp_head', 'wp_generator'); // Remove WordPress generator meta tag
251 |     remove_action('wp_head', 'rsd_link'); // Remove RSD link meta tag
252 |     remove_action('wp_head', 'wlwmanifest_link'); // Remove WLW manifest link meta tag
253 |     remove_action('wp_head', 'wp_shortlink_wp_head'); // Remove shortlink meta tag
254 |     remove_action('wp_head', 'adjacent_posts_rel_link_wp_head'); // Remove adjacent posts link meta tags
255 |     remove_action('wp_head', 'rest_output_link_wp_head'); // Remove REST output link meta tag
256 |     add_filter('the_generator', '__return_null'); // Remove generator output
257 |     add_filter('login_headerurl', 'home_url'); // Replace the login logo link with home url
258 |     add_filter('wp_mail_from', function ($from) {
259 |         if (false !== strpos($from, 'wordpress@')) {
260 |             return $from;
261 |         }
262 |         return get_option('admin_email');
263 |     }); // Replace mail from with current admin email
264 |     // Replace mail from name with site name
265 |     add_filter(
266 |         'wp_mail_from_name',
267 |         function () {
268 |             return get_bloginfo('name');
269 |         }
270 |     );
271 | 
272 | 
273 |     /**
274 |      * ------------------------------------------------------------------------------
275 |      * Template loader
276 |      * ------------------------------------------------------------------------------
277 |      */ (new TemplateLocator('resources/views'))->register();
278 | });
279 | 
280 | /**
281 |  * ------------------------------------------------------------------------------
282 |  * Put project specific code in functions.custom.php
283 |  * ------------------------------------------------------------------------------
284 |  */
285 | 
286 | 
287 |  // Do stuff through this plugin
288 |  class ThemeInit {
289 | 	/**
290 | 	 * @var \WPackio\Enqueue
291 | 	 */
292 | 	public $enqueue;
293 | 
294 | 	public function __construct() {
295 | 		// It is important that we init the Enqueue class right at the plugin/theme load time
296 | 		$this->enqueue = new \WPackio\Enqueue(
297 | 			// Name of the project, same as `appName` in wpackio.project.js
298 | 			'derweiliWordPressStarterTheme',
299 | 			// Output directory, same as `outputPath` in wpackio.project.js
300 | 			'dist',
301 | 			// Version of your plugin
302 | 			'1.0.0',
303 | 			// Type of your project, same as `type` in wpackio.project.js
304 | 			'theme',
305 | 			// Plugin location, pass false in case of theme.
306 | 			false
307 | 		);
308 | 		// Enqueue a few of our entry points
309 | 		add_action( 'wp_enqueue_scripts', [ $this, 'plugin_enqueue' ] );
310 | 	}
311 | 
312 | 	public function plugin_enqueue() {
313 |         // Enqueue files[0] (name = app) - entryPoint main
314 |         $assetsConfig = [
315 |             'js' => true,
316 |             'css' => true,
317 |             'js_dep' => ['jquery'],
318 |             'css_dep' => [],
319 |             'in_footer' => true,
320 |             'media' => 'all',
321 |         ];
322 | 		$this->enqueue->enqueue( 'app', 'main', $assetsConfig );
323 | 	}
324 | }
325 | 
326 | 
327 | // Init
328 | // new ThemeInit();


--------------------------------------------------------------------------------
/resources/views/contents/content-test.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  *
  4 |  * Pattern lab
  5 |  *
  6 |  * This is a really simple pattern lab with all HTML elements
  7 |  *
  8 |  */
  9 | ?>
 10 | 
 11 | <!--
 12 | 
 13 | HTML Template from Boilerplate
 14 | http://html5boilerplate.com/
 15 | 
 16 | Demo content lovingly lifted from the azbuka project
 17 | http://code.google.com/p/azbuka/
 18 | 
 19 | and the Bluetrip project
 20 | http://bluetrip.org/
 21 | 
 22 | and Peter Beverloo
 23 | http://peter.sh/examples/?/html/meter-progress.html
 24 | 
 25 | -->
 26 | 
 27 | <article id="post-<?php the_ID() ?>" <?php post_class('entry') ?> role="main">
 28 | 
 29 |     <header class="entry__header">
 30 | 
 31 |         <h1 class="entry__title"><?php the_title() ?></h1>
 32 | 
 33 |     </header>
 34 | 
 35 |     <div class="entry__content cf">
 36 | 
 37 |         <h1>Title 01 Heading</h1>
 38 |         <hr />
 39 |         <h2>Level 02 Heading</h2>
 40 |         <p>Lorem ipsum <em>emphasised text</em> dolor sit amet, <strong>strong text</strong>
 41 |             consectetur adipisicing elit, <abbr title="">abbreviated text</abbr> sed do eiusmod tempor
 42 |             incididunt ut labore et dolore magna aliqua. Ut
 43 |             <q>quoted text</q> enim ad minim veniam, quis nostrud exercitation <a href="/">link text</a>
 44 |             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
 45 |             <ins>inserted text</ins> irure dolor in reprehenderit in voluptate velit esse cillum
 46 |             dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>code text</code> cupidatat
 47 |             non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 48 |         </p>
 49 |         <p>
 50 |             Suspendisse rhoncus, est ac sollicitudin viverra, leo orci sagittis massa, sed condimentum <acronym title="">acronym text</acronym> est tortor a lectus. Curabitur porta feugiat ullamcorper. Integer lacinia mi id odio faucibus eget tincidunt nisl iaculis. Nam adipiscing hendrerit turpis, et porttitor felis sollicitudin et. Donec dictum massa ac neque accumsan tempor. Cras aliquam, ipsum sit amet laoreet hendrerit, purus <del>deleted text</del> sapien convallis dui, et porta leo ipsum ac nunc. Nullam ornare porta dui ac semper. Cras aliquam laoreet hendrerit. Quisque vulputate dolor eget mi porta vel porta nisl pretium. Vivamus non leo magna, quis imperdiet risus. Morbi tempor risus placerat tellus imperdiet fringilla.
 51 |         </p>
 52 |         <blockquote>
 53 |             <p>I am not one who was born in the possession of knowledge; I am one who is fond of antiquity, and earnest in seeking it there.</p>
 54 |         </blockquote>
 55 |         <p><cite><a href="/">Confucius, The Confucian Analects</a></cite>,  (551 BC - 479 BC)</p>
 56 |         <h3>Level 03 Heading</h3>
 57 |         <p>Extended paragraph. <a href="">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 58 |             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 59 |             exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 60 |             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
 61 |             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 62 |         </p>
 63 |         <ol>
 64 |             <li>Unus</li>
 65 |             <li>Duo</li>
 66 |             <li>Tres</li>
 67 |             <li>Quattuor</li>
 68 |         </ol>
 69 |         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 70 |             pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
 71 |             anim id est laborum.
 72 |         </p>
 73 |         <h3>Header 3</h3>
 74 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 75 |             ut labore et dolore magna aliqua.
 76 |         </p>
 77 |         <h4>Unordered lists</h4>
 78 |         <ul>
 79 |             <li>Lorem ipsum dolor sit amet</li>
 80 |             <li>Consectetur adipisicing elit</li>
 81 |             <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
 82 |             <li>Ut enim ad minim veniam</li>
 83 |         </ul>
 84 |         <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt
 85 |             ut labore et dolore magna aliqua.
 86 |         </p>
 87 |         <pre><code>body { font:0.8125em/1.618 Arial, sans-serif;
 88 |                 background-color:#fff;
 89 |                 color:#111;
 90 |                 }</code></pre>
 91 |         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 92 |             pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
 93 |             anim id est laborum.
 94 |         </p>
 95 |         <h4>Header 4</h4>
 96 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 97 |             ut labore et dolore magna aliqua.
 98 |         </p>
 99 |         <dl>
100 |             <dt>Definition list</dt>
101 |             <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
102 |                 aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
103 |                 commodo consequat.
104 |             </dd>
105 |             <dt>Lorem ipsum dolor sit amet</dt>
106 |             <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
107 |                 aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
108 |                 commodo consequat.
109 |             </dd>
110 |         </dl>
111 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
112 |             ut labore et dolore magna aliqua.
113 |         </p>
114 |         <h4>Ordered list</h4>
115 |         <ol>
116 |             <li>List item</li>
117 |             <li>List item</li>
118 |             <li>
119 |                 List item
120 |                 <ol>
121 |                     <li>List item level 2</li>
122 |                     <li>
123 |                         List item level 2
124 |                         <ol>
125 |                             <li>List item level 3</li>
126 |                             <li>List item level 3</li>
127 |                         </ol>
128 |                     </li>
129 |                 </ol>
130 |             </li>
131 |         </ol>
132 |         <h4>Unordered list</h4>
133 |         <ul>
134 |             <li>List item 01</li>
135 |             <li>List item 02</li>
136 |             <li>
137 |                 List item 03
138 |                 <ul>
139 |                     <li>List item level 2</li>
140 |                     <li>
141 |                         List item level 2
142 |                         <ul>
143 |                             <li>List item level 3</li>
144 |                             <li>List item level 3</li>
145 |                         </ul>
146 |                     </li>
147 |                 </ul>
148 |             </li>
149 |         </ul>
150 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
151 |             ut labore et dolore magna aliqua.
152 |         </p>
153 |         <h4>Tables</h4>
154 |         <table summary="Jimi Hendrix albums">
155 |             <caption>Jimi Hendrix - albums</caption>
156 |             <thead>
157 |                 <tr>
158 |                     <th>Album</th>
159 |                     <th>Year</th>
160 |                     <th>Price</th>
161 |                 </tr>
162 |             </thead>
163 |             <tfoot>
164 |                 <tr>
165 |                     <td>Album</td>
166 |                     <td>Year</td>
167 |                     <td>Price</td>
168 |                 </tr>
169 |             </tfoot>
170 |             <tbody>
171 |                 <tr>
172 |                     <td>Are You Experienced </td>
173 |                     <td>1967</td>
174 |                     <td>$10.00</td>
175 |                 </tr>
176 |                 <tr>
177 |                     <td>Axis: Bold as Love</td>
178 |                     <td>1967</td>
179 |                     <td>$12.00</td>
180 |                 </tr>
181 |                 <tr>
182 |                     <td>Electric Ladyland</td>
183 |                     <td>1968</td>
184 |                     <td>$10.00</td>
185 |                 </tr>
186 |                 <tr>
187 |                     <td>Band of Gypsys</td>
188 |                     <td>1970</td>
189 |                     <td>$12.00</td>
190 |                 </tr>
191 |             <tbody>
192 |         </table>
193 |         <p>
194 |             I am <a href="http://devkick.com/lab/tripoli/sample.php?abc123">the a tag</a> example<br>
195 |             I am <abbr title="test">the abbr tag</abbr> example<br>
196 |             I am <acronym>the acronym tag</acronym> example<br>
197 |             I am <b>the b tag</b> example<br>
198 |             I am <big>the big tag</big> example<br>
199 |             I am <cite>the cite tag</cite> example<br>
200 |             I am <code>the code tag</code> example<br>
201 |             I am <del>the del tag</del> example<br>
202 |             I am <dfn>the dfn tag</dfn> example<br>
203 |             I am <em>the em tag</em> example<br>
204 |             I am <font face="verdana">the font tag</font> example<br>
205 |             I am <i>the i tag</i> example<br>
206 |             I am <ins>the ins tag</ins> example<br>
207 |             I am <kbd>the kbd tag</kbd> example<br>
208 |             I am <q>the q tag <q>inside</q> a q tag</q> example<br>
209 |             I am <s>the s tag</s> example<br>
210 |             I am <samp>the samp tag</samp> example<br>
211 |             I am <small>the small tag</small> example<br>
212 |             I am <span>the span tag</span> example<br>
213 |             I am <strike>the strike tag</strike> example<br>
214 |             I am <strong>the strong tag</strong> example<br>
215 |             I am <sub>the sub tag</sub> example<br>
216 |             I am <sup>the sup tag</sup> example<br>
217 |             I am <tt>the tt tag</tt> example<br>
218 |             I am <var>the var tag</var> example<br>
219 |             I am <u>the u tag</u> example
220 |         </p>
221 |         <p>This is a &lt;p&gt; with some <code>code</code> inside.</p>
222 |         <h3>What is Lorem Ipsum?</h3>
223 |         <p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
224 |         <p><strong>This</strong> Lorem Ipsum HTML example is created from the parts of Placeholder Markup with Lorem Ipsum - Jon Tan,
225 |             Emastic CSS Framework,
226 |             Tripoli CSS Framework and
227 |             Baseline CSS Framework .
228 |         </p>
229 |         <address>Address: somewhere, World</address>
230 |         <p>
231 |             <a href="#">Link</a><br>
232 |             <strong>&lt;strong&gt;</strong><br>
233 |             <del>&lt;del&gt; deleted</del><br>
234 |             <dfn>&lt;dfn&gt; dfn</dfn><br>
235 |             <em>&lt;em&gt; emphasis</em>
236 |         </p>
237 |         <pre>
238 |                 <code>&lt;html&gt;</code>
239 |                 <code>&lt;head&gt;</code>
240 |                 <code>&lt;/head&gt;</code>
241 |                 <code>&lt;body&gt;</code>
242 |                 <code>&lt;div class = "main"&gt; &lt;div&gt;</code>
243 |                 <code>&lt;/body&gt;</code>
244 |                 <code>&lt;/html&gt; </code>
245 |                 </pre>
246 |         <tt>&lt;tt&gt;
247 |         Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
248 |         </tt>
249 |         <hr>
250 |         <!-- this following markup from http://bluetrip.org/ -->
251 |         <dl>
252 |             <dt>Description list title 01</dt>
253 |             <dd>Description list description 01</dd>
254 |             <dt>Description list title 02</dt>
255 |             <dd>Description list description 02</dd>
256 |             <dd>Description list description 03</dd>
257 |         </dl>
258 |         <table>
259 |             <caption>Table Caption</caption>
260 |             <thead>
261 |                 <tr>
262 |                     <th>Table head th</th>
263 |                     <td>Table head td</td>
264 |                 </tr>
265 |             </thead>
266 |             <tfoot>
267 |                 <tr>
268 |                     <th>Table foot th</th>
269 |                     <td>Table foot td</td>
270 |                 </tr>
271 |             </tfoot>
272 |             <tbody>
273 |                 <tr>
274 |                     <th>Table body th</th>
275 |                     <td>Table body td</td>
276 |                 </tr>
277 |                 <tr>
278 |                     <td>Table body td</td>
279 |                     <td>Table body td</td>
280 |                 </tr>
281 |             </tbody>
282 |         </table>
283 |         <hr>
284 |         <form action="#">
285 |             <fieldset>
286 |                 <legend>Form legend</legend>
287 |                 <div><label for="f1">Optional Text input:</label><input type="text" id="f1" value="input text" /></div>
288 |                 <div><label for="rt1">Required Text input:</label><input type="text" id="rt1" required /></div>
289 |                 <div><label for="twp1">Text input with pattern requirement and placeholder:</label><input type="text" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"/></div>
290 |                 <div><label for="s1">Search input:</label><input type="search" id="s1" /></div>
291 |                 <div><label for="e1">Email input:</label><input type="email" id="e1" /></div>
292 |                 <div><label for="u1">URL input:</label><input type="url" id="u1" /></div>
293 |                 <div><label for="pw">Password input:</label><input type="password" id="pw" value="password" /></div>
294 |                 <div><label for="f2">Radio input:</label><input type="radio" id="f2" /></div>
295 |                 <div><label for="f3">Checkbox input:</label><input type="checkbox" id="f3" /></div>
296 |                 <div>
297 |                     <label for="f4">Select field:</label>
298 |                     <select id="f4">
299 |                         <option>Option 01</option>
300 |                         <option>Option 02</option>
301 |                     </select>
302 |                 </div>
303 |                 <div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
304 |                 <div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /></div>
305 |                 <div><label for="f7">Submit Button:</label> <input type="submit" id="f7" value="button text" /></div>
306 |             </fieldset>
307 |         </form>
308 |         <!-- thx peter beverloo: http://peter.sh/examples/?/html/meter-progress.html -->
309 |         <p id="no-support" style="color: red; margin-bottom: 12px;">
310 |             Your browser does not support these elements yet! Consider downloading a <a href="http://tools.peter.sh/download-latest-chromium.php">Chromium Nightly</a>.<br />
311 |         </p>
312 |         <h3>&lt;progress&gt;</h3>
313 |         <p>
314 |             The progress element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">4.10.16</a>) represents the completion progress of a task and can be both indeterminate as determinate.
315 |         </p>
316 |         <ul class="compact">
317 |             <li>
318 |                 <label>Indeterminate</label>
319 |                 <progress max="100"></progress>
320 |             </li>
321 |             <li>
322 |                 <label>Progress: 0%</label>
323 |                 <progress max="10" value="0"></progress>
324 |             </li>
325 |             <li>
326 |                 <label>Progress: 100%</label>
327 |                 <progress max="3254" value="3254"></progress>
328 |             </li>
329 |             <li>
330 |                 <label>Progress: 57%</label>
331 |                 <progress max="0.7" value="0.4"></progress>
332 |             </li>
333 |             <li>
334 |                 <label>Javascript</label>
335 |                 <progress id="progress-javascript-example"></progress>
336 |             </li>
337 |         </ul>
338 |         <h3>&lt;meter&gt;</h3>
339 |         <p>
340 |             Displaying a scalar measurement within a known range, like hard drive usage, can be done using the meter element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">4.10.17</a>)
341 |         </p>
342 |         <ul class="compact">
343 |             <li>
344 |                 <label>Meter: empty</label>
345 |                 <meter value="0"></meter>
346 |             </li>
347 |             <li>
348 |                 <label>Meter: full</label>
349 |                 <meter value="1"></meter>
350 |             </li>
351 |             <li>
352 |                 <label>Meter: "a bit"</label>
353 |                 <meter min=".34" max=".41" value=".36"></meter>
354 |             </li>
355 |             <li>
356 |                 <label>Preferred usage</label>
357 |                 <meter min="50" max="250" low="100" high="200" value="120"></meter>
358 |             </li>
359 |             <li>
360 |                 <label>Too much traffic</label>
361 |                 <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
362 |             </li>
363 |             <li>
364 |                 <label>Optimum value</label>
365 |                 <meter value=".5" optimum=".8"></meter>
366 |             </li>
367 |             <li>
368 |                 <label>Javascript</label>
369 |                 <meter id="meter-javascript-example" value="0"></meter>
370 |             </li>
371 |         </ul>
372 | 
373 |     </div>
374 | 
375 | </article>
376 | 


--------------------------------------------------------------------------------