[2column]
[content]
Download | Demo
[/content]
[content]
Gambar tampilan CSS Grid untuk membuat sebuah halaman agar Responsive.[/content]
[/2column]
Dengan CSS Grid ini maka kita bisa mendesain sebuah tampilan website yang akan kompatible baik pada tampilan desktop atau mobile atau lebih ddikenal dengan istilah responsive.
[code type="HTML"] <link href="css/nav-top.css" rel="stylesheet" type="text/css" media="all" />
<!-- Default styles, like padding, colours and sizes -->
<link href="css/default.css" rel="stylesheet" type="text/css" media="all" />
<!-- iPad Landscape + -->
<link href="css/fixed-1024.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)">
<!-- iPad Portrait -->
<link href="css/fixed-768.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1023px)">
<!-- iPhone Landscape -->
<link href="css/fixed-480.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<!-- iPhone Portrait -->
<link href="css/fixed-320.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<!-- Percentage Columns -->
<link href="css/percent.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px)">
<!-- Stack Columns. Change min-width to when you would like stacked columns to start and max-width to when you would like it to end -->
<link href="css/stack2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<link href="css/stack1.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link href="css/stack1-2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">[/code]
<script type="text/javascript" src="js/run_prettify.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>[/code]
1. Cara Membuat Tampilan Responsive.
Langkah pertama adalah dengan memanggil file CSS terlebih dahulu. Berikut script memanggil file CSS nya.[code type="HTML"] <link href="css/nav-top.css" rel="stylesheet" type="text/css" media="all" />
<!-- Default styles, like padding, colours and sizes -->
<link href="css/default.css" rel="stylesheet" type="text/css" media="all" />
<!-- iPad Landscape + -->
<link href="css/fixed-1024.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)">
<!-- iPad Portrait -->
<link href="css/fixed-768.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1023px)">
<!-- iPhone Landscape -->
<link href="css/fixed-480.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<!-- iPhone Portrait -->
<link href="css/fixed-320.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<!-- Percentage Columns -->
<link href="css/percent.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px)">
<!-- Stack Columns. Change min-width to when you would like stacked columns to start and max-width to when you would like it to end -->
<link href="css/stack2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">
<link href="css/stack1.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link href="css/stack1-2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)">[/code]
2. Langkah Kedua Adalah Memanggil File J Query Ke Dalam Project.
Untuk memanggil file J query ke dalam project bisa dilihat pada script di bawah ini.
[code type="HTML"]<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/run_prettify.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>[/code]
3. LAngkah Ketiga Menempatkan Code HTML pada Kolom Grid Yang Sudah Ada.
Pada tahap ini CSS Grid Layout kita sudah siap untuk digunakan. Silahkan memanfaatkan template yang ada. Untuk melihatnya silahkan lihat demo nya.