Desain kerangka kerja CSS dapat membantu kita membuat halaman berkualitas tinggi dengan cepat dan efektif, dan juga berkontribusi pada standarisasi kode. Tentu saja, setiap kerangka kerja didasarkan pada upaya pendahulunya yang tak terhitung jumlahnya. Berikut adalah kerangka kerja CSS yang direkomendasikan - Kerangka Cetak Biru CSS
Kerangka CSS + Reset CSS: Desain Dari Awal
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
1. Pendahuluan
Cetak biru disebut kerangka CSS. Sebagai perbandingan, komentar dalam kode cetak biru relatif detail.
Ikuti metode membangun kerangka css seperti yang dijelaskan dalam Frameworks for Designers karya Jeff Croft (atau Memahami Kerangka Web dan Cara Membangun Kerangka CSS versi China):
Ada beberapa cara yang mungkin untuk membangun kerangka kerja, namun yang paling umum dan bisa dibilang paling berguna adalah dengan mengabstraksi CSS umum Anda ke dalam lembar gaya individual yang masing-masing mencakup bagian tertentu dari keseluruhan meningkatkan tipografi dan lainnya yang menangani pengaturan ulang massal. Keindahan dari pendekatan ini adalah kemampuan untuk secara selektif hanya menyertakan gaya yang Anda butuhkan. tidak perlu satu atau dua, tidak harus disertakan. Kerangka kerja yang kita buat di kantor kita memiliki lima stylesheet :.
reset.css—menangani reset massal.
type.css—menangani tipografi.
grid.css—menangani grid tata letak.
widgets.css—menangani widget seperti tab, menu drop-down, dan tombol “baca selengkapnya”.
base.css—mencakup semua stylesheet lainnya, sehingga kita hanya perlu memanggil base.css dari dokumen (X)HTML kita untuk menggunakan keseluruhan kerangka kerja.
Cetak birunya dibuat dengan cara yang sama :
Bagilah dan taklukkan :
Dari segi organisasi fungsional, buleprint menyebarkan fungsi seperti tata letak, tipografi, widget, reset, dan pencetakan ke dalam file css yang berbeda. Hal ini memudahkan pengguna untuk hanya mengimpor fungsi yang ingin mereka gunakan, alih-alih mengimpor semua file, dan meningkatkan kinerja pemuatan halaman. Saat ini, bagian komponen hanya menyediakan pemrosesan tombol, dan belum mencapai pendekatan MECE ("saling independen dan sepenuhnya lengkap") McKinsey.
Antarmuka terpadu :
Meskipun fungsinya tersebar ke beberapa file css, saat mengimpor, hanya file screen.css yang sama yang perlu disertakan. Detail impor spesifik diproses di screen.css, yang menyatukan antarmuka eksternal.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="layar, proyeksi" />
Deskripsi file css yang disertakan dalam cetak biru:
layar.css
Ini adalah file utama kerangka kerja. Ini mengimpor file CSS lain dari direktori "lib", dan harus disertakan di setiap halaman.
Mirip dengan fungsi base.css Jeff Croft, Anda hanya perlu menyertakan file ini dan dapat diimpor
cetak.css
File ini menetapkan beberapa aturan pencetakan default, sehingga versi cetak disertakan di setiap halaman.
Digunakan untuk menangani pencetakan dan dapat diklasifikasikan sebagai widget.
lib/grid.css
File ini mengatur grid (itu benar). File ini memiliki banyak kelas yang Anda terapkan pada div untuk mengatur segala jenis grid berbasis kolom.
Digunakan untuk menangani tata letak halaman (kolom)
lib/typography.css
File ini menetapkan beberapa tipografi default. File ini juga memiliki beberapa metode untuk beberapa hal menarik yang berkaitan dengan teks Anda.
Digunakan untuk menangani tata letak elemen halaman.
lib/reset.css
File ini menyetel ulang nilai CSS yang cenderung disetel browser untuk Anda.
Digunakan untuk mereset halaman dan menentukan nilai default untuk elemen halaman yang tidak menentukan atribut css.
lib/buttons.css
Menyediakan beberapa tombol khusus CSS yang bagus.
Digunakan untuk menangani tombol, yang dapat diklasifikasikan sebagai widget
lib/terkompresi.css
Versi terkompresi dari file inti. Gunakan ini di setiap situs aktif.
Lihat screen.css untuk petunjuknya
Menyediakan file css terkompresi (termasuk grid.css, typography.css, reset.css, button.css).
2. Penelitian penggunaan masing-masing modul
2.1. Penelitian di grid.css
Penanganan kompatibilitas pemusatan lintas-browser
Secara umum, untuk mengatasi perbedaan antara Firefox dan IE saat menangani pemusatan, metode berikut digunakan:
body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}
Diperoleh dari: http://www.maxdesign.com.au/presentation/center/
Cara menangani cetak biru:
body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* Sebuah wadah harus mengelompokkan semua kolom Anda. */ .container { text-align: left; : 0 auto; /* Tata letak pusat */ lebar: 1150 piksel; /* Lebar total */ }Cara menerapkan cetak biru untuk kolom (Kolom):
cetak biru mendefinisikan .column, .span-x, dan .last, yang digabungkan untuk mewujudkan fungsi kolom.
Diantaranya: .column mendefinisikan atribut float kolom; .span-x mendefinisikan lebar kolom; .last mengatur margin-right ke 0px,
| .column { float : left; margin-right: 10px; padding: 0;}/* Gunakan kelas ini untuk mengatur lebar kolom yang seharusnya : 70 piksel; }.span-3 { lebar: 110 piksel; }.span-4 { lebar: 150 piksel; }....span-8 { lebar: 310 piksel; 10 { lebar: 390 piksel; }....span-23 { lebar: 910 piksel; }.span-24 { lebar: 950 piksel; margin: 0; : 1150px; margin: 0; }/* Elemen terakhir dalam blok multi-kolom memerlukan kelas ini. */ .last { margin-right: 0; class ="column span-24" > Header </div> <div class ="column span-4" > Sidebar kiri </div> <div class ="column span-16" > Konten utama </div> <div class ="column span-4 last" > Sidebar kanan </div> </div> Implementasi empat kolom: <div class ="container" > <div class ="column span-26" > Header </div> < div class ="column span-4" > Sidebar kiri </div> <div class ="column span-3 " > Konten utama 0 </div> <div class ="column span-25" > Konten utama 1 </ div div> <div class ="column span-4 last" > Sidebar kanan </div> </div> Perhatikan bahwa lebar dalam .container (yang menentukan lebar seluruh halaman) diubah menjadi 1150px kolom: Untuk beberapa kolom (misalnya 5 kolom), ada kolom kosong (misalnya kolom kiri dan kanan kosong), Anda dapat menggunakan .append-x dan .prepend-x untuk mengisinya. Diantaranya, .append-x menambahkan kolom kosong setelah kolom (padding-kanan), dan .prepend-x menambahkan kolom kosong sebelum kolom (padding-kiri). Definisi kontainer secara umum /* Sebuah kontainer harus mengelompokkan semua kolom Anda. */ .container { text-align: left; position: relative; padding: 0; margin: 0 auto; lebar */ } |
2.2 Penelitian tentang reset.css
Kode asli reset.css seharusnya berasal dari Eric Meyer. Eric Meyer memiliki dua log tentang reset, yang digunakan untuk menangani masalah nilai default yang berbeda di seluruh browser. Dokumentasi Eric Meyer sangat bagus:
Atur Ulang Penalaran: http://meyerweb.com/eric/ thoughtts/2007/04/18/reset-reasoning/
Atur Ulang Dimuat Ulang: http://meyerweb.com/eric/ thoughtts/2007/05/01/reset-reloaded/
Mengapa mengatur ulang
Alasan dasarnya adalah semua browser memiliki default presentasi, namun tidak ada browser yang memiliki default yang sama. (Oke, tidak ada dua kelompok browser—sebagian besar browser berbasis Gecko memiliki default yang sama.)
Misalnya, beberapa browser membuat indentasi daftar yang tidak berurutan dan berurutan dengan margin kiri, sedangkan browser lainnya menggunakan padding kiri. Pada tahun-tahun sebelumnya, kami menangani ketidakkonsistenan ini berdasarkan kasus per kasus;
Mengapa menggunakan gaya reset daripada pemilih universal
Yang disebut pemilih universal menggunakan * untuk mewakili semua elemen dokumen, misalnya
* { margin: 0;} Beberapa sumber tentang topik gaya penyetelan ulang:
Pustaka penyetelan ulang YUI: http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
Artikel berikut sebenarnya adalah artikel yang membahas framework atau tips CSS, namun semuanya menyebutkan topik reset.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
http://businesslogs.com/design_and_usability/my_5_css_tips.php
http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
2.3.Penelitian tentang tipografi.css
typography.css digunakan untuk menentukan format tata letak default (garis dasar) elemen halaman:
Mengatur Jenis di Web ke Grid Dasar:
http://alistapart.com/articles/settingtypeontheweb
2.4. Penelitian tentang tombol.css
Menemukan Kembali Elemen Tombol membahas berbagai manfaat menggunakan elemen tombol untuk menggantikan elemen masukan. Elemen tombol memberikan fungsi yang lebih kaya.
http://particletree.com/features/rediscovering-the-button-element
2.4.Penelitian cetak.css
Eric Meyer memiliki artikel tentang implementasi fungsi print di css yang dapat dijadikan referensi untuk memahami print.css.
Desain CSS: Akan Mencetak
Cetak Berbeda
2.5, terkompresi.css
terkompresi.css adalah paket yang mengompresi beberapa file cetak biru. Ini juga mengompresi file css, menghapus spasi yang tidak berguna, baris baru, komentar, dan teks lainnya.
Metode ini digunakan saat menerapkan sistem produksi untuk menghindari impor beberapa file css pada halaman, dan juga berguna untuk meningkatkan kinerja halaman.
Menurut instruksi di lib/screen.css, layanan kompresi css yang disediakan oleh remaja harus digunakan:
http://teenage.cz/acidofil/tools/cssformat.php
Selain itu, layanan serupa yang menyediakan optimasi dan kompresi css dan javascript antara lain:
http://csstidy.sourceforge.net/ (sumber terbuka)
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/ (berdasarkan csstidy)
3. Contoh penggunaan
4. Dokumen referensi
http://code.google.com/p/blueprintcss/wiki/Tutorial
5. Proyek terkait
generator cetak biru: http://kematzy.com/blueprint-generator/
tripoli: http://monc.se/tripoli/
Artikel yang direkomendasikan: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/