tanmayk / d8mdl Goto Github PK
View Code? Open in Web Editor NEWThis project forked from andreapaiola/d8mdl
Drupal 8 theme Google Material Design Lite
This project forked from andreapaiola/d8mdl
Drupal 8 theme Google Material Design Lite
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.