Tingkat dasar membangun web responsive dengan perangkat framework skeleton
Beberapa tahun yang lalu Dreamweaver atau CSS biasa sangat popular di kalangan design programmer tetapi seiring berkembangnya zaman Dreamweaver atau CSS biasa di geser oleh situs-situs penyedia CSS yang keren, praktis menjadikan hemat waktu, mungkin itu pertimbangannya karena lebih efektif dan efisien.
CSS Framework. Nah apa itu? CSS framework adalah library CSS yang digunakan untuk membuat standarisasi layout dan thema dari website. Dengan CSS framework kita bisa membuat Front-end website dengan cepat mengingat layout dan tampilan sudah disediakan. Di internet tersedia puluhan CSS Framework. Jika ingin mencari di Google, gunakan query “List CSS framework” pasti hasil dari searching lebih dari cukup. Salah satu nya adalah Skeleton.
Getkeleton adalah CSS framework yang mengutamakan kesederhanaan dan mengusung konsep Responsive web design. Ukuran dari framework ini sangat kecil. Framework ini sudah menyediakan layout tampilan, form, tombol dan typography. Walaupun memerlukan pemahaman yang lebih karena harus satu persatu dalam penataan komponennya apalagi hanya sedikit komponen yang tersedia tapi Thema & performance nya ringan,parih, terbatas danuntuk tampilan tidak mengecewakan karena menuurut saya lebih menarik, minimalis dan simple daripada booststrap.
Berikut contoh membangun web responsive dengan perangkat framework skeleton dasar :
(Header) Skeleton
<body>(Body)
<div id="wrapper">
<div id="wrapper-top">
<div class="container">
<div id ="header">
<div id="navigation">
<ul id="nav">
<li class="button button-primary"><a href="#top" onclick = $("").click();>Home</a></li>
<li class="button button-primary"><a href="#top" onclick = $("").click();>About</a></li>
<li role="presentation" class="button button-primary dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Program Study<span class="caret"></span>
</a>
<ul class="buttondropdown-menu">
<li role="presentation"><a href="#progdi" onclick = $("").click();>SI Teknik Informatika</a></li>
<li role="presentation"><a href="#pelatihan" onclick = $("").click();>SI Sistem Informasi</a></li>
<li role="presentation"><a href="#pelatihan" onclick = $("").click();>D3 Manajemen Informatika</a></li>
</ul>
</li>
<li class="button button-primary"><a href="#berita" onclick = $("").click();>Dosen</a></li>
<li role="presentation" class="button button-primary dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Mahasiswa Baru<span class="caret"></span>
</a>
<ul class="buttondropdown-menu">
<li role="presentation"><a href="#">Form Pendaftaran Online</a></li>
<li role="presentation"><a href="#">Syarat Pendaftaran</a></li>
<li role="presentation"><a href="#">Biaya</a></li>
</ul>
</li>
<li role="presentation" class="button button-primary dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Akademik<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li role="presentation"><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="wrapper-header">
<div class="container">
<div class="sixteen columns">
<ul>
<li>
<img width="100%" src="images/unisbank1.png" />
</li>
</ul>
</div>
</div>
</div>
<div id="wrapper-beforefooter">
<div class="container">
<div class="one-fourth column">
</div>
<h3>Visi dan Misi</h3>
<p>Setiap sektor kehidupan tidak ada yang terbebas dari ketergantungan terhadap teknologi informasi yang memerlukan otomatisasi diberbagai bidang, dengan kebutuhan perangkat lunak menjadi sangat penting. Fakultas Teknologi Informasi Universitas Stikubank (UNISBANK) Semarang mengoptimalkan pemberdayaan dan penguasaan Teknologi Informasi/Komputer. Untuk mencapai tujuan ini, maka Fakultas Teknologi Informasi memberikan berbagai macam bahasa pemrograman, rekayasa perangkat lunak, dan e-business. Pada umumnya mahasiswa yang berminat memilih fakultas ini adalah para mahasiswa yang berasal dari berbagai disiplin ilmu</p>
<h3>Visi</h3>
<p>Pada tahun 2020 menjadi fakultas teknologi informasi yang unggul, inovatif, adaptif dalam penerapan ilmu komputer dan informatika, berjiwa kewirausahaan dan berdaya saing nasional</p>
<h3>Misi</h3>
<br>1. Menyelenggarakan pendidikan akademik dan profesional untuk menghasilkan lulusan yang kompetitif berdaya saing nasional, memiliki semangat terus berkembang, bermoral dan berjiwa kewirausahaan.</br>
<br> 2. Mengembangkan penelitian di bidang komputer dan informatika yang terpadu, produktif dan terukur dalam rangka menunjang pengabdian kepada masyarakat.</br>
<br> 3. Menyelenggarakan layanan dan kemitraan dengan pemerintahan, dunia usaha dan menjaga hubungan dengan alumni dalam rangka penyempurnaan proses pembelajaran.</br>
</div>
</div>
</div>
(Footer)
<div id="wrapper-footer">
<div id="footer">
<div class="container">
<div class="sixteen columns">
<p>Copyright © 2015 Nur Hidayah (15.01.65.0004)</p>
</div>
</div>
</div>
</div>
Selamat mencoba :D
