Mengenal Materialize CSS

Selamat datang kembali di rumah. Kali ini kopiding.in ingin membahas salah satu Framework CSS besutan Google yang tidak kalah cantiknya dan terbilang masih muda dibanding framework css lain seperti Bootstrap ataupun Foundation, yah siapa lagi kalau bukan Materialize CSS. Oke, mungkin kalian akan bertanya-tanya (mungkin tidak) kapan framework ini dibuat? siapa saja ‘dalang’ dibalik pembuatan framework ini? bla bla bla hublaa? Yuk mari kita simak dan belajar bersama penjelasan dimari. Cek i dot.

Pengenalan


Materialize CSS merupakan salah satu dari banyaknya framework css yang hingga saat ini masih banyak digunakan oleh para developer. Bersaing dengan framewok css lain seperti Bootstrap, Foundation, Flat UI, Metro UI, Pure CSS, dan lain-lain. Materialize terbukti mampu menarik hati banyak developer untuk mengadaptasi teknologinya ke dalam projek mereka.

Konsep dari Materialize sendiri diprakarsai oleh Google dan mulai dibangun sekitar awal November tahun 2014 oleh tim yang beranggotakan Alvin Wang, Alan Chang, Alex Mark, dan Kevin Louie. Mereka merupakan para pelajar dari Universitas Carneige Mellon.

Materialize merupakan sebuah kerangka kerja yang menggabungkan prinsip-prinsip klasik desain yang berjalan bersama dengan inovasi teknologi saat ini. Tujuan Google menciptakan framework ini adalah untuk mengembangkan sebuah sistem desain yang memungkinkan kenyamanan interaksi antara pengguna dan produk-produk mereka (user experience).

Bagaimana cara memulainya?


Instalasi Materialize CSS

Ada beberapa cara dalam instalasi Materialize, cara pertama yaitu dengan mendownload file cssnya atau bisa juga mendownload file sassnya di sini.

CDN

Cara lainnya dengan menggunakan CDN, letakkan CDN di antara tag <head>….</head>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Kita juga dapat mengetahui semua versi CDN Materialize di sini

NPM

Berikutnya kita juga dapat memasang Framework Materialize dengan versi yang terakhir dirilis atau terbaru dengan npm.

npm install materialize-css@next

Untuk melihat informasi package dari Materialize, kita dapat melihatnya di sini.

Bower

Sebenarnya masih ada satu lagi cara menginstal Framework Materialize, yaitu melalui Bower. Namun sayangnya sekarang instalasi melalui Bower sudah tidak lagi didukung (deprecated).

bower install materialize

Fitur apa saja yang ditawarkan?


Materialize memiliki beragam fitur atau keunggulan yang cocok untuk diimplementasikan ke dalam projek kita. Selain responsive sama seperti framework css umumnya, rancangan desainnya yang indah dan menarik membuat Materialize merupakan salah satu framework front-end yang digemari para pengembang aplikasi bahkan untuk yang baru mempelajarinya sekalipun.

Berikut fitur-fitur yang disajikan oleh Materialize berdasarkan menu yang tersedia

CSS

* Color
* Grid
* Helpers
* Media
* Pulse
* Sass
* Shadow
* Table
* Transitions
* Typography

Components

* Badges
* Buttons
* Breadcrumbs
* Cards
* Chips
* Collections
* Footer
* Forms
* Icons
* Navbar
* Pagination
* Preloader

JavaScript

* Carousel
* Collapsible
* Dialogs
* Dropdown
* FeatureDiscovery
* Media
* Modals
* Parallax
* Pushpin
* ScrollFire
* ScrollSpy
* SideNav
* Tabs
* Transitions
* Waves

Dan masih banyak lagi fitur-fitur yang dimiliki oleh Materialize, kalian bisa melihatnya di situs resmi Materialize.com.

Kesimpulan


Materialize merupakan salah satu dari sekian banyak Framework CSS yang menyediakan banyak fitur untuk kita pakai. Desain yang cantik dan menarik, sangat cocok diimplementasikan pada era teknologi saat ini. Materialize juga sangat friendly untuk digunakan dan dipelajari oleh pemula (seperti saya). Jadi, jika kalian ingin belajar salah satu Framework CSS, jangan takut untuk mencoba mencicipi Framework buatan Google yang satu ini.

Referensi


[1] Materialize CSS, http://materializecss.com