Skeleton CSS merupakan suatu kumpulan css untuk mempercantik tampilan halaman user yang dapat sobat download di link download ini. Menurut saya pribadi skeleton ini very powerfull. Kalau sobat ingin menggunakan CSS Collection yang simple
dan ringan, pakailah Skeleton. Di Skeleton ini hanya ada beberapa style buat element tidak seperti CSS Collection yang lainnya yang mempunyai banyak style element hal ini mungkin ada beberapa diantara sobat yang membuat design full menggunakan CSS Collection kurang suka menggunakan Skeleteon namun buat saya pribadi lebih suka dengan CSS Collection ini karena saya mendesain web tidak full menggunakan CSS Collection. Berikut beberapa feature yang sering dipakai oleh saya pribadi adalah sebagai berikut :
dan ringan, pakailah Skeleton. Di Skeleton ini hanya ada beberapa style buat element tidak seperti CSS Collection yang lainnya yang mempunyai banyak style element hal ini mungkin ada beberapa diantara sobat yang membuat design full menggunakan CSS Collection kurang suka menggunakan Skeleteon namun buat saya pribadi lebih suka dengan CSS Collection ini karena saya mendesain web tidak full menggunakan CSS Collection. Berikut beberapa feature yang sering dipakai oleh saya pribadi adalah sebagai berikut :
1. Grid
Dalam grid ini terdiri dari 12 column fluid. Class - class grid ini adalah sebagai berikut :
- one column
- two columns
- three columns
- four columns
- five columns
- six columns
- seven columns
- eight columns
- nine columns
- ten columns
- eleven columns
Contoh :
Saya akan coba buat design layout seperti postingan sebelumnya mengenai Cara membuat layout dengan element div namun bedanya disini saya akan menggunakan skeleton untuk membuat layoutnya. Gambar layout sperti ini :
Pastikan sobat sudah mendownload CSS Collection nya lalu extract dalam suatu folder misalkan nama foldernya itu "blogger". Hasil extract nanti yang diambil hanya file skeleton.css nya saja lalu dimasukan ke folder css. Sesuaikan strukturnya seperti dibawah ini.
Open file index.html lalu edit file tersebut dengan memasukan script berikut :
<html>
<head>
<title>Belajar Membuat Layout Dengan Element DIV</title>
<link href='http://localhost/blogger/css/skeleton.css' rel='stylesheet'/>
<style>
.header{
height:100px;
background:#999;
}
.sidebar{
height:300px;
background:#888;
}
.content{
height:300px;
background:#777;
}
.footer{
height:60px;
background:#666;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="header eleven columns"></div>
</div>
<div class="row">
<div class="sidebar four columns"></div>
<div class="content seven columns"></div>
</div>
<div class="row">
<div class="footer eleven columns"></div>
</div>
</div>
</body>
</html>
<head>
<title>Belajar Membuat Layout Dengan Element DIV</title>
<link href='http://localhost/blogger/css/skeleton.css' rel='stylesheet'/>
<style>
.header{
height:100px;
background:#999;
}
.sidebar{
height:300px;
background:#888;
}
.content{
height:300px;
background:#777;
}
.footer{
height:60px;
background:#666;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="header eleven columns"></div>
</div>
<div class="row">
<div class="sidebar four columns"></div>
<div class="content seven columns"></div>
</div>
<div class="row">
<div class="footer eleven columns"></div>
</div>
</div>
</body>
</html>
Kalau Script diatas di running akan mengasilkan tampilan layout seperti gambar diatas. Namun bedanya disini kalau ukuran browser di perkecil ukurannya, tampilan layout akan menyesuaikan atau lebih di kenal dengan istilah responsive. Sehingga kita tidak perlu memikirkan pakai persen atau pixel dll. karena oleh skeleton udah di desain kalau memakai grid style akan otomatis responsive. Hasilnya akan seperti gambar dibawah ini:
Pada gambar diatas bila ukuran browsernya di ubah jadi kecil maka element header, sidebar, content dan footer otomatis akan berderet kebawah.
2. Button
Pada feature button ini, skeleton mempunyai 2 type button yaitu button yang tidak mempunyai warna background dengan warna font gelap serta button yang mempunyai warna biru dengan warna font putih. Contohnya sebagai berikut :
<button>Tombol tanpa warna</button>
<button class="button-primary">Tombol dengan warna</button>
<button class="button-primary">Tombol dengan warna</button>
3. Form
Bagian form ini akan saya contohkan membuat form login :
<form>
<input type="text" placeholder="username"/><br />
<input type="password"/><br />
<input type="submit" value="login" class="button-primary">
</form>
<input type="text" placeholder="username"/><br />
<input type="password"/><br />
<input type="submit" value="login" class="button-primary">
</form>
4. Tables
Ini contoh hasil untuk pembuatan table.
<table>
<tr>
<th>Username</th>
<th>Email</th>
<th>Kota</th>
</tr>
<tr>
<td>Kazzet</td>
<td>zzz@yyy.ccc</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Zone</td>
<td>rrr@yyy.uuu</td>
<td>Bandung</td>
</tr>
</table>
<tr>
<th>Username</th>
<th>Email</th>
<th>Kota</th>
</tr>
<tr>
<td>Kazzet</td>
<td>zzz@yyy.ccc</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Zone</td>
<td>rrr@yyy.uuu</td>
<td>Bandung</td>
</tr>
</table>
Hasilnya seperti dibawah ini :
Element diatas merupakan beberapa dari style element yang ada di skeleton yang sering saya gunakan untuk membuat suatu halaman web. Mungkin sobat bisa explore lebih jauh di link skeleton. Sekian tutorialnya semoga bermanfaat.
-- Thx --
Bagikan
Cara menggunakan skeleton css
4/
5
Oleh
kazzet
![Loker PT PAMA PERSADA NUSANTARA JULI 2017 [Expired]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMnORAL1VUL2XE6NxRqJ1h09Svc-FMzOonFp02tzjVTmFBwMS72HdqThF8zP6RHogVw13WyxuKBRhWLakQhqbPRqxt-nQPYLWuO77T7YEpcbuN9tFsaslLg6Vx0sgFx08qvvqUjl7px0/s72-c/pama1.jpg "Loker PT PAMA PERSADA NUSANTARA JULI 2017 [Expired]")
![[INTERNSHIP] Telkomsel Next Gen [expired]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64RLk5gtQu7mnuSE456UFo2sJVGh_ssYCtYGimQnnBofU573bIAP5uj7IaIsqYoINd5YGzWBln9kW2NxJ3mJEnIaV2WsyYFBBbGpA7nUyviTvKE0A7HYHEteFzn1qbv8A_XWIUpSS5as/s72-c/telkomsel.PNG "[INTERNSHIP] Telkomsel Next Gen [expired]")
