MaterializeCSS is a frontend framework, similar to Twitter’s Bootstrap, with a focus on cloning Google’s Material Design. MaterializeCSS makes it easy to give webapps a native feel and a modern look.
Here’s the source for the home page of Module Based Training:
And the finished product:
As you can see, the syntax is very similar to Bootstrap and mimics a native android app, complete with the animations and transitions. It also includes useful tools you’d expect from a frontend framework: form validation, responsiveness, and CDN support to name a few.
Laravel by default builds page layouts with Bootstrap syntax, which luckily is very similar to MaterializeCSS. One hiccup I had was with the pagination, and I had to extend the Pagination class in Laravel to make it compatible. Artisan also made this easy.
php artisan vendor:publish --tag=laravel-pagination
This dropped a file in resources/views/vendor/pagination , pre-filled with the bootstrap compatible syntax.
And with the edited wrapper:
Perfect! Our app now looks modern on multiple devices.
Up next I will discuss deployment to Heroku. Stay tuned!
Leave a Reply