Source Code Membuat Tampilan Responsive Pada Design Website Dengan CSS Grid.

[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.

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. 

Selamat mencoba dan Happy coding. Silahkan di Download Source Code nya untuk mempemudah kita belajar membuat layout responsive dengan CSS Grid. Jika Diterpakan pada HP atau smartphone maka hasilnya akan tampak seperti gambar di bawah ini.
css_grid_view_smartphone
Responsive Layout Dengan CSS Grid

Posting Komentar

Lebih baru Lebih lama