() translation by (you can also view the original English article)
Di bagian pembuka sesi ini tentang Pondasi Framework, kita melihat bagaimana Anda bisa memanfaatkan kerangka kerja ini, apa yang bisa dilakukan dan bagaimana Anda bisa membuat pakaian yang dibuat khusus. Pada bagian ini kita akan melihat secara rinci pada sistem grid, menunjukkan beberapa contoh saat ini. Kita juga akan sedikit mengocok dan melihat plugin Orbit JavaScript Slider; slider yang bagus untuk menampilkan semua jenis konten.
Sistem Grid
Kita hanya menggunakan satu breakpoint utama untuk grid di Foundation untuk menggeser tata letak untuk layar di atas lebar 768px.
Pondasi adalah framework modern yang mengutamakan pendekatan mobile. Ini berarti bahwa kode minimum minimum dan aset dimuat terlebih dahulu untuk membantu kecepatan render halaman. Seperti kebanyakan framework modern, Pondasi sepenuhnya responsif. Tidak seperti kebanyakan, itu hanya menggunakan satu break point untuk perubahan struktural. Break point mendefinisikan lebar viewport di mana kisi-kisi besar digerakkan, ini terjadi pada 768px.
Sistem grid itu sendiri sebenarnya memiliki tiga bagian; grid desktop, grid seluler, dan grid blok. Karena pondasi adalah seluler, mari kita mulai dengan grid seluler.
Grid Kecil
1 |
<div class="row"> |
2 |
<div class="small-12 columns"> |
3 |
<h2>This is Foundation</h2> |
4 |
</div>
|
5 |
</div>
|
Kode di atas dibangun dari tiga kelas penting; yang pertama adalah kelas "baris" yang menampung kolom kita, banyak dengan cara yang sama seperti baris dalam spreadsheet menampung kolom sel. Dalam demo ini kami menggunakan grid dua belas kolom, jadi twelve adalah jumlah maksimum kolom yang bisa kita miliki dalam satu baris. Mengatakan bahwa, jika Anda membutuhkan lebih banyak, Pondasi mendukung hingga enam belas kolom yang dapat Anda pilih dalam formulir pembuatan kustom.
Kelas yang mendefinisikan kolom di sini adalah small-12, mengubah angka di kelas ini mendefinisikan lebar kolom tersebut. Menggunakan "small-12" sendiri tetapi hanya menentukan lebar. Untuk benar-benar membuat kolom, kita harus memasangkannya dengan kelas "kolom". Tiga kelas ini adalah dasar untuk sistem grid.
Sederhananya, markup di atas menentukan bahwa ada satu baris, dengan sebuah div yang akan memakan ruang dua belas kolom (100% dari lebar). Di dalam dua belas kolom adalah konten. Mari kita lihat versi yang sedikit lebih rumit.
1 |
<div class="row"> |
2 |
<div class="small-4 columns"> |
3 |
<h2>This is a sidebar</h2> |
4 |
</div>
|
5 |
<div class="small-8 columns"> |
6 |
<h2>This is the content area</h2> |
7 |
</div>
|
8 |
</div>
|
Dalam kode ini kita dapat melihat bahwa ada dua div dengan kelas "kolom". Masing-masing digabungkan dengan kelas (seperti "kecil-4") untuk menentukan ukuran tertentu. Pondasi kemudian melapisi kolom-kolom ini di samping satu sama lain sebagai lawan di atas satu sama lain, seperti yang mereka lakukan dalam aliran dokumen HTML normal. Dua kolom kita masing-masing memiliki lebar empat kolom dan delapan kolom. Dua total lebar dua belas kolom; "Small-4" sekitar 33.3% dan "small-8" sekitar 66.6% dari lebar tubuh.
Yang penting untuk disadari di sini adalah bahwa div ini hampir tidak dapat disatukan. Ini menawarkan fleksibilitas luar biasa, misalnya:
1 |
<div class="row"> |
2 |
<div class="small-4 columns"> |
3 |
<h2>This is a sidebar</h2> |
4 |
<div class="row"> |
5 |
<div class="small-1 columns"> |
6 |
<h6>#1</h6> |
7 |
</div>
|
8 |
<div class="small-9 columns"> |
9 |
<p>A post title</p> |
10 |
</div>
|
11 |
<div class="small-2 columns"> |
12 |
<button>Go</button> |
13 |
</div>
|
14 |
</div>
|
15 |
</div>
|
16 |
<div class="small-8 columns"> |
17 |
<h2>This is the content area</h2> |
18 |
</div>
|
19 |
</div>
|
Anda dapat melihat bahwa kami telah menambahkan beberapa konten ke bilah sisi menggunakan satu baris, satu kolom, satu baris, kali ini menggunakan tiga kolom dengan ukuran yang berbeda-beda. Hal-hal hebat eh? Mungkin ini saatnya untuk memasukkan beberapa kode layar besar untuk mengambil keuntungan penuh dari sistem grid.
Grid besar
1 |
<div class="row"> |
2 |
<div class="small-4 large-3 columns"> |
3 |
<h2>This is a sidebar</h2> |
4 |
</div>
|
5 |
<div class="small-8 large-9 columns"> |
6 |
<h2>This is the content area</h2> |
7 |
</div>
|
8 |
</div>
|
Di sini kita telah menambahkan satu kelas tambahan untuk masing-masing kolom kita large-3 dan large-9. Ini memberi tahu Pondasi bahwa ketika situs dilihat pada layar yang lebih besar harus mengubah lebar sidebar dari small-4 dengan 33.3% menjadi large-3 yang setara dengan sekitar 25% dari lebar tubuh. Dengan demikian, area utama kita dapat tumbuh, memberikan lebih banyak ruang untuk konten. Ini adalah contoh sederhana tetapi menjadi sangat berguna ketika mengatur ulang tata letak Anda untuk ukuran layar yang berbeda.
Sementara melihat sistem grid, ada baiknya menyebutkan bahwa dengan menggunakan large-centered dan small-centered Anda dapat memusatkan kolom dengan cepat dan mudah, meskipun Anda hanya dapat melakukan ini jika ada satu kolom di baris. Anda juga dapat memanipulasi urutan elemen menggunakan kelas push dan pull.
1 |
<div class="row"> |
2 |
<div class="small-3 push-9 columns">3</div> |
3 |
<div class="small-9 pull-3 columns">9, last</div> |
4 |
</div>
|
Ini mengambil div kedua, yang biasanya akan ditampilkan setelah yang pertama, dan menariknya ke depan sambil mendorong yang pertama muncul setelah itu. Karena itu Anda dapat memiliki daftar di sebelah kiri dan konten di sebelah kanan pada layar besar, tetapi dorong di bawah ini pada layar kecil.
Grid Blok
Setelah membahas seluk beluk sistem grid, kita dapat melihat grid blok yang digunakan untuk menjaga elemen daftar tetap berjarak, tidak peduli berapa ukuran layarnya. Ini ideal untuk konten yang diblokir (seperti yang dihasilkan oleh aplikasi) karena tidak memerlukan baris atau bahkan kolom untuk ditampilkan dengan benar. Jika layout Anda ditujukan untuk desktop dan seluler yang sama maka Anda hanya perlu menggunakan kelas small-block-grid-#.
Ini juga kasus untuk grid yang sebelumnya kita bicarakan. Alih-alih menggunakan small-12 dan large-12 Anda hanya perlu small-12. Mudah.
1 |
<ul class="small-block-grid-2 large-block-grid-4"> |
2 |
<li><img src="../img/photo1.png"></li> |
3 |
<li><img src="../img/photo2.png"></li> |
4 |
<li><img src="../img/photo3.png"></li> |
5 |
<li><img src="../img/photo4.png"></li> |
6 |
</ul>
|
Itu menyimpulkan sistem grid yang ditawarkan Pondasi dalam bentuk dasar mereka. Ingat, grid kecil akan berubah menjadi grid besar setelah lebar layar menyentuh titik istirahat utama. Gunakan kotak kecil untuk menargetkan perangkat yang lebih kecil dan besar untuk apa yang biasanya desktop dan layar yang lebih besar.
Orbit Plugin
Kita akan sedikit mengguncang segalanya sekarang, dengan memperkenalkan salah satu dari banyak plugin yang berguna dari Pondasi; Orbit.
Plugin praktis ini dapat digunakan sebagai slider, memungkinkan Anda untuk meluncur dalam gambar, video, atau konten HTML biasa. Dengan markup sederhana, mudah untuk digenggam dan merupakan penghibur mata nyata ketika digunakan dengan benar.
1 |
<ul data-orbit> |
2 |
<li>
|
3 |
<img src="../img/demos/demo1.jpg" /> |
4 |
<div class="orbit-caption">...</div> |
5 |
</li>
|
6 |
<li>
|
7 |
<img src="../img/demos/demo2.jpg" /> |
8 |
<div class="orbit-caption">...</div> |
9 |
</li>
|
10 |
<li>
|
11 |
<img src="../img/demos/demo3.jpg" /> |
12 |
<div class="orbit-caption">...</div> |
13 |
</li>
|
14 |
</ul>
|
Orbit menggunakan struktur daftar; setiap item daftar ditampilkan sebagai slide. Di sini, bersama dengan tag gambar biasa, item daftar kita berisi div dengan kelas orbit-caption yang memungkinkan kita untuk menempatkan teks pada setiap gambar. Orbit mengambil kode ini dan menambahkan beberapa markup lagi agar semuanya berfungsi. Ini juga mencakup banyak opsi untuk menampilkan pagination, kontrol, dan bahkan timer.
Lihatlah beberapa contoh parameter yang dapat Anda ubah di Orbit:
1 |
timer_speed: 10000, |
2 |
animation_speed: 500, |
3 |
bullets: true, |
4 |
stack_on_small: true |
Ini termasuk kecepatan, pagination peluru dan opsi untuk menumpuk di layar kecil. Penting untuk dicatat bahwa ini diteruskan pada inisialisasi, jadi Anda perlu mengambil $(document).foundation();, ditemukan di bagian bawah indeks.html termasuk dalam unduhan:
1 |
<script> |
2 |
$(document).foundation(); |
3 |
</script> |
lalu berikan opsi orbit.
1 |
<script> |
2 |
$(document).foundation('orbit', {
|
3 |
timer_speed: 10000, |
4 |
animation_speed: 500, |
5 |
bullets: true, |
6 |
stack_on_small: true |
7 |
}); |
8 |
</script> |
Serta opsi yang ditampilkan di sini Anda dapat menambahkan kelas ke semua elemen yang dihasilkan oleh plugin. Opsi tambahan ini (dan lebih banyak lagi) dapat ditemukan di dokumen Foundation.
Catatan: Unduhan Yayasan Anda akan mencakup semua bit dan potongan JavaScript yang Anda pilih, dikompilasi menjadi satu file yang diperkecil. Ini direferensikan di bagian bawah index.html, tetapi Anda juga dapat memilih untuk membatalkan komentar setiap file JavaScript jika Anda menginginkan:
1 |
<script src="js/foundation.min.js"></script> |
2 |
<!--
|
3 |
|
4 |
<script src="js/foundation/foundation.js"></script>
|
5 |
|
6 |
<script src="js/foundation/foundation.dropdown.js"></script>
|
7 |
|
8 |
<script src="js/foundation/foundation.placeholder.js"></script>
|
9 |
|
10 |
<script src="js/foundation/foundation.forms.js"></script>
|
11 |
|
12 |
<script src="js/foundation/foundation.orbit.js"></script>
|
13 |
|
14 |
-->
|
Tool Berguna
Ingin bermain-main dengan Foundation sekarang tanpa mengunduhnya? Atau mungkin Anda ingin lingkungan yang bersih untuk menguji ide-ide baru? Kemudian lihat jsfiddle berguna ini. Ia menggunakan fondasi terbaru dari Yayasan dan mencakup semua komponen.
Selanjutnya
Di bagian panduan Pondsi ini kita membahas sistem grid dan berbicara singkat tentang plugin Orbit. Dalam angsuran berikutnya kita akan melihat navigasi dan plugin bagian, bersama dengan tool lain yang bermanfaat..
