Material Admin

Material Design Inspired Admin Theme Utilizing the Materialize CSS Framework

Dev Requirements

Yarn package manager

Dev Setup

• yarn install installs Yarn dependencies
• gulp libsrc gets libraries and places them in the vendor directory
• gulp rename renames conflict with jQueryUI and Materialize CSS autocomplete plugin and places it in /js/lib to manage in git repo.
• gulp sass or gulp to watch sass changes

Features Notes

• Additional features supported with Material Admin Support module.
• Portal style login screenshot. To use this, you will want to alter the login paths to use the admin theme. I created a simple module that does this for you: https://www.drupal.org/project/admin_login_path
• Breadcrumbs are set in /config/install to be placed in a region "breadcrumbs" which display below the header. If you would like to reduce the the vertical space. you can move the breadcrumbs to the header above the site branding block, which is styled to use Material Design standard for applications.

To-Do

• Gulp Setup
• Add method to use materialize partials
• Navigation / Local Tasks
• Breadcrumbs (responsive)
• Date and Time selector
• Submit and action buttons
• Vertical Tabs support desktop
• Vertical Tabs support mobile (menu style)
• Submit button loading UX
• Admin landing page / group styling
• Dropbutton replacement
• Throbber/progress icons
• Admin/content enhancements
• Views UI
• Form styling defaults (90%)
• Tables
• Status pages
• Status Message
• Theme Select page
• Node add/edit
• jQueryUI Dialog Theme & Enhancements
• Add generic 'card' twig template
• Behat Testing
• Visual Regression Testing

Contrib module admin UI support

Some contrib modules have complex UIs defined and the only way to really support them is by adding specific styling.

• Entity Browser
• Paragraphs
• Webform
• Fieldgroup

Clean-up oganization To-Do

Since this is just a POC, code is not very well organized and needs to be matured. here is what I see so far:

• Make JS features optional in settings
• Move SCSS out of admin.scss into sub components (e.g. navigation, buttons, forms (done), etc.)
• Move preprocess functions into .inc files and out of .theme
• Easy color swap in SCSS variables (_settings.scss)
• Better way to handle Materialize CSS overrides
• Prod deployment packaging (Min, optimize, etc)
• Code standards + Lint