I stumbled into W3 CSS, a lightweight framework with a ton of templates. I'm going to build one into a drupal theme.
This is almost like building a site from a mockup, but we have the templates to start from.
The first thing I did is create the theme with console generate.
Created Menu, Content, Footer regions.
I included w3.css as a library.
I dropped the theme into page.html.twig
Moved menu code into Main Menu block template.
Used Twig tweak to print system branding block in menu template.
Figure out how to get menu spacing right w/ admin menu:
.toolbar-fixed .w3-top,
.toolbar-vertical .w3-top {top: 39px}
.toolbar-horizontal.toolbar-tray-open .w3-top {top: 80px}
Change menu markup to match template.
Menu theming
menu.html.twig uses recursion:
{% import _self as menus %}
and
{ menus.menu_links(item.below, attributes, menu_level + 1) }}
What's going on here?
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %
Drupal Theme
Since I started this article, a W3CSS theme has been created: https://www.drupal.org/project/d8w3css.