Drupal Frontend

/**
 * @file
 * Basic CSS reset and normalization.
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background-color: #fff;
}

img {
  max-width: 100%;
  height: auto;
}


/**
 * @file
 * Custom JavaScript for THEMELABEL theme.
 */

(function (Drupal) {
  'use strict';

  Drupal.behaviors.THEMENAME = {
    attach: function (context, settings) {
      // Custom JavaScript code here
      console.log('THEMELABEL theme loaded');
    }
  };

})(Drupal);


# Theme Template

This is a basic Drupal theme template. To use it:

1. Copy this directory to your Drupal installation: `themes/custom/yourthemename/`
2. Rename files from `THEMENAME.*` to `yourthemename.*`
3. Replace all instances of `THEMENAME` with your theme's machine name (lowercase, underscores)
4. Replace all instances of `THEMELABEL` with your theme's human-readable name
5. Customize the theme as needed

## Files Included

- `THEMENAME.info.yml` - Theme metadata
- `THEMENAME.libraries.yml` - CSS/JS library definitions
- `THEMENAME.theme` - Theme functions and preprocessing
- `templates/page.html.twig` - Page template
- `css/base/reset.css` - Base CSS reset
- `js/custom.js` - Custom JavaScript

## Directory Structure

```
THEMENAME/
├── THEMENAME.info.yml
├── THEMENAME.libraries.yml
├── THEMENAME.theme
├── css/
│   └── base/
│       └── reset.css
├── js/
│   └── custom.js
└── templates/
    └── page.html.twig
```

You can expand the CSS structure as needed:
```
css/
├── base/
│   └── reset.css
├── layout/
│   └── layout.css
├── components/
│   └── components.css
└── theme/
    └── theme.css
```

## Next Steps

After creating your theme:

1. Clear cache: `ddev drush cr`
2. Enable your theme: Go to `/admin/appearance`
3. Set as default theme
4. Start customizing!

## Development Tips

- Enable Twig debugging in `sites/default/services.yml`
- Disable CSS/JS aggregation during development
- Clear cache frequently: `ddev drush cr`
- Use template suggestions for specific pages/content types


{#
/**
 * @file
 * Theme override to display a page.
 */
#}
<div class="layout-container">
  {% if page.header %}
    <header role="banner" class="site-header">
      {{ page.header }}
    </header>
  {% endif %}

  {% if page.primary_menu %}
    <nav role="navigation" class="primary-menu">
      {{ page.primary_menu }}
    </nav>
  {% endif %}

  {% if page.breadcrumb %}
    <div class="breadcrumb-wrapper">
      {{ page.breadcrumb }}
    </div>
  {% endif %}

  {% if page.highlighted %}
    <div class="highlighted">
      {{ page.highlighted }}
    </div>
  {% endif %}

  <main role="main" class="main-content">
    <a id="main-content" tabindex="-1"></a>

    <div class="layout-content">
      {{ page.content }}
    </div>

    {% if page.sidebar_first %}
      <aside class="sidebar sidebar--first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}

    {% if page.sidebar_second %}
      <aside class="sidebar sidebar--second" role="complementary">
        {{ page.sidebar_second }}
      </aside>
    {% endif %}
  </main>

  {% if page.footer %}
    <footer role="contentinfo" class="site-footer">
      {{ page.footer }}
    </footer>
  {% endif %}
</div>


name: THEMELABEL
description: 'A custom Drupal theme.'
type: theme
core_version_requirement: ^9 || ^10 || ^11
package: Custom

# Base theme (uncomment one)
# base theme: stable9
# base theme: claro
# base theme: olivero
base theme: false

# Regions
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  footer: Footer

# Libraries
libraries:
  - THEMENAME/global-styling
  - THEMENAME/g