() translation by (you can also view the original English article)
Tutorial ini bertujuan agar Anda memulai dengan rapi; kerangka grid semantik yang dibangun untuk Sass dan Bourbon.
Bourbon Neat tetap membersihkan markup Anda, mencegah Anda dari muddying sampai dengan kelas grid, kolom dan baris. Sebaliknya, ReadyBoost mixins, dan dengan menerapkan mixins yang berbagai markup yang ada Anda dapat menciptakan Layout fleksibel, responsif. Mari kita menjelajahi mixins paling penting ini:
- pergeseran dalam konteks
- luar-kontainer
- Rentang-kolom
- Omega
- pergeseran
- pad
Catatan: Untuk menginstal dan memulai dengan Bourbon Neat, lihatlah tutorial yang sebelumnya Bourbon Neat: Grids semantik, Unopinionated dan responsif.
luar-kontainer
Mixin ini adalah untuk menentukan tata letak wadah Anda, atau wrapper. Terapkan ini pada sebuah elemen dan Neat akan secara otomatis center di viewport (dengan menambahkan margin-kiri: auto / margin-right: auto), jelas mengapung dan menerapkan $max-width. Ini adalah opsional mixin (disarankan meskipun) dan Anda dapat memiliki beberapa elemen wadah luar pada satu halaman. Satu hal yang tidak dapat Anda lakukan adalah sarang mereka.
Wadah luar memegang grid Anda. Di dalamnya, grid Anda dapat menjangkau sebanyak kolom di sebagaimana ditentukan di file grid-settings Anda melalui $grid-variabel kolom (yang default untuk 12 kolom). Semua elemen dalam satu baris harus menambahkan hingga jumlah kolom yang ditentukan dalam variabel ini.
Dalam contoh dummy di bawah ini, Anda akan melihat bahwa container elemen membungkus beberapa Tag samping dan artikel. Mereka span kolom 3 dan 9 masing-masing dan menambahkan sampai 12 kolom yang ditentukan dalam pengaturan saya. Jika saya harus pergi ke bahwa jumlah kolom tata letak pasti akan jeda. Berpikir outer-container mixin sebagai prasyarat kemungkinan untuk menambahkan konsisten grid layout dalam wadah elemen.
Haml:
1 |
.container |
2 |
%aside Aside: 3 columns |
3 |
%article Article: 9 columns |
4 |
|
5 |
%aside Aside: 3 columns |
6 |
%article Article: 9 columns |
7 |
|
8 |
%aside Aside: 3 columns |
9 |
%article Article: 9 columns |
Sass:
1 |
body
|
2 |
background-color: white |
3 |
|
4 |
.container
|
5 |
+outer-container |
6 |
background-color: #f5f5f5 |
7 |
|
8 |
aside, article |
9 |
padding: 10px |
10 |
margin-bottom: 20px |
11 |
height: 100px |
12 |
|
13 |
aside
|
14 |
+span-columns(3) |
15 |
background-color: #81d4fa |
16 |
|
17 |
article
|
18 |
+span-columns(9) |
19 |
+omega |
20 |
background-color: #e64a19 |
Warna background dalam contoh ini membuatnya lebih mudah untuk melihat bagaimana potongan terlihat cocok. Dan tidak peduli dengan omega mixin saat ini; semua akan terungkap pada waktunya.
Di parsial Sass _grid-pengaturan Anda juga dapat menentukan $max-width Sass variabel yang mendefinisikan lebar maksimum yang isi dari jangkauan page Anda. Sebagai contoh, Neat dilengkapi dengan $max-width mudah berubah-lebar pengaturan 1088px (dikonversi ke em) dari kotak.
Ada juga pilihan untuk memberikan ini mixin dengan argumen untuk $local-max-width jika Anda ingin elemen wadah tertentu memiliki berbeda maksimum-lebar dari satu set secara global dalam grid-settings. Di sini, Anda dapat memberikan argumen pixel, em atau persentase. Kolom Anda grid di dalam wadah yang menyesuaikan lebar mereka secara otomatis, tetapi jumlah kolom tetap sama.
Sass:
1 |
.container
|
2 |
+outer-container(800px) |
3 |
background-color: #f5f5f5 |
atau
1 |
.container
|
2 |
+outer-container(80%) |
3 |
background-color: #f5f5f5 |
span-columns
Jika Anda baru untuk merancang dengan grid, Anda mungkin harus melihat ke dalam Pesanan Kerusakan: Prinsip-Prinsip Grid untuk Desain Web oleh Khoi Vinh. Saya sangat merekomendasikannya. Satu konsep yang Anda butuhkan untuk memahami segera adalah bahwa Anda membangun desain grid Anda melalui serangkaian kolom yang span berbagai page.
Penggunaan dasar ini sangat mudah dengan Rapi. Anda memilih elemen, dan memberi tahu berapa banyak kolom yang harus dibentangkan dalam jumlah total $grid-columns. Biarkan saya menunjukkan dasar-dasarnya.
Haml:
1 |
.container |
2 |
%aside.first First: 2 columns |
3 |
%article.second Second: 10 columns |
4 |
|
5 |
%aside.third Third: 4 columns |
6 |
%article.fourth Fourth: 8 columns |
7 |
|
8 |
%aside.fifth Fifth: 6 columns |
9 |
%article.sixth Sixth: 6 columns |
10 |
|
11 |
%aside.seventh Seventh: 8 columns |
12 |
%article.eighth Eighth: 4 columns |
13 |
|
14 |
%aside.ninth Ninth: 10 columns |
15 |
%article.tenth Tenth: 2 columns |
Sass:
1 |
body
|
2 |
color: white |
3 |
background-color: white |
4 |
|
5 |
.container
|
6 |
+outer-container |
7 |
background-color: #f5f5f5 |
8 |
|
9 |
aside, article |
10 |
padding: 10px |
11 |
margin-bottom: 20px |
12 |
height: 100px |
13 |
|
14 |
article
|
15 |
background-color: #e64a19 |
16 |
|
17 |
aside
|
18 |
background-color: #81d4fa |
19 |
|
20 |
.first
|
21 |
+span-columns(2) |
22 |
.third
|
23 |
+span-columns(4) |
24 |
.fifth
|
25 |
+span-columns(6) |
26 |
.seventh
|
27 |
+span-columns(8) |
28 |
.ninth
|
29 |
+span-columns(10) |
30 |
|
31 |
.second
|
32 |
+span-columns(10) |
33 |
.fourth
|
34 |
+span-columns(8) |
35 |
.sixth
|
36 |
+span-columns(6) |
37 |
.eighth
|
38 |
+span-columns(4) |
39 |
.tenth
|
40 |
+span-columns(2) |
41 |
|
42 |
.second, .fourth, .sixth, .eighth |
43 |
+omega |
Seperti yang Anda lihat, setiap baris terdiri dari satu biru di samping di sebelah kiri dan salah satu elemen artikel merah di sebelah kanan. Tata letak tidak istirahat, karena dalam wadah luar elemen mereka jumlah kolom dan lebar mereka menambah hingga 12 (sebagaimana didefinisikan dalam $grid-kolom) secara merata.
Bagian paling keren adalah bahwa tdak perlu untuk menambahkan informasi styling markup Anda-karena ini terkait dengan lapisan presentasi Anda, Anda hanya menentukan bagaimana Anda grid terdiri dalam file Sass. Keprihatinan terpisah yang bersih. Setiap desainer waras menyentuh pekerjaan Anda dengan cinta Anda untuk tidak mencemari konten dengan informasi styling.
Bonus tambahan adalah bahwa Anda dapat nama kelas di markup Anda bagaimanapun Anda inginkan atau butuhkan. Tidak ada yang membuat keputusan ini untuk Anda, yang merupakan berkat tanpa menyamar apapun.
Nesting Columns
Dari waktu ke waktu itu mungkin berguna cepat untuk sarang elemen grid dalam lain.
Sass:
1 |
.some-parent-element
|
2 |
+span-columns(10) |
3 |
.some-nested-element
|
4 |
+span-columns(5 of 10) |
Katakanlah Anda memiliki sebuah elemen yang luas yang mencakup untuk 10 kolom dan harus memasukkan dua elemen yang lebih kecil yang mencakup 5 kolom. Dalam kasus ini, menyediakan unsur-unsur bersarang dengan ukuran parent column sebagai argumen untuk rentang-kolom mixin. Mari kita lihat contoh lebih konkret.
Haml:
1 |
.container |
2 |
%aside.first First: 2 columns |
3 |
%article.second |
4 |
%article.third Third: 5 nested columns |
5 |
%article.fourth Fourth: 5 nested columns |
Sass:
1 |
body
|
2 |
color: white |
3 |
background-color: white |
4 |
|
5 |
.container
|
6 |
+outer-container |
7 |
background-color: #f5f5f5 |
8 |
padding: |
9 |
top: 15px |
10 |
bottom: 15px |
11 |
|
12 |
aside, article |
13 |
padding: 10px |
14 |
margin-bottom: 20px |
15 |
height: 100px |
16 |
|
17 |
article
|
18 |
background-color: #e64a19 |
19 |
|
20 |
aside
|
21 |
background-color: #81d4fa |
22 |
|
23 |
.first, .second |
24 |
height: 250px |
25 |
|
26 |
.second
|
27 |
+span-columns(10) |
28 |
|
29 |
.third, .fourth |
30 |
+span-columns(5 of 10) |
31 |
background-color: darken(#e64a19, 6) |
32 |
margin-top: 25px |
33 |
|
34 |
.first
|
35 |
+span-columns(2) |
36 |
padding-top: 25px |
Omega
Konsep penting lain untuk pemula yang bermain dengan grid adalah selokan. Ini margin di sebelah kanan, antara elemen grid, dan mendapat otomatis diciptakan untuk setiap elemen grid dalam wadah — kecuali yang terakhir! Talang juga skala responsif jika Anda mengubah ukuran jendela browser. Contoh di bawah menunjukkan elemen grid beween ruang ini. Selokan ditandakan oleh latar belakang berwarna kelabu yang datang melalui dari wadah luar.
Haml:
1 |
.container |
2 |
.first 1 col |
3 |
.second 2 col |
4 |
.third 3 col |
5 |
.fourth 3 col |
6 |
.fifth 2 col |
7 |
.sixth 1 col |
Sass:
1 |
body
|
2 |
color: white |
3 |
background-color: white |
4 |
|
5 |
.container
|
6 |
+outer-container |
7 |
background-color: #f5f5f5 |
8 |
|
9 |
.first, .second, .third, .fourth, .fifth, .sixth |
10 |
background-color: #81d4fa |
11 |
padding: 10px |
12 |
height: 200px |
13 |
|
14 |
.first
|
15 |
+span-columns(1) |
16 |
|
17 |
.second
|
18 |
+span-columns(2) |
19 |
|
20 |
.third
|
21 |
+span-columns(3) |
22 |
|
23 |
.fourth
|
24 |
+span-columns(3) |
25 |
|
26 |
.fifth
|
27 |
+span-columns(2) |
28 |
|
29 |
.sixth
|
30 |
+span-columns(1) |
Mudah-peasy tepat? Tapi coba tebak apa yang terjadi jika kita melipat gandakan kolom oleh duplikasi baris tepat di bawah itu?
Oh dear. Jadi apa yang terjadi di sini? Sebagai elemen keenam pada baris pertama ini tidak lagi elemen terakhir, ia juga mendapat selokan yang tepat (marjin) secara default. Biarkan aku menjadi sangat jelas tentang hal ini: untuk mencapai sebuah layout yang bersih selaras, elemen terakhir dalam wadah telah selokan yang dihapus secara default. Karena selokan ditambahkan pada elemen keenam, lebar semua elemen pada baris pertama sekarang melebihi total-lebar Anda jumlah total-kolom span per baris dan grid Anda istirahat.
Tidak ada yang terlalu tragis meskipun, dan memperbaiki mudah. Hanya menemukan elemen yang perlu selokan yang ke kanan dihapus dan menerapkan omega mixin ada. Selesai!
Haml:
1 |
.container |
2 |
.first 1 col |
3 |
.second 2 col |
4 |
.third 3 col |
5 |
.fourth 3 col |
6 |
.fifth 2 col |
7 |
.sixth 1 col |
8 |
|
9 |
.first 1 col |
10 |
.second 2 col |
11 |
.third 3 col |
12 |
.fourth 3 col |
13 |
.fifth 2 col |
14 |
.sixth 1 col |
Sass:
1 |
body
|
2 |
color: white |
3 |
background-color: white |
4 |
|
5 |
.container
|
6 |
+outer-container |
7 |
background-color: #f5f5f5 |
8 |
|
9 |
.first, .second, .third, .fourth, .fifth, .sixth |
10 |
background-color: #81d4fa |
11 |
padding: 10px |
12 |
height: 200px |
13 |
|
14 |
.first
|
15 |
+span-columns(1) |
16 |
|
17 |
.second
|
18 |
+span-columns(2) |
19 |
|
20 |
.third
|
21 |
+span-columns(3) |
22 |
|
23 |
.fourth
|
24 |
+span-columns(3) |
25 |
|
26 |
.fifth
|
27 |
+span-columns(2) |
28 |
|
29 |
.sixth
|
30 |
+span-columns(1) |
31 |
+omega |
Sekarang, setiap unsur jatuh ke tempatnya dengan baik, dan tidak baris melebihi mereka total-lebar.
Mari kita mengambil satu langkah kecil lebih lanjut. Katakanlah Anda memiliki beberapa baris yang harus menampilkan gambar dengan ukuran yang sama secara merata tanpa melanggar grid. Semua yang kita butuhkan adalah beberapa elemen yang span sama lebar, span-columns(2) di sini, dan menempatkan mereka dalam beberapa baris. Keajaiban terjadi dengan argumen Anda pasokan omega dengan:
1 |
img
|
2 |
+omega(6n) |
Di sini, setiap elemen img keenam akan memiliki hak selokan dihapus dan karena itu merata cocok enam elemen 2-kolom ke kolom 12 wadah luar. Rapi!
Haml:
1 |
.container |
2 |
%img |
3 |
%img |
4 |
%img |
5 |
%img |
6 |
%img |
7 |
%img |
8 |
|
9 |
%img |
10 |
%img |
11 |
%img |
12 |
%img |
13 |
%img |
14 |
%img |
15 |
|
16 |
%img |
17 |
%img |
18 |
%img |
19 |
%img |
20 |
%img |
21 |
%img |
22 |
Sass:
1 |
body
|
2 |
color: white |
3 |
background-color: white |
4 |
|
5 |
.container
|
6 |
+outer-container |
7 |
background-color: #f5f5f5 |
8 |
|
9 |
img
|
10 |
+span-columns(2) |
11 |
+omega(6n) |
12 |
height: 200px |
13 |
margin-bottom: 5px |
14 |
background-color: #81d4fa |
Anda ingin hanya empat elemen per baris? Tidak ada masalah! Mengurangi argumen omega untuk 4n. Teknik ini akan berguna selama tutorial selanjutnya ketika kita mendapatkan responsif grids dan bagaimana Anda dapat mengubah tata letak Anda melalui media queries.
Sass:
1 |
img
|
2 |
+omega(4n) |
Saya mendorong Anda untuk bermain-main dengan contoh ini melalui pena yang disediakan dan dapatkan rasa untuk itu. Tidak ada sihir di sini, tapi tidak akan terkejut jika Anda memerlukan sedikit lebih banyak waktu untuk membungkus kepala Anda di sekitar rincian. Main-Main sedikit dengan argumen-argumen omega dan saya memiliki keraguan itu akan menjadi jelas kepada Anda dalam waktu singkat.
Perhatian!
Terakhir kata-kata bijak: dalam beberapa kasus yang tampaknya menjadi masalah dalam urutan yang Anda memasok span-columns dan omega mixins unsur-unsur. Saran saya adalah untuk selalu menerapkan span-columns pertama untuk menghindari perilaku tak terduga.
pergeseran
Mixin ini harus cepat. Jika Anda ingin menyesuaikan elemen pindah horizontal ke kiri atau kanan, Anda dapat menerapkan shift mixin , dan menyediakan jumlah kolom ini harus bergerak. Anda dapat menggunakan bilangan bulat atau angka floating point.
Sass:
1 |
.some-element-that-needs-adjusting
|
2 |
+shift(n) |
Menyediakan sejumlah positif (unitless) dari kolom untuk memindahkan elemen ke kanan dan sebaliknya. Di belakang layar, rapi meningkat atau menurun nilai-nilai persentase margin kiri pada elemen.
Catatan: jika Anda menggunakan shift tanpa argumen, itu akan default ke shift(1).
pergeseran dalam konteks
Mixin ini memiliki ide yang sama dengan shift (menggunakan shift-in-context di bawah kap) tetapi dibuat untuk elemen grid yang bersarang. Saya telah bermain-main dengan itu sedikit dalam contoh contoh dengan grid bersarang, tetapi dalam semua kejujuran saya mencapai hasil yang sama dengan menggunakan shift .
bantalan
Saya tidak berpikir saya perlu membahas secara spesifik bagaimana ini bekerja. Ini adalah helper kecil untuk membersihkan stylesheet Anda dan memberi Anda lebar selokan default jika Anda memberikan campuran dengan defaultsebagai argumen. Tidak ada yang terlalu mewah, tapi saya pikir saya akan menyebutkannya untuk melengkapi pilihan Anda untuk menyesuaikan jarak grid Anda.
Kelancangan
1 |
.some-element-that-needs-padding
|
2 |
+pad(10px 20px 30px default) |
Kesimpulan
Itu saja yang perlu Anda ketahui untuk mulai bermain dengan grid Neat. Contoh-contoh ini seharusnya memberi Anda dasar yang kuat yang memungkinkan Anda untuk membangun kisi-kisi apa pun yang Anda butuhkan — betapapun rumitnya hal yang Anda suka.
Tutorial berikutnya akan membahas ronde lain dari mixins Neat, dan juga menjelaskan bagaimana Anda dapat menggunakan query media dan breakpoint untuk menyesuaikan grid Anda untuk mengubah ukuran viewport. Sampai jumpa!
