CSS juga memiliki Kerangka: Pengantar Cetak Biru

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.

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,

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/