google framework css terbaru
Materialize (Google Template)

Materialize Framework CSS Terbaru Google Punya

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 :

grid materialize frame work css
grid materialize frame work css
<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 :

container body materialise
container body materialise
<body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
</body>

Selengkapnya dapat dilihat di alamat ini Framework CSS Materialize Google

Praktisi Komputer
Magister Teknik Informatika, 22 Tahun, Skill : Programming Web, Mobile, Dekstop, Internet Marketing & Optimasi
http://praktisikomputer.com

Leave a Reply