Search
Views
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.…
Home
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…
Navigation
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.
Utilities
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-…
Theme
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…
Media
Images
Prevent images from overlapping.
img {
max-width: 100%;
height: auto;
}
Screenshot display mode
Tables
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-…
Components
Item list
Used for Create account/Reset password links on login form.
Dropbutton
Used in views entity operations (admin content list), views UI.
Needs work on absolute positioning.
CSS Aggregation
Drupal has these CSS layers:
Base
Layout
Component
State
Theme
Drupal libraries that load CSS define which layer each file is in. This sets the order they are loaded so cascading styles work correctly.
When a page is loaded, Drupal determines the…
Views Admin
Extend views_ui/admin.styles library, fixes in views_ui.admin.theme.css.
libraries/drupal/views_ui.admin.theme.css
Contains some overrides for dropbuttons.
Overrides are complicated and could be reworked.
Issues
Claro has a few fixes and…