CSS Asyik - Belajar Bikin Web Makin Asyik dengan CSS

Membedah File-File Blueprint CSS

Membedah File Screen.css

Isi File Screen.css

Jika anda perhatikan isi file screen.css, semua style sudah tersusun rapi sesuai dengan fungsinya . Bayangkan berapa lama waktu yang anda bisa hemat dari menulis CSS dari nol! Belum lagi proses debugging browser IE yang menjengkelkan. .

Berikut ini uraian penjelasan stylesheet berdasarkan fungsinya:

Reset CSS

Isi dari Reset CSS ini kurang lebih fungsinya sama dengan CSS Reset yang lain seperti yang sudah saya jelaskan sebelumnya di artikel ini. Secara garis besar CSS Reset berfungsi untuk menetapkan standar CSS supaya setiap browser memiliki stylesheet standar yang sama.

Disarankan supaya anda tidak mengutak-atik apapun pada CSS Reset. Karena setiap style yang didefinisikan di Blueprint CSS ini berdasar pada CSS Reset yang sudah dibuat.

Typography

Sesuai dengan namanya, typography menetapkan peraturan untuk penggunaan CSS properties yang memiliki efek pada jenis dan gaya pada huruf. Properti-properti yang didefinisikan pada bagian ini adalah:

1. font-family
2. font-style
3. font-weight
4. font-size
5. color
6. line-height
7. margin
8. padding

Blueprint juga menambahkan class-class yang juga berfungsi untuk memberikan aksen khusus pada fungsi tertentu:

1. .small, untuk mengecilkan ukuran font
2. large, untuk membesarkan ukuran font
3. .hide, untuk menyembunyikan elemen tertentu
4. .quiet, untuk memberikan aksen “sunyi” dengan memberikan warna font yang sangat muda
5. .loud, untuk memberikan aksen “lantang” dengan memberikan warna font yang sangat terang
6. .highlight, untuk memberikan marka pada tulisan
7. .added, berguna untuk memberitahu bahwa sebuah data telah ditambahkan
8. .removed, berguna untuk memberitahu bahwa sebuah data telah dihapus
9. .first, .last, .top, .bottom masih belum jelas bagi saya buat apa. Tapi dilihat dari cssnya sepertinya untuk mengatur letak floating element. Kalau ada yang tahu, segera komen , yah.

Forms

CSS ini mendefinisikan style-style khusus untuk elemen-elemen form. Elemen-elemen tersebut adalah:

1. label
2. fieldset
3. legend
4. input (untuk tipe text, password, radio button dan checkbox)
5. textarea
6. form

Class-class khusus untuk elemen-elemen form pada CSS ini adalah:

1. .error, untuk memberikan informasi “Error” pada saat submit form
2. .notice, untuk memberikan notifikasi pada saat mengisi form
3. .success, untuk memberikan informasi “Success” pada saat submit form

Grid

CSS ini seringkali menjadi alasan utama kenapa orang menggunakan CSS Framework karena Grid berfungsi untuk menentukan ukuran dan posisi dari elemen. Properti-properti yang sering dijumpai pada Grid ini adalah:

1. float (left atau right)
2. clear
3. margin
4. padding

Pada CSS Grid terdapat segudang class. Sangat banyak, mendetail, dan setiap class memiliki ciri khas masing-masing. Namun masih dapat dikelompokkan menjadi daftar berikut ini:

1. span-#, berfungsi menentukan ukuran width pada elemen. Contohnya .span-1, akan memberikan width sebesar 30 pixel. Jika disandingkan dengan elemen-elemen form, akan mengatur panjang dari masing-masing elemen form berbasis box (input tipe text, password, submit dan textarea)
2. append-#, berfungsi memberikan padding kanan pada elemen berbasis box sejumlah pixel tertentu. Dinamai “append” karena penambahan dilakukan “setelah” konten.
3. prepend-#, kebalikan dari append, prepend justru menambahkan padding kiri.
4. div.border, memberikan border kanan untuk kolom
5. div.colborder, juga memberikan border kanan, namun lebih menambahkan padding kanan untuk menimbulkan kesan yang lebih lapang
6. pull-#, memberikan margin kiri negatif untuk memberikan kesan “tertarik” ke sebelah kiri
7. push-#, kebalikan dari pull, push memberi margin kiri positif untuk memberikan kesan “terdorong” ke sebelah kanan
8. prepend-top dan append-bottom, memberikan padding sesuai dengan namanya masing-masing
9. clear, clearfix, hr, hr.space; berfungsi untuk “membersihkan” layout dari elemen-elemen floating

Satu hal yang patut diperhatikan untuk Blueprint CSS ini adalah asumsi bahwa lebar website adalah 950pixel (dapat dilihat pada class .container). Hal ini patut diperhatikan bagi para website developer bahwa class-class pada Grid ini bisa berfungsi secara optimal untuk website dengan lebar 950 pixel. Anda bisa saja menambah atau mengurangi lebar website anda. Namun patut diperhatikan bahwa beberapa class memiliki width yang cukup besar, misalnya .prepend-23 memiliki padding kiri sebesar 920 pixel tentunya tidak baik untuk website yang lebarnya hanya 900 pixel.

Saya pribadi tidak pernah menggunakan Grid CSS karena terlalu banyak class yang “tidak perlu”. Dalam arti, saya tidak akan 100% menggunakan seluruh span-# atau append-# ke dalam desain-desain saya. Lebih baik kelebihan alokasi space tersebut saya salurkan untuk membuat class dengan ukuran seperlunya saja. Tapi ini hanya masalah preferensi saja, anda tentu saja bebas menggunakan class-class tersebut.

halaman berikutnya… Membedah Print.css, IE.css, dan Kesimpulan