Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)
Dalam tutorial ini kami akan berfokus pada pengkodean tata letak PSD, menggunakan boilerplate kerangka responsif. Ada banyak tutorial tentang bagaimana kode desain yang menggunakan HTML dan CSS, sering dengan dash tambahan JavaScript, tetapi tujuan utama dari tutorial ini adalah untuk mendapatkan hal-hal yang dibangun menggunakan versi terbaru dari kerangka kerangka (2.0.4). Ada beberapa perbaikan besar sejak kami terakhir tertutup itu!
Pertama-tama, izinkan saya memperkenalkan kerangka, maka kita akan melompat ke coding.
Apakah kerangka Boilerplate?
Kerangka adalah gagasan dari Dave Gamache. Ini adalah dua belas kolom, fluida grid, dengan lebar standar 960px, dasar tipografi dan minimum gaya untuk elemen HTML umum seperti tombol, link, input dan textareas.
Kekuatannya terletak pada kenyataan bahwa itu adalah kerangka CSS cahaya. Hanya dalam 400 baris kode, Skeleton dirancang untuk menjadi titik awal, bukan kerangka penuh yang dipenuhi desain UI seperti Bootstrap, Foundation vs Semantic UI.
Mengapa menggunakan kerangka?
Karena itu mudah digunakan, dan itu adalah awal yang baik untuk membangun kerangka responsif Anda sendiri.
Jadi apa baru?
Dave Gamache memperkenalkan dan diperbarui beberapa fitur dalam kerangka v2.0:
- utilitas kelas seperti .
u-lebar penuh,.u-max-lebar penuhyang sangat cocok untuk 100% lebar wadah - tipografi
- tombol
- forms
- Daftar
- Tabel
Mulai
Selama tutorial ini kita akan mengkodekan desain yang ditunjukkan di atas, dibuat oleh Samir Timzguieda. Sepanjang jalan kita akan:
- Download kerangka dan menulis kita sendiri HTML markup
- Menarik gambar dari PSD dan menulis CSS
- Menambahkan rasa JavaScript di atas yang akan menambah interaktivitas beberapa
Mari kita mulai dengan men-download kerangka kerangka dari www.getskeleton.com dan meraih PSD dari file source.
Sketsa dan perencanaan
Anda dapat memilih pendekatan yang berbeda, tapi saya ingin memulai dengan membuat sketsa tata letak untuk memvisualisasikan setiap bagian. Ada banyak bagian di seluruh tata letak:
- Pahlawan
- Pengenalan
- Kreativitas
- Pekerjaan
- Tolong
- Klien
- Tentang
- Video
- Mengapa kami
- Kutipan
- Menghubungi
- Kontak
- Footer
Ini adalah hasil saya membuat sketsa untuk struktur HTML yang diinginkan:
Bagian
Untuk setiap bagian kita akan membuat wrapper (atau band) wadah yang akan mengisi seluruh jendela lebar, dengan nama bagian sebagai nama kelas. Di dalamnya kita mengambil keuntungan dari kerangka dengan membangun grid untuk membuat baris pembungkus dan kontainer. HTML untuk setiap bagian akan varian ini:
1 |
<section class="hero"> |
2 |
<div class="container"> |
3 |
|
4 |
<!-- html for this section goes here -->
|
5 |
|
6 |
</div>
|
7 |
</section>
|
Sekarang saatnya untuk mengambil setiap bagian dan menambahkan markup. Jangan khawatir tentang gaya, Gambar, font dan seterusnya, untuk sekarang kita berkonsentrasi pada struktur HTML murni.
Menu
Untuk menu, kita perlu menambahkan ikon "hamburger" dan daftar unordered penuh dengan link internal. Setiap link akan mengarah ke bagian tertentu.
Catatan: keen bermata antara Anda mungkin mengenali fa fa-bar kelas pada <i>elemen untuk ikon navigasi. Ini khas dari ikon Font Awesome, yang kami akan menerapkan nanti dalam proses.
1 |
<nav class="navigation"> |
2 |
<a href="#" class="menu-icon"> |
3 |
<i class="fa fa-bars"></i> |
4 |
</a>
|
5 |
<ul class="main-navigation" role="navigation"> |
6 |
<li><a href="#hero">Home</a></li> |
7 |
<li><a href="#introduction">Introduction</a></li> |
8 |
<li><a href="#creativity">Creativity</a></li> |
9 |
<li><a href="#work">Work</a></li> |
10 |
<li><a href="#help">Help</a></li> |
11 |
<li><a href="#clients">Clients</a></li> |
12 |
<li><a href="#about">About</a></li> |
13 |
<li><a href="#video">Video</a></li> |
14 |
<li><a href="#why-us">Why us?</a></li> |
15 |
<li><a href="#quote">Quote</a></li> |
16 |
<li><a href="#contact">Contact</a></li> |
17 |
</ul>
|
18 |
</nav>
|
Pahlawan
Bagian pahlawan, seperti yang terlihat dalam PSD, terdiri dari satu gambar yang membentang, judul dan subjudul. Untuk gambar latar belakang kami akan menambahkan sebuah wadah yang berbeda, untuk judul, kita akan menggunakan h1 dan subjudul h2. Di sini, Anda lihat, saya menggunakan u-lebar penuh, kelas kerangka utilitas baru.
1 |
<section id="hero" class="hero u-full-width"> |
2 |
<div class="hero-image"></div> |
3 |
<div class="container centered"> |
4 |
<div class="twelve columns"> |
5 |
<h1 class="separator">We’ve got talent</h1> |
6 |
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
7 |
Aenean commodo ligula eget dolor. Aenean massa.</h2>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Pengenalan
Pengenalan berisi dua elemen; judul dan subjudul. Kami menyiapkan html untuk mendukung perbatasan dengan judul, dengan menambahkan kelas pemisah, yang akan menambah perbatasan-bawah dan jarak beberapa.
1 |
<section id="introduction" class="introduction u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Introduction</h3> |
6 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Kreativitas
Kreativitas memiliki latar belakang lebar penuh dan tombol. Anda juga dapat melihat kelas yang berpusat di h4; kelas utilitas yang kita akan membuat dalam tutorial berikutnya untuk membantu kita unsur-unsur pusat pada sumbu vertikal dan horisontal.
1 |
<section id="creativity" class="creativity u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">Pure creativity</button> |
4 |
</h4>
|
5 |
</section>
|
Pekerjaan
Ini adalah bagian terbesar di situs web dan berisi dua baris tambahan; satu untuk kerja filter link dan satu untuk item pekerjaan.
1 |
<section id="work" class="work u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Some of our work</h3> |
6 |
</div>
|
7 |
</div>
|
8 |
<div class="row"> |
9 |
<!-- work filters -->
|
10 |
</div>
|
11 |
<div class="row"> |
12 |
<!-- work items -->
|
13 |
</div>
|
14 |
</div>
|
15 |
</section>
|
Filter bekerja berisi daftar unordered penuh dengan link yang akan menyaring item pekerjaan.
1 |
<ul class="work-filters u-full-width"> |
2 |
<li class="active"> |
3 |
<a href="#">All</a> |
4 |
</li>
|
5 |
<li>
|
6 |
<a href="#">Branding</a> |
7 |
</li>
|
8 |
<li>
|
9 |
<a href="#">Web design</a> |
10 |
</li>
|
11 |
<li>
|
12 |
<a href="#">Mobile</a> |
13 |
</li>
|
14 |
<li>
|
15 |
<a href="#">UI</a> |
16 |
</li>
|
17 |
<li>
|
18 |
<a href="#">Illustrations</a> |
19 |
</li>
|
20 |
</ul>
|
Item pekerjaan sendiri akan menjadi empat kolom lebar, yang berisi gambar kerja, bekerja judul dan deskripsi pekerjaan.
Anda juga dapat melihat bahwa saya menggunakan utilitas kelas lain, vertikal-berpusat, yang akan pusat item pada sumbu vertikal. Deskripsi untuk setiap item pekerjaan juga memiliki perbatasan di bagian bawah. Untuk mencapai hal ini, kita akan menggunakan kembali golongan pemisah yang terlihat sebelumnya, sambil menambahkan class tambahan untuk tambahan gaya, warna dan ukuran.
1 |
<ul class="work-items u-cf"> |
2 |
<li class="four columns"> |
3 |
<img src="http://placehold.it/400"> |
4 |
<div class="work-detail"> |
5 |
<div class="vertical-centered"> |
6 |
<h3>Branding</h3> |
7 |
<p class="separator orange">MTV AMA logo</p> |
8 |
</div>
|
9 |
</div>
|
10 |
</li>
|
11 |
<li class="four columns"> |
12 |
<img src="http://placehold.it/400"> |
13 |
<div class="work-detail"> |
14 |
<div class="vertical-centered"> |
15 |
<h3>Web Design</h3> |
16 |
<p class="separator orange">Dribbble redesign</p> |
17 |
</div>
|
18 |
</div>
|
19 |
</li>
|
20 |
<li class="four columns"> |
21 |
<img src="http://placehold.it/400"> |
22 |
<div class="work-detail"> |
23 |
<div class="vertical-centered"> |
24 |
<h3>Mobile UI</h3> |
25 |
<p class="separator orange">Google Mail</p> |
26 |
</div>
|
27 |
</div>
|
28 |
</li>
|
29 |
<li class="four columns"> |
30 |
<img src="http://placehold.it/400"> |
31 |
<div class="work-detail"> |
32 |
<div class="vertical-centered"> |
33 |
<h3>Illustrations</h3> |
34 |
<p class="separator orange">Flat icons</p> |
35 |
</div>
|
36 |
</div>
|
37 |
</li>
|
38 |
<li class="four columns"> |
39 |
<img src="http://placehold.it/400"> |
40 |
<div class="work-detail"> |
41 |
<div class="vertical-centered"> |
42 |
<h3>Web design</h3> |
43 |
<p class="separator orange">Inbox by google</p> |
44 |
</div>
|
45 |
</div>
|
46 |
</li>
|
47 |
<li class="four columns"> |
48 |
<img src="http://placehold.it/400"> |
49 |
<div class="work-detail"> |
50 |
<div class="vertical-centered"> |
51 |
<h3>UI</h3> |
52 |
<p class="separator orange">Skeleton skin got a new UI</p> |
53 |
</div>
|
54 |
</div>
|
55 |
</li>
|
56 |
</ul>
|
Tolong
Bagian Bantuan memiliki struktur html yang sama sebagai bagian kreativitas, tetapi kami sedang membedakan mereka dengan menambahkan nama kelas yang berbeda.
1 |
<section id="help" class="help u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">We’re here to help!</button> |
4 |
</h4>
|
5 |
</section>
|
Klien
Bagian ini berisi daftar unordered dengan gambar klien. Saya menggunakan placehold.it untuk menghasilkan gambar pengganti.
1 |
<section id="clients" class="clients u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<h3 class="separator">Our clients</h3> |
5 |
</div>
|
6 |
<ul class="clients u-full-width u-cf"> |
7 |
<li>
|
8 |
<img src="http://placehold.it/200x50" alt="Google Client"> |
9 |
</li>
|
10 |
<li>
|
11 |
<img src="http://placehold.it/200x50" alt="Samsung Client"> |
12 |
</li>
|
13 |
<li>
|
14 |
<img src="http://placehold.it/200x50" alt="Flickr Client"> |
15 |
</li>
|
16 |
<li>
|
17 |
<img src="http://placehold.it/200x50" alt="Foursquare Client"> |
18 |
</li>
|
19 |
<li>
|
20 |
<img src="http://placehold.it/200x50" alt="Pinterest Client"> |
21 |
</li>
|
22 |
</ul>
|
23 |
</div>
|
24 |
</div>
|
25 |
</section>
|
Tentang
Disini kita memiliki dua baris yang berbeda, satu untuk teks pengantar dan satu untuk orang-orang.
1 |
<section id="about" class="about u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<!-- introduction -->
|
5 |
</div>
|
6 |
<div class="row"> |
7 |
<!-- people list -->
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Pengenalan baris berisi judul dan subjudul, seperti yang kita lihat sebelumnya dalam bagian pendahuluan.
1 |
<div class="twelve columns"> |
2 |
<h3 class="separator">About us</h3> |
3 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
4 |
</div>
|
Daftar orang yang daftar unordered yang mengandung empat item, orang terakhir untuk mempekerjakan tujuan. Setiap item daftar tiga kolom lebar dan berisi gambar, link, nama dan posisi individu.
1 |
<ul class="people-list"> |
2 |
<li class="three columns people-list-item"> |
3 |
<img src="http://placehold.it/300"> |
4 |
<div class="people-hover"> |
5 |
<a href="#"><i class="fa fa-external-link"></i></a> |
6 |
<div class="people-detail"> |
7 |
<h3>JOHN</h3> |
8 |
<p>CEO/Founder</p> |
9 |
</div>
|
10 |
</div>
|
11 |
</li>
|
12 |
<li class="three columns people-list-item"> |
13 |
<img src="http://placehold.it/300"> |
14 |
<div class="people-hover"> |
15 |
<a href="#"><i class="fa fa-external-link"></i></a> |
16 |
<div class="people-detail"> |
17 |
<h3>Wiliam</h3> |
18 |
<p>CTO/Founder</p> |
19 |
</div>
|
20 |
</div>
|
21 |
</li>
|
22 |
<li class="three columns people-list-item"> |
23 |
<img src="http://placehold.it/300"> |
24 |
<div class="people-hover"> |
25 |
<a href="#"><i class="fa fa-external-link"></i></a> |
26 |
<div class="people-detail"> |
27 |
<h3>Clare</h3> |
28 |
<p>Designer</p> |
29 |
</div>
|
30 |
</div>
|
31 |
</li>
|
32 |
<li class="three columns people-list-item blank-feature"> |
33 |
<div class="vertical-centered"> |
34 |
<h3 class="separator">WE ARE HIRING</h3> |
35 |
<button class="button">Apply</button> |
36 |
</div>
|
37 |
</li>
|
38 |
</ul>
|
Video
Bagian video berisi hanya satu tombol dan gambar latar belakang yang membentang. Dalam tutorial mendatang, kami akan membuat jendela modal menunjuk ke sebuah video Youtube.
1 |
<section id="video" class="video u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<a href="http://www.youtube.com/embed/EVpyXNiHVbE?autoplay=1" class="button inverted circle"> |
4 |
<i class="fa fa-play"></i> |
5 |
</a>
|
6 |
</h4>
|
7 |
</section>
|
Mengapa kami
Bergerak di, "Mengapa kita" bagian terbuat dari dua bagian individu; satu untuk pengenalan singkat dan yang lain untuk saat ini layanan.
1 |
<section id="why-us" class="why u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<!-- introduction section -->
|
5 |
</div>
|
6 |
<div class="row"> |
7 |
<!-- services section -->
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Bagian pengantar adalah dua belas kolom lebar dan berisi judul terbungkus<h3>dan teks untuk deskripsi singkat terbungkus<h4>.</h4></h3> Seperti yang Anda lihat di bawah, judul juga memiliki pemisah kelas untuk menciptakan efek perbatasan yang disebutkan sebelumnya.
1 |
<div class="twelve columns"> |
2 |
<h3 class="separator">Why choose us</h3> |
3 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
4 |
</div>
|
Dalam bagian layanan, setiap item daftar berisi gambar dan keterangan.
1 |
<ul class="services"> |
2 |
<li class="four columns"> |
3 |
<div class="service-image"> |
4 |
<img src="http://placehold.it/300x150"> |
5 |
</div>
|
6 |
<h5>App Design</h5> |
7 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
8 |
ilabore et dolore.</p>
|
9 |
</li>
|
10 |
<li class="four columns"> |
11 |
<div class="service-image"> |
12 |
<img src="http://placehold.it/300x150"> |
13 |
</div>
|
14 |
<h5>Responsive Layout</h5> |
15 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
16 |
ilabore et dolore.</p>
|
17 |
</li>
|
18 |
<li class="four columns"> |
19 |
<div class="service-image"> |
20 |
<img src="http://placehold.it/300x150"> |
21 |
</div>
|
22 |
<h5>Pixel Perfect design</h5> |
23 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
24 |
ilabore et dolore.</p>
|
25 |
</li>
|
26 |
</ul>
|
Kutipan
Bagian ini mewarisi struktur html yang sama sebagai bagian kreativitas, tetapi dengan teks yang berbeda untuk tombol terpusat.
1 |
<section id="quote" class="quote featured-bg-image u-full-width"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">Get a quote now.</button> |
4 |
</h4>
|
5 |
</section>
|
Menghubungi
Hanya beberapa lebih untuk pergi! Bagian ini menawarkan sebuah alur cerita singkat untuk formulir. Hal ini dibangun dengan struktur html yang akan mungkin terlihat cukup akrab dengan sekarang, dengan judul dan deskripsi memiliki pemisah antara mereka.
1 |
<section id="contact" class="contact u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Get in touch</h3> |
6 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt illum sed veritatis at, ipsam quo vitae minima. Animi unde doloremque iste, incidunt nihil, est vero aliquam, nemo id ab totam.</h4> |
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Kontak
Formulir kontak bagian terdiri dari dua kolom, satu untuk lokasi meta dan link profil sosial dan satu yang mengandung bentuk yang membantu pengguna untuk menghubungi perusahaan.
Sekali lagi saya menggunakan markup untuk mendukung Font mengagumkan, yang kita akan mengintegrasikan dalam tutorial berikutnya.
Kolom pertama adalah empat kolom lebar dan yang kedua adalah delapan kolom lebar. Di sini Anda dapat benar-benar melihat kekuatan kerangka kerja kerangka, karena kami menggunakan kolom dan baris bersarang. Bentuknya memiliki ukuran berbeda di dalamnya; dua input pertama adalah enam kolom lebar di dalam pembungkus yang delapan kolom lebar.
1 |
<section class="container contact-us u-full-width u-max-full-width"> |
2 |
<div class="row"> |
3 |
<div class="four columns contact-us-details"> |
4 |
<h3>Our Location</h3> |
5 |
<h5>
|
6 |
174 Mimosa ST. NW <br /> |
7 |
Casablanca, MA 20370 <br /> |
8 |
(212) 123 456 7 <br /> |
9 |
Samir Timezguida</h5>
|
10 |
<ul class="social-links"> |
11 |
<li>
|
12 |
<a href="http://twitter.com/wdtuts" target="_blank"> |
13 |
<i class="fa fa-twitter"></i> |
14 |
</a>
|
15 |
</li>
|
16 |
<li>
|
17 |
<a href="https://www.facebook.com/webdesigntutsplus" target="_blank"> |
18 |
<i class="fa fa-facebook"></i> |
19 |
</a>
|
20 |
</li>
|
21 |
<li>
|
22 |
<a href="https://plus.google.com/117485987435498566293" target="_blank"> |
23 |
<i class="fa fa-google-plus"></i> |
24 |
</a>
|
25 |
</li>
|
26 |
</ul>
|
27 |
</div>
|
28 |
<div class="eight columns contact-us-form"> |
29 |
<form>
|
30 |
<div class="row"> |
31 |
<div class="six columns"> |
32 |
<input class="u-full-width" type="text" placeholder="Name" id="nameInput"> |
33 |
</div>
|
34 |
<div class="six columns"> |
35 |
<input class="u-full-width" type="email" placeholder="Email" id="emailInput"> |
36 |
</div>
|
37 |
</div>
|
38 |
<textarea class="u-full-width" placeholder="Message" id="messageInput"></textarea> |
39 |
<input class="button u-pull-right" type="submit" value="Send"> |
40 |
</form>
|
41 |
</div>
|
42 |
</div>
|
43 |
</section>
|
Footer
Footer kami berisi beberapa teks yang dibungkus dalam dua belas kolom kontainer.
1 |
<section class="footer u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h5>© 2015 WebDesign Tuts+.</h5> |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</section>
|
Itu saja untuk saat ini!
Tutorial ini telah menunjukkan dengan tepat apa itu Skeleton: kami menggunakan markupnya untuk menyempurnakan struktur halaman web. Dalam tutorial mendatang, kami akan mengambil struktur itu dan menambahkan beberapa gaya untuk memberikan tampilan yang benar-benar unik. Sampai jumpa!
