Creating a Training Webapp – Part 2

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!