Jika kalian mempunyai akun google plus, pasti kalian pernah melihat tampilan website google materialize. Framework CSS seperti bootstrap sepertinya sudah sangat familiar di telinga para developer website, dengan tampilan yang responsive dan easy use, pemula-pemula web programming pasti akan merujuk ke salah satu framework css ini.
Artikel ini saya tulis kepada semua orang yang sudah tahu apa itu CSS, pastinya orang-orang komputer dan para programmer yang tahu. Cobalah sesekali anda menggunakan framework css Google Materialize yang akan saya bahas kali ini. Framework ini mempunyai varian-varian design dan animasi yang tidak ada di web lain. Ukuran yang sedikit dan cara menggunaan class class yang simpel, sangat recommended bagi kalian yang ingin mencoba framework css yang baru ini lah frameworknya.
Grid System
Contoh penggunaan seperti ini :
<html> <head> <!--Import Google Icon Font--> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>
Untuk Grid System, materialize hampir sama dengan bootstrap yaitu 12 column. berikut contohnya :
<div class="row"> <div class="col s1">1</div> <div class="col s1">2</div> <div class="col s1">3</div> <div class="col s1">4</div> <div class="col s1">5</div> <div class="col s1">6</div> <div class="col s1">7</div> <div class="col s1">8</div> <div class="col s1">9</div> <div class="col s1">10</div> <div class="col s1">11</div> <div class="col s1">12</div> </div>
Container body
Pada body yang biasanya terdapat default padding container disini juga terdapat :
<body> <div class="container"> <!-- Page Content goes here --> </div> </body>
Selengkapnya dapat dilihat di alamat ini Framework CSS Materialize Google
Sumber : disini
Leave a Reply