Tata letak berbasis kisi CSS memungkinkan Anda membagi ruang layar menjadi kolom dan baris menggunakan ukuran yang telah dihitung sebelumnya. Anda dapat sepenuhnya menyesuaikan tata letak ini dengan menyusun item pada garis kisi—garis yang memisahkan kolom dan baris—dan pada sel—area persegi panjang yang merupakan perpotongan baris dan kolom.

Tata letak grid memainkan peran yang sangat penting, ini memungkinkan Anda membuat desain proporsional yang dapat dengan mudah disesuaikan dengan resolusi yang berbeda. Di antara manfaat lainnya, Anda mendapatkan kemampuan untuk mengatur posisi elemen terlepas dari urutan tampilan konten. Sebagai contoh, Anda dapat mengambil daftar item (yang biasanya ditampilkan sebagai satu kolom vertikal) dan menampilkannya dalam orientasi kisi baris-kolom.

Anda dapat menemukan contoh praktis penggunaan tata letak CSS berbasis grid di lokasi berikut:

Jenis tata letak ini biasanya disebut “flexbox” (“tata letak karet”). Metode tata letak ini digunakan untuk membuat struktur halaman sederhana dan kompleks yang beradaptasi dengan layar berbeda. Keuntungan tata letak ini adalah posisi relatif konten tetap sama meskipun ukuran layar berubah. Dengan menggunakan struktur ini dan mendistribusikan ruang kosong secara merata, Anda dapat memastikan bahwa objek selalu berada di tengah halaman atau wadah lainnya.

Tata letak yang lancar berguna bila digunakan dengan kontrol ViewBox. Kedua komponen ini digabungkan untuk membuat Aplikasi Tata Letak Tetap di Blend atau Visual Studio. Aplikasi tata letak tetap memungkinkan pembuatan area pandang tetap untuk konten, yang berarti dimensinya tidak akan berubah - berbeda dengan aplikasi yang menggunakan tata letak berbasis kisi. Tata letak ini dapat berguna bagi Anda saat membuat game JavaScript yang memerlukan lapangan bermain dengan lebar dan tinggi tertentu, berapa pun ukuran layarnya.

Anda dapat menemukan contoh praktis penggunaan tata letak CSS yang lancar di alamat berikut:

Cakupan CSS memungkinkan Anda mengambil urutan konten HTML—teks, gambar—dan mendistribusikannya ke beberapa wadah kosong yang ditentukan dalam templat HTML standar. Templat HTML disusun menggunakan wadah kosong yang berukuran dan diposisikan untuk memberikan posisi tertentu pada konten masa depan dan membatasinya dalam batas wadah.

Area CSS tidak sepenting bentuk tata letak lainnya. Namun, mereka didukung dan memungkinkan Anda membuat struktur konten yang kompleks, seperti di majalah. Mereka memungkinkan Anda mendistribusikan aliran konten secara berurutan (teks, gambar, klip video) secara acak. Skema tata letak ini dapat berguna pada tablet, yang tata letaknya berubah bergantung pada orientasi layar, atau, misalnya, saat menampilkan aplikasi yang disematkan di Windows 8.

Anda dapat menemukan contoh praktis penggunaan area CSS di lokasi berikut:

Aplikasi WinRT mendukung dua format grafik asli secara default: Canvas (kanvas) dan SVG (Scalable Vector Graphics). Karena ini adalah format bawaan, kita dapat membuat grafik menggunakan kode - alih-alih menggunakan pendekatan tradisional yang menggunakan file grafik .png atau .jpg yang sudah jadi. Canvas dan SVG memiliki kekuatan dan kelemahan, namun secara umum, Anda mungkin melihatnya sebagai elemen UI - seperti tombol kontrol pemain; merupakan ilustrasi yang dapat dianimasikan dan digunakan untuk tujuan visualisasi data - dalam bentuk grafik dan bagan.

Kanvas adalah kontrol yang menyediakan permukaan gambar pada halaman. Di dalam permukaan ini Anda dapat membuat bentuk menggunakan warna, gradien, dan pengisian pola. Anda dapat memanipulasi piksel pada layar secara interaktif, mengeluarkan teks, dan mengekspor konten yang dihasilkan sebagai file gambar statis seperti .png. Anda juga bisa menambahkan animasi JavaScript atau CSS untuk membuat objek yang Anda buat bergerak, menghilang, berubah ukuran, dan lain sebagainya. Meskipun tagnya< canvas >ditambahkan ke dokumen HTML, itu hanyalah permukaan untuk menggambar. Segala sesuatu yang berhubungan dengannya dibuat menggunakan JavaScript. Selain itu, setelah dikeluarkan, konten kanvas adalah gambar piksel, sedangkan SVG adalah grafik vektor.

SVG menggunakan model objek elemen, atribut dan gaya, dalam pengertian ini lebih mirip dengan sintaks HTML. Ketika sebuah elemen muncul dalam HTML, ia berperilaku seolah-olah itu adalah bagian dari HTML.

Meskipun kedua format tersebut didukung, elemen SVG digunakan dalam aplikasi WinRT untuk menampilkan gambar secara langsung. Program pengeditan gambar seperti Adobe Illustrator memungkinkan Anda mengekspor gambar vektor ke format .svg. Ilustrasi dan ikon dapat dibuat dan digunakan dengan sangat mudah di dalam aplikasi. Karena gambar vektor tidak bergantung pada resolusi, Anda dapat menggunakan elemen ini dalam desain Anda dan ukurannya akan diubah tanpa kehilangan kualitas, bahkan pada layar yang lebih besar. Selain itu, filter SVG didukung, yang memungkinkan Anda menerapkan efek dasar seperti blur atau sepia toning.

Kontrol kanvas dapat digunakan dalam aplikasi WinRT untuk aplikasi yang berfokus pada pengambilan data dari input pengguna sentuh dan merendernya, seperti aplikasi menggambar. Kontrol kanvas sering digunakan saat membuat game atau dalam situasi di mana data dihasilkan secara real-time, seperti memvisualisasikan data menggunakan bagan dan grafik.

Dalam modul ini, Anda mempelajari bagaimana prinsip dasar HTML5 dan CSS3 digunakan dalam aplikasi dan bereksperimen dengan contoh praktis penerapannya. Anda belajar tentang model tata letak, kueri media, animasi. Secara khusus, Anda mempelajari cara membuat tata letak menggunakan area, kisi, cara membuat tata letak “fluid”, tata letak multi-kolom, dan cara menggunakan kueri media. Anda telah mempelajari tentang transformasi 2D dan 3D, transisi, animasi, gradien, bayangan, sudut membulat, gambar SVG sebaris, dan menggunakan kontrol kanvas.

Bayangkan ada tamu yang mendatangi Anda, dan barang-barang berserakan di sekitar apartemen Anda. Menurut Anda bagaimana cara cepat “merapikan” jika Anda tidak punya waktu untuk membersihkan? Jawabannya sederhana: Anda perlu menyusun barang-barang dalam tumpukan kecil. Hal ini akan langsung menimbulkan rasa keteraturan, apartemen akan terlihat rapi.

Grid modular, yang merupakan sekumpulan panduan, bekerja dengan cara yang sama. Panduan (biasanya vertikal dan horizontal) membentuk semacam bingkai. Katakanlah ini:

Ya, tidak ada aturan, tapi ada akal sehat. Dengan kata lain, pertama-tama Anda perlu memikirkan untuk apa grid itu, dan baru kemudian membangunnya. Misalnya, bingkai yang digambar di atas dapat berfungsi sebagai lapangan yang bagus untuk bermain tic-tac-toe;)

Ngomong-ngomong, hasil dari penggunaan grid bisa berupa... grid itu sendiri. Contohnya adalah lukisan Piet Mondrian, yang membangun komposisi berdasarkan kisi-kisi spasial yang dibangun secara bebas yang memenuhi kanvas.

Contoh mencolok dari opsi perantara, ketika grid merupakan bagian dari desain dan memecahkan masalah tertentu, adalah antarmuka sistem operasi seluler Windows Phone.

Jadi, apa yang bisa dan harus Anda andalkan saat membuat grid modular?

Cukup sering dalam artikel tentang jaringan modular Anda dapat menemukan kalimat seperti ini:

Jangan memasukkan desain ke dalam grid, melainkan buatlah grid yang sesuai dengan desain.

Pada pandangan pertama, semuanya tampak benar: grid, pertama-tama, adalah alat kerja yang tidak masuk akal tanpa instruksi penggunaan yang menjelaskan susunan elemen utama (teks, gambar, dll.).

Namun, seperti yang diperlihatkan oleh praktik, kedua opsi tersebut mungkin dan terjadi:

• Desainnya pas dengan grid;
• Grid dibuat sesuai desain.

Mari kita pertimbangkan masing-masing secara terpisah.

Contoh satu: Anda perlu membuat desain website untuk jurnal ilmiah. Pada saat yang sama, klien ingin majalah tersebut menjadi "wajah" situs dan meminta untuk menempatkannya di halaman utama. Sampulnya tidak terlihat bagus, secara halus:

Kami tidak akan membahas nilai seni dari sampul ini. Mari kita lebih fokus pada eksekusi - ini jelas timpang:

• Ada perasaan bahwa elemen-elemen tersebut telah “dibuat sketsa” pada bidang halaman dengan tergesa-gesa, posisinya tidak dapat dibenarkan dengan cara apapun;
• Dimensi dalam tata letak tidak dapat dibandingkan dan tidak proporsional; tidak jelas apa yang menentukan ukuran ini atau itu;
• Tidak ada aksen, margin sempit, objek saling bertentangan, mata memandang ke sampul;
• Pekerjaan buta huruf dengan teks, baik dalam hal font (penulis menghitung setidaknya 5) dan dalam hal tipografi (ada “lubang” di antara item individual dalam daftar artikel utama);
• Warna "kotor".

Tentu saja, betapapun bagusnya desain situs web yang kita hasilkan, sampul seperti itu akan sia-sia. Hal ini perlu diingat dan jaringan listrik akan membantu kita dalam hal ini. Mari kita ambil tinggi garis merah anggur (7 mm) sebagai dasar dan menggambar kotak dengan langkah vertikal dan horizontal yang serupa. Ngomong-ngomong, pita atas dan bawah secara ajaib “jatuh” ke dalamnya.

Grid tersebut dengan jelas menunjukkan sifat situasi yang menyedihkan: objek-objek tidak sejajar satu sama lain, memiliki ukuran yang tidak dapat dipahami, secara umum, “ada yang di hutan, ada yang untuk kayu bakar.”

Untuk memulihkan ketertiban, mari kita sesuaikan desain ke dalam grid, cukup pertimbangkan satu nuansa kecil. Elemen individual (nama majalah, logo APEL, nomor) berukuran besar sehingga membuat sampul terlihat berat. Mari kita kurangi jarak kisi sebesar 1 mm, ini pada akhirnya akan memberi kita desain yang ringan dan persepsi yang mulus:

Tutupi dengan atau tanpa kisi-kisi

• Elemen-elemennya disusun dalam kisi-kisi dan proporsional satu sama lain, margin lebar yang bagus telah muncul;
• Fokus utamanya adalah pada judul majalah;
• Font dan tipografi telah diperbaiki, yang bersama dengan gridnya memberi kita solusi lengkap.

Hasilnya, kami mendapatkan gambar luar biasa ini untuk halaman utama situs:

Mari kita lanjutkan. Pada salah satu artikel sebelumnya, penulis telah membahas secara detail tahapan pembuatan website kartu nama. Bacalah jika Anda belum melakukannya, dan perhatikan bagaimana desain dibuat: objek pada halaman ditempatkan secara berurutan - dari umum ke spesifik, dari elemen utama hingga elemen sekunder.

Dengan pendekatan ini, ketika tata letak ditentukan oleh tugas, elemen-elemen biasanya ditempatkan pada halaman “dengan mata”; mereka, meskipun tidak banyak, “menari” relatif satu sama lain. Sekali lagi, tidak jelas apa yang harus difokuskan ketika memilih ukuran gambar, blok teks, dll. Dalam situasi seperti ini, memasukkan desain ke dalam grid akan kembali membantu kita.

Segala sesuatu yang ada di sekitar kita memiliki proporsinya masing-masing. Bahkan sebagai seorang anak, kartun “38 Parrots” mengajarkan kita bahwa segala sesuatu dapat dibagi menjadi beberapa bagian yang sama (panjang ular boa terdiri dari 38 burung beo). Kita juga tahu bahwa tinggi badan seseorang sama dengan tujuh kepala, satu sentimeter terdiri dari sepuluh milimeter, satu meter terdiri dari seratus sentimeter, dan seterusnya. Jadi, burung beo kartun, kepala manusia, milimeter dan sentimeter adalah modul.

Dari semua ini kita dapat memahami bahwa modul adalah unit konvensional, sebuah langkah dalam ritme grid. Dan grid itu sendiri adalah sistem proporsi.

Bagaimana jaringan modular ini akan membantu kita? Pertama, akan mempercepat pekerjaan, karena kita tidak perlu menghabiskan banyak waktu untuk menata semua elemen secara harmonis. Kedua, dengan bantuan grid kita akan dapat memahami titik mana yang perlu kita gunakan dan berapa ukuran setiap blok yang seharusnya. Secara umum, grid modular adalah kerangka kerja yang sangat memudahkan pembangunan sebuah situs web.

Mari kita lihat apa itu jerat.

1. Tipe paling sederhana adalah grid blok. Artinya, dia membuat tanda kasar, membagi area menjadi blok-blok.

3. Grid modular tidak hanya memiliki pembagian vertikal, tetapi juga pembagian horizontal. Jadi, yang diperoleh pada perpotongan garis adalah modul.

4. Ada juga kisi hierarki, blok-blok yang ditempatkan secara intuitif dan tidak mengikuti pola apa pun.

Jadi, bagaimana cara membuat grid modular.

1. Pertama, kita perlu memahami fungsi apa yang harus dilakukan situs kita, kita mengidentifikasi struktur dan komposisi halamannya. Kemudian kami menentukan halaman mana yang paling penting, dan pekerjaan akan dimulai dari halaman tersebut. Bagi mereka, kami akan membuat daftar fungsi dan mengurutkannya berdasarkan prioritas.

Kita harus mendeskripsikan setiap blok fungsionalitas dan memerincinya hingga detail terkecil. Hasilnya harus berupa daftar yang berisi blok-blok dan elemen-elemennya berdasarkan level. Jadi, sekarang kita sudah punya teka-teki yang dituangkan ke dalam kotak, dan yang harus kita lakukan hanyalah menyusunnya menjadi sebuah gambaran utuh.

3. Kita mulai membuat grid dengan menentukan dimensi area kerja. Selanjutnya kita perlu membuat font grid. Untuk melakukan ini, pilih tinggi garis, yang harus sama untuk keseluruhan tata letak. Pada elemen yang memiliki ukuran font berbeda dengan ukuran font teks utama, spasi baris harus kelipatan tinggi baris kita.

Dengan demikian, kita mendapatkan dasar jaringan masa depan kita. Keseluruhan teks akan bertumpu pada landasan ini.

4. Sekarang kita perlu memutuskan seberapa lebar modul kita nantinya. Di sini kita bisa memulai dari lebar elemen permanen apa pun. Jika Anda mempunyai tugas untuk menempatkan beberapa elemen identik di seluruh lebar halaman, maka semuanya menjadi lebih mudah, karena Anda sudah mengetahui dimensinya.

Untuk kenyamanan, kita perlu menentukan berapa jarak antar modul. Itu harus sama dengan setidaknya satu tinggi garis dari paragraf sebelumnya.

Ada satu peringatan - Anda harus memilih ukuran modul yang tepat, karena jika terlalu besar, fleksibilitas mesh akan hilang, dan jika kecil, mesh akan hilang begitu saja.

5. Pembagian horizontal cukup mudah dilakukan. Tingginya harus kelipatan dari tinggi garis kita. Dan berapa banyak garis yang Anda masukkan ke dalam satu bagian tergantung pada sketsa Anda.

Pada pelajaran kali ini kita akan mempersiapkan layout situs menggunakan layout PSD, hanya menggunakan Grid System dari framework Bootstrap 4. Dengan mempelajari metode tata letak ini, Anda terhindar dari kemungkinan masalah kemampuan beradaptasi situs web, ini sangat baik untuk pemula.

Kemampuan beradaptasi situs ketika ditata menggunakan grid Bootstrap dijamin oleh sistem flexbox, didukung oleh semua browser utama dan bahkan Internet Explorer, dimulai dengan IE9+. Untuk versi sebelum IE 9, kami menyertakan skrip yang membantu menampilkan tata letak kami dengan benar.

Dan yang terpenting, layout PSD awalnya harus digambar dengan mempertimbangkan layout Bootstrap berikutnya. Jadi, tidak ada alasan lain mengapa tidak melakukan tata letak menggunakan grid bootstrap, baik dalam proyek Anda maupun sesuai pesanan. Saya akan mencoba memberikan lebih sedikit teori, tanpa air, dan lebih banyak latihan.

Buka tata letak di Photoshop dan pastikan tata letak tersebut memiliki tata letak 12 kolom di sepanjang panduan, dan semua elemen desain sejajar dengan panduan. Jarak antara pemandu luar biasanya 1170 piksel.

Unduh di situs web https://getbootstrap.com/ kompilasi CSS dan JS untuk memudahkan integrasi ke dalam proyek Anda.

Salin dari bagian Pendahuluan / Templat Pemula- templat halaman awal dan tempel ke file HTML indeks proyek Anda. Kami telah membuat template untuk dokumen HTML masa depan.

File bootstrap.min.css diyakini akan dimuat lebih cepat karena terletak di beberapa server, dan bukan di satu server Anda. Artinya situs akan terbuka lebih cepat. Jika Anda masih memutuskan untuk mengunduh sendiri file ini, tentukan jalur yang benar ke folder dengan file Bootstrap. Bagaimanapun, Anda perlu membuat file CSS kosong tempat Anda akan menulis gaya Anda.

Penting! File CSS Anda di file indeks harus disertakan lebih rendah dari bootstrap.min.css .

Kami menghubungkan font. Font dan ikon apa yang digunakan desainer dalam tata letaknya dapat dilihat di Photoshop atau di ekstensi browser Chrome - WhatFont.

File CSS bootstrap.min.css adalah perpustakaan yang bahkan tidak perlu Anda masuki. Kami hanya bekerja dengan satu file - main.css, tetapi kami perlu memastikan bahwa nama kelas baru untuk file CSS Anda tidak secara tidak sengaja bertepatan dengan nama "perpustakaan".

Di file bootstrap.min.css, gaya untuk grid flexbox telah dibuat dan kueri media telah ditulis, kita hanya perlu menambahkan kelas yang sesuai ke blok yang diperlukan di halaman HTML. Nama-nama kelas dapat ditemukan pada halaman kerangka di bagian tersebut jaringan. Perancang tata letak berpengalaman untuk tata letak Bootstrap menghubungkan plugin (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) ke editor kode Sublime Text.

Kita melihat bahwa situs ini terdiri dari 8 blok: header dengan menu navigasi (nav), 6 bagian (section) dan footer.

Di bagian (bagian: #layanan, #portfolio) kolom muncul, yang akan kita tata letaknya berdasarkan komponen Bootstrap utama - grid.

Pertama kita membuat markup HTML pada struktur utama, kita akan menambahkan detail seiring kemajuan tata letak.

Di bagian selanjutnya, kita akan memulai tata letak, tetapi bukan keseluruhan tata letak, tetapi blok individualnya. Karena tujuan dari pelajaran ini adalah untuk menunjukkan kepada pemula bagaimana berhasil menggabungkan tata letak konvensional dengan tata letak grid Bootstrap.

Tata letak berbasis grid adalah tata letak dengan panduan horizontal dan vertikal yang membantu mengatur konten dan mempertahankan struktur yang konsisten sepanjang pembuatan proyek.

Sejak lama, desainer profesional telah menggunakan grid untuk mengembangkan desain yang memiliki proporsi optimal. Mereka, pada gilirannya, membantu meningkatkan pembacaan teks. Grid yang digunakan saat ini dalam desain web dibuat pada tahun 1920-an oleh desainer Swiss yang sangat berbakat, dan sejak itu desain yang mereka buat telah menjadi standar dunia untuk mengatur konten di halaman proyek Internet.

Berkat standar ini, desainer web dapat dengan mudah memecahkan banyak masalah yang mereka temui saat bekerja dengan tata letak berbasis grid. Mari kita lihat beberapa aspek tata letak yang baik yang dapat diwujudkan melalui sistem grid.

Memecah konten ke dalam kolom tertentu membantu pengembang web memahami seperti apa tindakan mereka pada berbagai ukuran layar. Anda juga dapat membuat "kisi fleksibel" dalam HTML dan CSS yang didasarkan pada persentase, bukan nilai tetap. Anda cukup mengurangi jumlah beberapa kolom dan mengubah konten.

Semua konten akan disejajarkan sepanjang kolom vertikal di sepanjang halaman. Hal ini memungkinkan Anda menciptakan keseimbangan visual yang luar biasa dengan menggunakan jarak dan wadah horizontal yang sama di seluruh bagian.

Jika Anda menggunakan sistem kisi yang sama di seluruh desain, Anda dapat menampilkan hanya satu tata letak yang konsisten dan membuat templat yang mengatur teks Anda. Dengan cara ini, Anda dapat menghemat waktu dengan menggunakan tata letak yang sama untuk halaman berbeda di situs Anda, dan semua elemen akan berukuran sama.

Mari kita lihat contoh situs yang menggunakan sistem grid.

Pada gambar Anda dapat melihat grid 12 kolom, yang merupakan tata letak paling populer dalam desain web. Dengan kolom sebanyak ini, Anda dapat dengan mudah membagi konten Anda menjadi empat, tiga, atau dua kolom. Jika Anda mengambil tata letak 16 kolom, Anda bisa mendapatkan lebih banyak peluang, tetapi pada saat yang sama sejumlah kesulitan akan muncul dalam mengerjakan desain tersebut. Tata letak delapan kolom adalah pilihan yang baik untuk digunakan, tetapi tidak memungkinkan Anda membagi konten menjadi lebih dari tiga kolom. Oleh karena itu, desainer web profesional merekomendasikan penggunaan kisi 12 kolom.

Prinsip utama merancang tata letak grid adalah setiap kolom dalam grid harus memiliki lebar yang sama dan memiliki jarak yang sama di antara kolom-kolom tersebut. Untuk menghitung lebar kolom, Anda bisa menggunakan matematika sederhana.

Misalnya, lebar halaman akan menjadi 1140 piksel, kisi akan terdiri dari 12 kolom, dan akan ada 11 spasi. Awalnya, Anda perlu memahami berapa lebar spasinya: misalnya, 12 piksel.

Setelah melakukan semua perhitungan, kita mendapatkan tata letak yang akan memiliki 12 kolom 84 piksel dan 11 spasi 12 piksel, dan lebar keseluruhannya adalah 1140 piksel. Teknik ini bisa digunakan untuk perhitungan apapun, yang utama adalah mengetahui lebar halaman dan spasi.

Ini adalah tugas yang agak membosankan dan memakan waktu. Untuk membuat proses ini lebih cepat dan menyenangkan, sebagian besar desainer merekomendasikan penggunaan Photoshop CC 2014. Ia hadir dengan fitur baru yang disebut Guide Layout. Ini akan memungkinkan untuk membuat jaring yang diinginkan dengan kurva vertikal dan horizontal dalam waktu singkat.

Ada beberapa nuansa pada kisi-kisi yang membuatnya sulit untuk dilihat. Sebelum Anda mulai menyiapkan tata letak, Anda perlu memastikan bahwa sistem grid yang Anda gunakan mudah digunakan oleh pengembang web saat membuat desain Anda.

Menggunakan grid dalam mengembangkan desain tata letak untuk proyek web bisa sangat membantu. Praktik ini cukup sederhana dan populer di kalangan sebagian besar desainer.

Mari kita lihat beberapa contoh situs web yang cukup menarik dan bagaimana grid digunakan dan diisi dengan teks.