Materialize is a modern responsive front-end framework based on Material Design. For use in your web projects, it provides an option of both CSS as well as source SCSS files, along with JavaScript, material design icons and Roboto font. Included components are basic ones such as grids, forms, buttons, navbar and cards. Materialize is available on GitHub as well.

Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.

Materialize has some really cool features and is a great alternative to the everyday bootstrap framework that the majority of developers have been using.

Principles

Material is the metaphor

The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.

Bold, graphic, intentional

Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus. Emphasis on different actions and components create a visual guide for users.

Motion provides meaning

Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.

Our Favorite Feature

Something so simple as form inputs but the way it handles the animation, it looks so smooth. The challenge part to all of this will be changing the mindset of user to click instead of looking for a full bordered textbox.

Components

  • Badges
  • Buttons
  • Cards
  • Chips
  • Collections
  • Footers
  • Forms
  • Icons
  • Navbar
  • Pagination
  • Preloader

Javascript

  • Collapsible
  • Dialogs
  • Dropdown
  • Media
  • Modals
  • Parallax
  • Pushpin
  • ScrollFire
  • Scrollspy
  • SideNav
  • Tabs
  • Transitions
  • Waves

Check out Materialize