Search
Table may not be showing groupings correctly.
Views filter and/or table
Remove border and Advanced title so it looks like the other columns.
Remove advanced settings from detail element
How should we build a theme for a new Drupal site?
Drupal core now has a Starter Kit that replaces Classy. This will copy some classy-esque styles and templates to set you up with some defaults, fixes, and BEM structure. The new theme is based on Stable,…
Questions
Normalize.css
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
Form.css
button, input, optgroup, select,…
Forms
typography.css
Font
body {
font-family: sans-serif;
line-height: 1.5;
}TODO
Use fonts that users will have on their computer to avoid external dependencies.
https://systemfontstack.com/
https://modernfontstacks.com/
Site name
Mantra Theme
.…
Typography
layout.css
Page Width
Page width can be set in theme settings.
Small - 36rem
Medium - 48rem
Large - 64rem
Admin pages are 72rem.
.layout-container {
max-width: 64rem;
margin: auto;
}Container overflow
Prevent overflow of content.
https://codepen.io/…
Layout
Fields are rendered on content displays (nodes, blocks, users, etc).
.field {
margin-bottom: 1rem;
}<div class="field field--name-field-frequency field--type-entity-reference field--label-above">
<div class="field__label">…
Fields
Primary usage is in admin screens.
Media library via ckeditor.
Views config.
Issues
Dialog scrolls to first tabbable buttons (media type menu gets cut off).
Modals
Encourage use of classes in view, display, rows, fields.
Admin
Extend views_ui/admin.styles library, fixes in views_ui.admin.theme.css.
Examples
Faceted searchhttps://www.drupalarchitect.info/module
Table w/ filtershttps://www.retrograde.bike/parts…
Views
The Mantra theme for Drupal is simple and minimal.
Utility classes allow customizing components via the UI.
Inspiration
https://getbootstrap.com/An excellent front-end framework.
https://designsystem.digital.gov/A practical framework for government-wide…
Home