Materiable UI is a lightweight open source Web UI Kit that implements Google’s Material Design using Bootstrap 4 framework.

The default material UI Kit that is available online at www.material-ui.com can only be used in React.JS, and it’s frustrating since we can not use it on our PHP, Python, ASP.NET, etc projects.

Since Bootstrap 4 components are mostly flat, it makes it a good candidate for material design. The idea I had in mind was to remodel the UI of Bootstrap and turn it into a material design, which in my opinion turned out to be a success.

With the help of Bootstrap utilities we can achieve pretty any design pattern we want without having to include additional custom CSS. The components of Materiable UI were constructed using Bootstrap’s built in Utilities, so it requires intermediate knowledge of Bootstrap 4 to  be able to customize it.

I’m aware that there are a lot of similar Web UI Kits out there who built Material Design components out of Bootstrap, but I feel like there’s always that one or two components that I do not like on their Kit, hence the reason why I ended up building my own, which is now known as Materiable UI.

As mentioned earlier, the components of Materiable UI were constructed using Bootstrap Utilities, so you should be familiar with how the utilities work, such as d-block which translates to display: block; , float-left for float: left; , text-right for text-align: right; , mt-5 for margin-top: 3rem; ,  mx-3 for margin-left: 1rem; margin-right: 1rem;  text-dark for color: #343a40;  and etc.  You should also be familiar with CSS  as some of the components include inline styling. There are also a few custom utility classes that I added, so be sure to check those out on the individual components page.

Each component includes a link labeled Show Code located on the top right portion, which on click will show you the source code of the given component in Modal View.

Materiable UI does not entirely follow the design concepts that are outlined by Google on their documentation, It was mostly built base on personal preference.

Got feature requests? feel free to email me @ carl.fontanos@gmail.com.

Materiable UI will get updated often, so be sure to watch out for new releases.

Guide To Styling:

• If you’re not familiar with Material Design color combinations, you may grab some ideas from Google’s Material Design color tool: https://material.io/tools/color/
• If you’re building a component that has styles that only applies to itself, then you should use inline styles – while this may seem like a bad practice – it’s actually highly recommended by Google as it helps improve the performance of your page by limiting the amount of styles in your global style files. But you should also manage your inline styles, try not to use too many and simply rely on the provided utilities of Bootstrap.