Documentation
Development
Building CSS
The compiled CSS in css/dist/ is committed, so sites do not need Node.js. Rebuild after changing templates, components or css/src/:
npm install
npm run build # theme, CKEditor and docs CSS
npm run build:css # css/dist/maya.css only
npm run watch # rebuild maya.css on change
Styles use Tailwind CSS 3 with the tokens in css/src/tokens/. Tailwind's preflight reset is turned off because it breaks Drupal's toolbar and dialogs; css/src/base/ replaces it.
| Path | Contents |
|---|---|
css/src/tokens/ |
Colors, type scale, spacing, breakpoints, widths. |
css/src/base/ |
Element styles and form controls. |
css/src/components/ |
One file per component: header, menu, footer, home page, and so on. |
css/src/docs/ |
This documentation site. |
components/ |
Single Directory Components. |
templates/ |
Twig templates, grouped by type. |
Sub-themes
Reuse the tokens through the Tailwind preset:
// tailwind.config.js in your sub-theme
module.exports = {
presets: [require('../../contrib/maya/maya-preset.js')],
content: ['./templates/**/*.twig'],
}
Local site with DDEV
git clone https://git.drupalcode.org/project/maya.git && cd maya
ddev config --project-type=drupal11 --docroot=web --php-version=8.3
ddev add-on get ddev/ddev-drupal-contrib
printf 'web_environment:\n - DRUPAL_PROJECTS_PATH=themes/custom\n' > .ddev/config.maya.yaml
ddev start
ddev poser
ddev symlink-project
ddev drush site:install standard -y
ddev drush theme:enable maya -y
ddev drush config:set system.theme default maya -y
This site
These pages are built with MkDocs by the pages job in drupal.org's GitLab CI templates, using the custom theme in docs_theme/. The job runs when docs/, docs_theme/ or mkdocs.yml changes on 1.0.x. To preview locally:
npm run build:docs
pip install mkdocs-material
mkdocs serve