Skip to content

Instantly share code, notes, and snippets.

@ScribbleGhost
Last active August 12, 2023 02:27
Show Gist options
  • Save ScribbleGhost/1000bc60bee8e0837deca3ebae21aadb to your computer and use it in GitHub Desktop.
Save ScribbleGhost/1000bc60bee8e0837deca3ebae21aadb to your computer and use it in GitHub Desktop.
A visual illustration of underscores, the WordPress theme starter framework
<!-- below is content from header.php -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet">
<style>
@-ms-viewport {
width: device-width;
}
body * {
font-family: 'Heebo', sans-serif;
font-size: 18px;
color: #000000;
font-weight: bold;
}
body,
#page,
#masthead,
.site-branding,
#site-navigation,
#content,
#primary,
#main,
article,
#colophon,
#secondary,
#comments,
.navigation
{
border-radius: 10px;
border: solid 3px black;
box-shadow: -6px -4px 4px 2px rgba(0, 0, 0, 0.22);
margin: 10px;
color: black;
padding: 0px 15px 15px 15px;
}
body {
background-color: #010125;
border-color: white;
}
body > p { color: white; }
p {padding: 5px, 5px 0 5px; display: block; }
#page { background-color: #FFC207; }
#content, #masthead, #colophon { background-color: #009788; }
.site-branding, #primary, #site-navigation, #secondary { background-color: #EC275D; }
#main { background-color: #683AB6; }
article, #comments, .navigation { background-color: #4CB050; }
.description {
font-weight: normal;
margin: 0;
}
</style>
</head>
<body>
<p>body</p>
<div id="page" class="site">
<p>#page .site</p>
<header id="masthead" class="site-header">
<p>#masthead .site-header</p>
<div class="site-branding"><p>.site-branding</p><p class="description">Contains logo, title and blog description</p></div>
<nav id="site-navigation" class="main-navigation"><p>#site-navigation .main-navigation</p><p class="description">Contains the main menu</p></nav>
</header>
<div id="content" class="site-content">
<p>#content .site-content</p>
<!-- below is content from index.php -->
<div id="primary" class="content-area">
<p>#primary .content-area</p>
<main id="main" class="site-main">
<p>#main .site-main</p>
<p class="description">Starts the loop</p>
<!-- below is content from content.php -->
<article><p>article</p><p class="description">The actual single page article or page content goes here</p></article>
<nav class="navigation"><p>.navigation .post-navigation</p><p class="description">The post navigation, for example "previous/next post"</p></nav>
<div id="comments"><p>#comments .comments-area</p><p class="description">Comments for the single post/page</p></div>
</main>
</div>
<div id="secondary" class="widget-area"><p>#secondary .widget-area</p><p class="description">Contains WordPress widgets</p></div>
<!-- below is content from footer.php -->
</div>
<footer id="colophon" class="site-footer">
<p>#colophon .site-footer<p class="description">The footer content for the site</p></p>
</footer>
</div>
</body>
</html>
@glen777
Copy link

glen777 commented Aug 12, 2023

This is extremely helpful! Thanks so much!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment