{"id":19052936,"url":"https://github.com/joshuaiz/grate","last_synced_at":"2026-01-31T00:45:11.486Z","repository":{"id":149849818,"uuid":"122773748","full_name":"joshuaiz/grate","owner":"joshuaiz","description":"Grate: A super-minimal WordPress starter theme with CSS Grid for developers.","archived":false,"fork":false,"pushed_at":"2018-03-04T16:08:21.000Z","size":3342,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-24T02:45:53.510Z","etag":null,"topics":["css-grid","starter-theme","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshuaiz.png","metadata":{"files":{"readme":"readme.html","changelog":"CHANGELOG.html","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-24T19:45:15.000Z","updated_at":"2024-07-05T16:17:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f85452a-6ba4-4bd5-8599-32879c82037f","html_url":"https://github.com/joshuaiz/grate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joshuaiz/grate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fgrate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fgrate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fgrate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fgrate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshuaiz","download_url":"https://codeload.github.com/joshuaiz/grate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fgrate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259493502,"owners_count":22866330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-grid","starter-theme","wordpress","wordpress-theme"],"created_at":"2024-11-08T23:28:29.448Z","updated_at":"2026-01-31T00:45:06.455Z","avatar_url":"https://github.com/joshuaiz.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cimg src=\"https://studio.bio/images/logo_sm.svg\" width=96 /\u003e\n#Grate\nA super-minimal WordPress starter theme with CSS Grid for developers.\n\n\u003cp\u003e##What is Grate?\nGrate is a fork of \u003ca href=\"https://github.com/joshuaiz/plate\"\u003ePlate\u003c/a\u003e that uses explicit semantic HTML markup with CSS Grid.\u003c/p\u003e\n\n\u003cp\u003eGrid + Plate = \u003cstrong\u003eGrate\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp\u003e###tl:dr;\nWe need to restructure our markup, stripping it down to functional HTML components to work with CSS Grid the right way.\u003c/p\u003e\n\n\u003cp\u003e###A little preface on CSS Grid\nCSS Grid is a major milestone for CSS and web development in general and it is finally ready. Yet, to \u003cem\u003ereally\u003c/em\u003e use it properly we can\u0026#8217;t just assign some new parameters to existing markup in our CSS. Well, we \u003cstrong\u003ecould\u003c/strong\u003e, but we shouldn\u0026#8217;t. Why not? \u003cem\u003eCSS Grid changes the way we should think about how our HTML is structured.\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003eWhat does that mean? Well, for the entire history of the web, we have been using extraneous markup just to contain all of our elements that we need to arrange in our layouts, whether we are using floats, or more recently, Flexbox. Flexbox is great (and it works alongside CSS Grid) however it only works in one direction. What\u0026#8217;s more, to use Flexbox and floats we need to insert wrapper elements in our HTML to contain the child elements we want to align that are totally unrelated to the function of the document.\u003c/p\u003e\n\n\u003cp\u003eIf you\u0026#8217;ve made the move from floats to Flexbox, you\u0026#8217;ll notice the clearfix hack and flexbox do not play nicely with each other. You\u0026#8217;ll get all kinds of weird behavior that the clearfix hack was supposed to fix in the first place. Super no bueno.\u003c/p\u003e\n\n\u003cp\u003eThese extra containers lead to divitis, are woefully unsemantic and now, \u003cem\u003eare totally unnecessary\u003c/em\u003e.\u003c/p\u003e\n\n\u003cp\u003eTake this example HTML layout:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div id=\u0026quot;container\u0026quot;\u0026gt;\n\t\u0026lt;header\u0026gt;\n\t\t\u0026lt;div id=\u0026quot;inner-header\u0026quot; class=\u0026quot;clearfix\u0026quot;\u0026gt;\n\t\t\t\u0026lt;div id=\u0026quot;logo\u0026quot;\u0026gt;\u0026lt;img src=\u0026quot;logo.png\u0026quot; /\u0026gt;\u0026lt;/div\u0026gt;\n\t\t\t\u0026lt;h1\u0026gt;\u0026lt;?php the_title(); ?\u0026gt;\u0026lt;/h1\u0026gt;\n\t\t\t\u0026lt;nav\u0026gt;\u0026lt;/nav\u0026gt;\n\t\t\u0026lt;/div\u0026gt;\n\t\u0026lt;/header\u0026gt;\n    \u0026lt;div id=\u0026quot;content\u0026quot;\u0026gt;\n        \u0026lt;div id=\u0026quot;inner-content\u0026quot; class=\u0026quot;clearfix\u0026quot;\u0026gt;\n\t\t    \u0026lt;main id=\u0026quot;main\u0026quot; class=\u0026quot;clearfix\u0026quot;\u0026gt;\n\t\t\t    \u0026lt;article class=\u0026quot;clearfix\u0026quot;\u0026gt;\n\t\t\t\t    \u0026lt;?php the_content(); ?\u0026gt;\n\t\t\t    \u0026lt;/article\u0026gt;\n\t\t    \u0026lt;/main\u0026gt;\n\t\t    \u0026lt;aside class=\u0026quot;sidebar clearfix\u0026quot;\u0026gt;\n\t\t        \u0026lt;div id=\u0026quot;inner-sidebar\u0026quot; class=\u0026quot;clearfix\u0026quot;\u0026gt;\n\t\t\t\t   \u0026lt;?php get_sidebar(); ?\u0026gt;\n\t\t\t    \u0026lt;/div\u0026gt;\n\t\t\t\u0026lt;/aside\u0026gt;\n\t    \u0026lt;/div\u0026gt;\n\t\u0026lt;/div\u0026gt;\n\t\u0026lt;footer\u0026gt;\n\t\t\u0026lt;div id=\u0026quot;inner-footer\u0026quot; class=\u0026quot;clearfix\u0026quot;\u0026gt;\n\t\t\t\u0026lt;p\u0026gt;© 2018 Site Title.\u0026lt;/p\u0026gt;\n\t\t\u0026lt;/div\u0026gt;\n\t\u0026lt;/footer\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThe \u003ccode\u003e#content\u003c/code\u003e, \u003ccode\u003e#inner-header\u003c/code\u003e, \u003ccode\u003e#inner-content\u003c/code\u003e, \u003ccode\u003e#inner-sidebar\u003c/code\u003e, and \u003ccode\u003e#inner-footer\u003c/code\u003e divs are \u003cstrong\u003eonly\u003c/strong\u003e there to be wrappers to contain floats or be flexbox wrappers. They don\u0026#8217;t tell us anything about what is in them and really just muddy up your markup.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eClearfix is also super hacky.\u003c/strong\u003e While it works well enough, it never felt right to me. It solved a very real layout problem but in the process adds extra fluff to the markup. We don\u0026#8217;t need it anymore. For years, all of these hacky bits and extra divs is how we have been structuring our markup just to make it work.\u003c/p\u003e\n\n\u003cp\u003eUntil now, most of our job as web designers is making boxes around other boxes, then adding hacks until the boxes do what we want. What a mess!\u003c/p\u003e\n\n\u003cp\u003eIt\u0026#8217;s time to move on.\u003c/p\u003e\n\n\u003cp\u003eWith CSS Grid, we can have a much simpler semantic layout like this:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div id=\u0026quot;container\u0026quot; class=\u0026quot;grid\u0026quot;\u0026gt;\n    \u0026lt;header\u0026gt;\n        \u0026lt;h1\u0026gt;\u0026lt;?php the_title(); ?\u0026gt;\u0026lt;/h1\u0026gt;\n    \u0026lt;/header\u0026gt;\n    \u0026lt;main\u0026gt;\n        \u0026lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?\u0026gt;\n            \u0026lt;article\u0026gt;\u0026lt;?php the_content(); ?\u0026gt;\u0026lt;/article\u0026gt;\n        \u0026lt;?php endwhile; endif; ?\u0026gt;\n    \u0026lt;/main\u0026gt;\n    \u0026lt;aside\u0026gt;\n        \u0026lt;?php get_sidebar(); ?\u0026gt;\n    \u0026lt;/aside\u0026gt;\n    \u0026lt;footer\u0026gt;\n        \u0026lt;small\u0026gt;© 2018 \u0026lt;?php get_bloginfo('name'); ?\u0026gt;\u0026lt;/small\u0026gt;\n    \u0026lt;/footer\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eAnyone can read this and know exactly what is going on. This makes sense just as a \u003cem\u003edocument\u003c/em\u003e, without any rendering at all. What\u0026#8217;s great is this structure is fully accessible and without any extra markup, the styles are now functionally completely independent.\u003c/p\u003e\n\n\u003cp\u003eWe can keep this simple structure and use CSS Grid to do all the heavy lifting for our layout(s) with a few lines of code. No hacks, no calc, no floats. Boom.\u003c/p\u003e\n\n\u003cp\u003e###So what does this mean for Grate?\nWhen I initially forked Plate to create Grate, it became apparent really quickly that I would have to completely restructure the HTML in the theme templates, stripping it down to only the actual functional components.\u003c/p\u003e\n\n\u003cp\u003e####Liberate the markup!\nWith modular, component-based development coming into its own, breaking down the HTML markup into its semantic, functional components is an imperative. Most WordPress sites are not simply blogs and they need to be flexible enough to adapt to any templating system or layout, while still being responsive.\u003c/p\u003e\n\n\u003cp\u003eGrate is built with basic, functional HTML components that strip out many of the extra container divs, keeping the markup simple and adaptable. It comes with a default structure much like the example above but with only the base elements, these can be easily swapped out, rearranged or removed completely. Starting with this foundation is good for mobile first, accessibility and SEO at the same time.\u003c/p\u003e\n\n\u003cp\u003eOf course developers will need to add their own custom content components to these depending on the nature of the content they want to display. But now, there is (almost) nothing to strip away - the theme is about as agnostic as it can be.\u003c/p\u003e\n\n\u003cp\u003eAll that said, for Grate, I\u0026#8217;ve left in the #inner-header and #inner-footer divs so we can use max-width on the actual header and footer content (using the .wrap class) keeping the outer header and footer elements full width. These elements could be removed once the subgrid property is fully adopted. For now, we still need some interstitial HTML but it won\u0026#8217;t be long until the major browsers adopt subgrids.\u003c/p\u003e\n\n\u003cp\u003eJust like before, you can use custom page templates to create different layouts. Yet, by using CSS Grid and subgrids, the possibilities are endless and you probably don\u0026#8217;t need to use as many templates as before. Think about your page templates in a modular, component-based way and with just a couple page setups, you can cover all of the layouts your site needs. If you start out with a good grid to begin with, you could probably handle multiple layouts with just a few lines of scss.\u003c/p\u003e\n\n\u003cp\u003e##Notes:\u003c/p\u003e\n\n\u003cp\u003eThis is a super early alpha release so I would test this theme out before using it on a production site. It is subject to change a lot and eventually, some of the things in Grate may get merged into a future release of Plate.\u003c/p\u003e\n\n\u003cp\u003eI\u0026#8217;ve left some basic css in to set up the logo, site title, nav and background colors for the grid template areas; just remove these after you see your grid in action.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuaiz%2Fgrate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshuaiz%2Fgrate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuaiz%2Fgrate/lists"}