Search
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.
See also: Views admin.
Examples
Faceted searchhttps://www.drupalarchitect.info/module
Table w/ filtershttps://www.retrograde.bike/parts
Templates
views-view-unformated.html.twig, views-view-list.…
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
Menus
Main menu: 16px
Secondary menu: 14px
Main Menu
.menu--main {
font-size: var(--menu-main-font-size, larger)
}
Breadcrumbs
Tabs
Navigation
Customized navigation colors.
Navigation
UnoCSS
Shortcuts
shortcuts: {
'full-height': 'h-[calc(100vh_-_var(--drupal-displace-offset-top,_0px))]',
'border': 'border-1 border-solid border-black',
'input': 'border',
'menu': 'list-none flex flex-wrap gap-x-5 gap-y-2 p-0 m-0',
'space-…
Utilities
Generated from Starter Kit theme to get initial fixes and enhancements.
Base theme set to false (Instead of Stable9) to get latest changes from core.
Core issue: [PLAN] Drupal CSS Modernization Initiative.
mantra_starter.info.yml
name: Mantra Starter…
Theme
Images
Prevent images from overlapping.
img {
max-width: 100%;
height: auto;
}
Screenshot display mode
Media
Tables should scroll when overlapping, and collapse when the screen is too narrow.
Notes
https://designsystem.digital.gov/components/table/
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
https://css-tricks.com/responsive-data-tables/
https://css-…
Tables