Material Design Extension (Theme) by Extum

arda

Material Design Extension by Extum

Materialize your forum with a Material Design extension (theme) designed with care.

Installation

composer require extum/flarum-ext-material

Try it out before installing

Extum offers a demo server powered by FreeFlarum.com that has the theme installed for you to try out before installing. Feel free to test post, like, comment and play around as you like.

Link: https://materialtheme.freeflarum.com

Contributors

This theme wouldn't be possible without our contributors. You can be one of our contributors too! Learn more.

Contributing

If you want to speed up development and help Extum to make this even better, consider reporting every bug you see by clicking here or find solutions to open issues and create a PR.

Features

Material icons: This theme automatically will include Material Icons, meaning you will get the highest Material experience on your forum.
Cards and elevation: The theme will replace the flat design Flarum got with shadows, cards, and elevations that Material Design has in its core.
UI improvements: For you to offer your users the best forum experience they can have, Material Design theme by Extum offers you the best experience you can give with UX improvements and more.
More: Explore it yourself, you can find the installation instructions above. Thank you for supporting Extum.

Screenshots

Below you can find screenshots of how the theme looks like.

jordanjay29

arda Warning: This theme is currently in the development stage and is not stable. Consider helping at it's Github repository.

Moved to Dev tag as per our extension guidelines.

Kryonoglou

arda require

If you disable the extension you will destroy your flarum.. Keep backup.

dayatbethoven

arda how do I use this thema? I installed it and have activated this extension, but the view has not changed

arda

jordanjay29 There are many extensions on Beta that are tagged as Extension/Themes. I posted this topic for users to use on their forums, not to develop here on the forum.

Hope you're understanding what I mean.

jordanjay29

arda If it's unstable and in development stages, it does not satisfy our extension guidelines. I'll happily move it back once it's release ready.

Prosperous

And just a heads up but I receive a '504 Gateway Time-out' when attempting to view the demo you provided in the link. May want to check that out so people can see what it looks like live.

Nathan5226

Prosperous Same here.

arda

Prosperous And just a heads up but I receive a '504 Gateway Time-out' when attempting to view the demo you provided in the link. May want to check that out so people can see what it looks like live.

It's now working for me. It was probably related to what @Frink said below.

Frink Its an issue with freeflarum ?, @Sanguine will prolly resolve it shortly

So I will be asking a few questions to improve this theme and here's the first one:

Do you guys want the hovering shadow back? Like it was there before and I removed it and made all shadows a single value for mobile optimization.

For example, when you hover over posts, discussions and other elements, they increase their drop shadow and become visible.

Frink

Nathan5226 Its an issue with freeflarum ?, @Sanguine will prolly resolve it shortly

Sanguine

Issue with FreeFlarum is resolved, sorry for the inconvenience! See the FreeFlarum thread for more information.

arda

Sanguine Thanks @Sanguine.

yiveco

They look elegant, but they don't look so good on the mobile side. Like these naughty icons, this also exists in the demo site.

arda

yiveco Thank you for your report. Please see my response to your issue you opened at the repository.

I'm doing some experimenting with the design and wanted to ask everyone something.

I replaced the background color of all Alert's with the Material snackbar color and decided using the same design with Alert--error's and Alert--success'.

So, the question is, should I keep the colors, or make them all like this?

I had the idea of changing the close button color to the alert type, so that's an option too.

clarkwinkelmann

It would be great to use subresource integrity to protect a forum from potential malicious changes that hosted script.

It would also be great to protect the stylesheets but that's sadly not possible as the whole interest of using an hosted version here is to change it at will. At least stylesheets are not as dangerous as scripts (yet).

I computed the missing hash but sadly it doesn't work because that CDN hasn't configured the correct CORS header...

<script defer src="https://code.getmdl.io/1.3.0/material.min.js" integrity="sha384-KxJ0gpu9LJdUtdV6oe5/l3PSF37awRaWGFhnKt8hq6vS3/Wlzy1YPuJzIwg/ljkW" crossorigin="anonymous"></script>

If somebody could get those material guys to fix their CDN (and update their example "hosted" section to use subresource integrity) that would be better for everyone. Is it a project backed by Google ? I would be very surprised they overlooked that if it's them ?

arda

clarkwinkelmann Is it a project backed by Google ?

getmdl.io is a project by Google.

clarkwinkelmann It would be great to use subresource integrity to protect a forum from potential malicious changes that hosted script.

I'll try it. Thanks.

arda

This theme is now available as an extension, hooray!

I'm also removing the beta warning, so this can be listed at Extensions/Themes. @jordanjay29, can you move it, please?

Installation is still so simple:

composer require extum/flarum-ext-material

arda

Notice

This is a notice for everyone who's using (or interested in using it in the near future). We have addressed major issues in 1.0.0-beta.1 such as the style file not loading in the admin panel.

We fixed all these issues for 1.0.0-beta.2 and we plan to release 1.0.0-beta.2 on 2 August. You can see 1.0.0-beta.2 progress here: https://github.com/Extum/flarum-ext-material/milestone/4. You can contribute with PRs to speed up the development.

I'm publishing this to let you know we didn't forget the admin panel, and it's an issue ?

Thank you for your understanding.

arda

We are going to offer customization settings (e.g. Material Icons or Font Awesome) to users via the admin panel and we need suggestions for it.

You can read more and submit suggestions at Extum/flarum-ext-material109.

DMT

arda

It looks very clean. Nice work.
I believe it is to much shadow (dp) around the cards, icons.

Or is the shadows 2dp like it is at:
https://getmdl.io/components/index.html#cards-section