Build Colorful Flat-Themed Websites with CSS Mint UI Kit

By Jake Rocheleau. in Toolkit. Updated on April 24, 2018.

Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and adding dynamic components such as dropdowns.

There are plenty of kits using flat design but few come close to CSS Mint. This 100% free open-source UI kit works great for all projects and any type of website you can imagine.

At the very core of CSS Mint, there is the Normalize library along with other custom resets. This is meant to squash all cross-browser issues and bugs to keep the codebase consistent across the board.

All CSS code follows OOCSS principles, so you should have an easy time adding to (or customizing) the existing codebase.

To get started, you just add the CSS Mint stylesheet to your project. This can be installed via Bower, or through a CDN link, or even hosted locally if you download a copy from GitHub.

When you create a new web page you’ll be following standards-compliant HTML5 code. Grid systems are based on container <div> elements. Most default elements such as <header> are fully styled, with optional classes for different layouts.

Out of the box, you’ll find classes for buttons, typography, navigation menus, form inputs and rich page elements such as cards. You can see plenty of examples on the demo page which includes code snippets as well.

The framework is constantly being updated with new styles and extra features, so Mint is likely to be around for the long haul.

It does not offer as much control as the Sass and Less frameworks but the beauty of Mint lies in its simplicity. Just add the stylesheet to your page and you’re good to go!

To learn more visit the GitHub repo for download links & installation instructions. And, you can share your thoughts with the creator Arun Michael Dsouza on his Twitter @amdsouza92.