tanmayk / d8mdl Goto Github PK

DESCRIPTION
-----------

A Drupal 8 Google Material Design theme
https://www.google.com/design/spec/material-design
This theme is not for front-end beginners.
Targeting extreme performance in modern browsers and new web technologies and
low-powered devices, this theme is for lightweight sites.
Use it when you are ready to move away from jQuery.
http://andreapaiola.name/2015-07-materialize-css-vs-material-design-lite/


FEATURES
--------

Easy theme administration:
- You can change the MDL version, default is "1.0.6". Easy upgrade.
- You change the MDL primary color, default is "indigo".
- You change the MDL accent color, default is "pink".
- You can load the Roboto font from Google CDN. This is bad for performance, avoid if possible.
- You can load the MDL CSS/JS from Google CDN or from a local directory.
- MDL Layout Components http://www.getmdl.io/components/index.html
-- Fixed Header
-- Waterfall Header
-- Scroll Header
-- Transparent Header
-- Seamed Header
-- Fixed Drawer
-- Footer mini or mega

Web App Manifest
http://w3c.github.io/manifest/
The file manifest.json is in the theme directory, compile with your website app data

NEW FEATURES (TODOs, in development)
------------------------------------

Progressive webapp with Offline-first (e.g. IndexedDB and ServiceWorkers) and Web workers (HTTPS only)
http://addyosmani.com/blog/getting-started-with-progressive-web-apps/
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org

Performance optimization with Modern Progressive Enhancement
https://www.youtube.com/watch?v=r038QioMtxI

HTTP/2 optimizations

LAYOUT STRUCTURE: Standard Drupal 8 Regions and MDL Layout components
---------------------------------------------------------------------

https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21page.html.twig/8
https://www.google.com/design/spec/layout/structure.html
http://www.getmdl.io/components/index.html#layout-section

page.header (Header)
Standard place for Site branding with logo, site name and site slogan.
In Material Design becomes the App bar / primary toolbar.

page.primary_menu (Primary menu)
Standard place for site Main navigation block, in Material Design becomes a navigation block in the header.

page.secondary_menu (Secondary menu)
Tipically the place for User account menu and users tasks, it becomes a layout block of menu type,
a hamburger menu in the header? I prefer in the drawer.
https://www.google.com/design/spec/components/menus.html
http://www.getmdl.io/components/index.html#menus-section

page.breadcrumb (Breadcrumb)
Breadcrumb navigation in content area

page.highlighted (Highlighted)
Status messages: alerts and errors messages in content area

page.help (Help)
Help messages in content area

page.content (Content)
Main page contents: contains entities fields output and main user interactions/contents

page.sidebar_first (Left sidebar) and page.sidebar_second (Right sidebar)
You can use for faceted navigations, become MDL navigation drawers.
https://www.google.com/design/spec/patterns/navigation-drawer.html
http://www.getmdl.io/components/index.html#menus-section

page.footer (Footer)
Copyright and Term of service area. Easy.


INSTALLATION
------------

Standard theme installation: copy the unzipped dir into "themes" directory.
MDL's CSS and JS are in Google CDN, but you can load from local theme subdirectory mdl/, look at the theme configuration.
Download from http://www.getmdl.io/started/index.html#download
Current MDL version: 1.0.6, but if you want you can update MDL version in theme configuration.
Default colors are indigo-pink, but MDL colors is customizable here http://www.getmdl.io/customize/index.html
and you can set in theme configuration.