Melihat Lebih Dekat Pada Kerangka Kerja Blueprint CSS

Indonesian (Bahasa Indonesia) translation by Johari Triana (you can also view the original English article)

Blueprint adalah kerangka kerja CSS yang dapat menghemat waktu dan sakit kepala Anda saat mengerjakan proyek apa pun yang melibatkan HTML dan CSS, apakah itu dengan Rails, PHP, atau hanya membuat halaman HTML. Dalam tutorial ini Anda akan melihat cara kerja dalam Blueprint dan kami akan melihat aplikasi demo yang menggunakan Blueprint untuk mendapatkan ide yang lebih baik tentang bagaimana menggunakan benar-benar menggunakan kerangka kerja.

1. Apa itu Blueprint CSS?

Jika Anda seperti saya, seperti lebih dari pengembang daripada desainer, maka Anda terbiasa dengan proses memulai proyek baru dan tidak tahu apa yang harus dilakukan dengan CSS Anda. Anda tahu bahwa desain Anda kemungkinan akan berubah seiring berjalannya proyek, tetapi Anda ingin memiliki desain yang terlihat bagus dari awal. Jadi Anda menghabiskan waktu menulis beberapa CSS yang berfungsi di Firefox dan Safari, oh tunggu, jangan lupa IE, benar, benar. Kemudian Anda menulis beberapa HTML yang Anda pikir akan Anda gunakan, dan bekerja untuk mendapatkan semua spasi agar terlihat benar. Bagus! Selesai! Sekarang, tiga hari kemudian, persyaratan untuk proyek Anda telah berubah dan Anda mendapati diri Anda mendesain ulang tata letak lagi. Hmm ...

Sekarang, bahkan jika Anda seorang desainer rockstar yang sudah memiliki semua hal-hal CSS ini tahu, atau jika Anda tidak khawatir tentang bagaimana tata letak Anda akan berubah dari waktu ke waktu karena Anda bekerja dari template PSD atau sesuatu, itu tidak berarti bahwa tidak ada yang perlu dipelajari di sini. Blueprint masih dapat memberi Anda beberapa alat sehingga Anda dapat ...

Habiskan waktu Anda untuk berinovasi, bukan mereplikasi.

Ini adalah moto yang diiklankan

blueprintcss.org

Dan saya pikir inilah yang dicapai Blueprint. Blueprint memberikan fondasi yang kuat untuk membangun proyek Anda di atasnya. Ini dilakukan dengan memberikan default yang masuk akal di semua browser, tipografi default yang tampak bagus, kerangka kerja grid, formulir yang terlihat bagus, dan stylesheet cetak yang dibangun dengan printer dalam pikiran. Mari kita lihat bagaimana Blueprint mencapai ini:

2. File Sumber Blueprint

reset.css

File ini menetapkan default yang masuk akal di semua browser. Saya yakin kita semua akrab dengan memulai proyek baru, pergi ke file CSS utama kami dan menambahkan beberapa gaya default ke selector body, seperti 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; ' atau sesuatu di sepanjang garis itu. Inilah yang dilakukan reset.css, dan banyak lagi. Ini mengatur ulang gaya default untuk penspasian, tabel, font, dll. Sehingga Anda dapat bekerja dari yang bersih.
typography.css

File ini mengatur beberapa tipografi default yang bagus. Saya tidak akan menjelaskan semua gaya tetapi saya akan mengatakan bahwa ini adalah bagian favorit saya dari Blueprint karena, bagi saya, tidak ada yang lebih mengecewakan daripada mencoba untuk meletakkan halaman dan melihat beberapa teks Times New Roman hitam macet ke dalam sudut kiri atas halaman. Ugh. Tipografi.css Blueprint membuat saya tidak pernah melihatnya lagi. Typography.css juga mengatur beberapa gaya yang sangat bagus di sekitar ukuran font, ketinggian garis, gaya tabel standar, dll.
grid.css

File ini menangani bagian tata letak grid blueprint. Kita akan melihat kelas-kelas yang digunakannya sedikit. Satu hal penting yang perlu diperhatikan dengan grid, secara default menggunakan lebar 950px, dengan 24 kolom masing-masing memiliki lebar 30px dan margin 10px di antara kolom. Ini mungkin terdengar menyempit, tetapi jika ini bukan tata letak yang Anda inginkan, Anda selalu dapat menggunakan Generator Blueprint Grid CSS untuk menghasilkan tata letak grid kustom. Jika paragraf terakhir ini benar-benar membingungkan Anda, baca terus karena kami akan membangun tata letak menggunakan grid sedikit. Jika Anda tidak terbiasa dengan tata letak kotak CSS dan ingin latar belakang, Raj's

Kerangka Kerja Grid CSS mana yang Harus Anda Gunakan untuk Desain Web?

adalah intro yang bagus.
ie.css

Blueprint mendukung IE, jadi tentu saja ia membutuhkan stylesheet khusus itu sendiri untuk mengurus detail-detail kecil yang membuat IE begitu istimewa :) Yang menyenangkan adalah bahwa Blueprint menangani ini untuk Anda, sehingga semua gaya intinya akan bekerja di semua browser utama (saya pikir itu bahkan mendukung IE 5).
print.css

File ini menetapkan beberapa gaya cetak default, sehingga versi cetak situs Anda terlihat lebih baik daripada biasanya. File print.css juga memiliki opsi tempat Anda dapat mengisi nama domain Anda sehingga tautan relatif ditampilkan dalam tanda kurung di belakang tautan teks dalam versi cetak halaman Anda. Tanpa mengisi bagian ini, hanya tautan remote yang akan dicetak dengan benar. Lihatlah bagian bawah file src print.css, tertaut di atas.
forms.css

File ini menyediakan formulir standar yang tampak bagus serta kelas untuk pemberitahuan kesalahan atau bahkan pemberitahuan flash jika Anda menggunakan sesuatu seperti Rails. Karena ini adalah satu-satunya bagian yang tidak akan saya bahas lebih rinci, berikut adalah beberapa gaya formulir default yang digunakan:

Apakah ini berarti saya harus memasukkan enam stylesheet yang berbeda?

Tidak. Blueprint hadir dengan tiga stylesheet terkompresi untuk halaman HTML Anda, screen.css yang berisi 1-3 # &# 6 dari atas, print.css, dan ie.css. Alasan saya menguraikan bagian-bagian berbeda dari kerangka kerja di atas adalah karena kerangka kerja itu modular, masing-masing bagian bekerja secara independen satu sama lain. Yang menyenangkan tentang ini adalah bahwa jika Anda memutuskan bahwa satu aspek Blueprint, seperti tata letak grid, tidak sesuai dengan proyek Anda, tetapi Anda masih menginginkan manfaat dari reset.css dan typography.css, Anda tidak perlu menggunakan grid tetapi gaya lainnya masih akan berfungsi.

3. Ayo Bangun Tata Letak dengan Blueprint

Situs ini adalah ide yang telah saya hantam di otak saya, jadi saya pikir saya akan menghidupkannya di sini. Ini adalah situs di mana orang yang suka menulis novel sebagai hobi dapat pergi untuk meninjau novel dari penulis hobi lain serta mengunggah sendiri untuk ditinjau.

Saya menyadari bahwa Anda semua desainer rockstar yang terjebak di awal sekarang akan pergi setelah melihat desain saya, tetapi hal yang menarik tentang desain ini adalah bahwa saya tidak menulis CSS untuk itu. Desain ini hanya menggunakan gaya Blueprint dan meskipun ini bukan akhir dari semua desain, ia menyediakan desain yang fleksibel dan terlihat bagus untuk proyek saya. Karena desain saya kemungkinan akan berubah, Blueprint membuatnya mudah untuk memperbarui tata letak saya, dan ketika situs saya berfungsi penuh, saya dapat berpikir tentang menambahkan beberapa gaya saya sendiri untuk membuat semuanya terlihat lebih cantik.

4. Memecahnya

Head dokumen


    <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <title>Book Haven</title>

      <!-- Framework CSS -->
        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
        <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

        <!-- Import fancy-type plugin. -->
        <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
    </head>  
  

Ini adalah bagaimana tag tipikal akan terlihat ketika Anda menggunakan Blueprint. Anda harus menyertakan file CSS kerangka kerja, yang terdiri dari screen.css, print.css dan ie.css.

Satu hal hebat tentang Blueprint: itu hanya CSS, jadi itu bisa ditimpa seperti CSS lainnya. Beginilah cara kerja plugin Blueprint. Dalam contoh ini saya menggunakan plugin fancy-type Blueprint yang menawarkan beberapa gaya tipografi yang mewah. Anda dapat melihat bahwa saya telah menautkan ke file CSS fancy-type di bawah file kerangka kerja CSS, jadi CSS fancy-type memiliki kemampuan untuk menimpa gaya yang ditentukan oleh kerangka kerja. Untuk tujuan ini, ini ada

beberapa plugin BP tersedia

yang hanya menimpa aspek kerangka kerja atau menambahkan gaya baru untuk Anda gunakan.

Terakhir Anda harus memasukkan file CSS Anda di mana Anda bisa menimpa gaya dari kerangka kerja dan menambahkan gaya Anda sendiri ke halaman.

Header Halaman


    <body>
      <div class="container">

        <div id="header" class="span-24 last">

          <h1 id="book_haven"><img src="images/header.gif" alt="Book header image" id="header-image" /></h1>
        </div>

        <hr />
        <div id="subheader" class="span-24 last">
          <h3 class="alt">Get opinions on your latest novel, and read what other people are writing about.</h3>
        </div>

        <hr />  
  

Yang paling penting untuk dicatat tentang kode ini: grid Anda harus dikelilingi oleh <div> dengan kelas 'container' jika tidak, ia tidak akan ditampilkan sebagai grid. Tag <hr /> digunakan oleh Blueprint untuk memisahkan bagian halaman Anda secara vertikal. Kelas 'alt' dipersembahkan untuk Anda oleh plugin fancy-type dan menyediakan cara yang bagus untuk meningkatkan beberapa teks (dapat diterapkan ke elemen teks apa pun).

Konten utama


    <div class="span-17 colborder" id="content">
          <h3 class="loud">Featured Book: "The World Without Us"</h3>
          <p>
            <img class="right" src="images/world-book.gif" alt="featured book" />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          </p>


          <p>
            Cras sagittis. Fusce porttitor felis sed massa. In hac habitasse platea dictumst.           
          </p>

          <hr />
          <div class="span-8 colborder">
            <h4 class="prepend-5">Upload a Book</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. 
            </p>      
          </div>

          <div class="span-8 last">
            <h4 class="prepend-5">Write a Review</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. Mauris ipsum. 
            </p>      
          </div>
        </div>

        <div class="span-6 last" id="sidebar">

          <div id="recent-books">
            <h3 class="caps">Recent Books</h3>

            <div class="box">
              <a href="#" class="quiet">Hygiene</a>
              <div class="quiet">Nov. 29, 2008</div>
              <div class="quiet">by Craven</div>
            </div>

          </div>

          <div class="prepend-top" id="recent-reviews">
            <h3 class="caps">Recent Reviews</h3>
            <div class="box">
              <span class="quiet">Thor reviewed Hygiene</span>
              <div class="quiet">Rating: 4/5</div>
              <a href="#" class="quiet">Read this review</a>
            </div>

          </div>
        </div>

        <hr />

Ada banyak hal penting dalam snippet kode ini! Mari kita mulai dari atas dengan <div class="span-17 colborder">.. Tag ini menyatakan div yang outline terbesar pada halaman itu, yang berisi bagian Buku Pilihan serta dua bagian yang lebih kecil di bawah ini. Kelas 'span-17' berhubungan dengan tata letak grid Blueprint. Ini menyatakan bahwa lebar div ini harus menjangkau 17 dari 24 kolom pada halaman. Kelas lain yang digunakan, 'colborder', adalah kependekan dari border kolom dan memberitahu Blueprint untuk menempatkan border di sebelah kanan div ini di antara itu dan sidebar.

Penting: menggunakan kelas 'colborder' sebenarnya membutuhkan seluruh kolom. Karena div utama kami menggunakan 17 kolom (span-17), Anda akan berharap bahwa bilah sisi dapat menempati 7 kolom (karena 17 + 7 = 24, jumlah kolom di halaman kami), tetapi karena properti 'colborder' memakan sebuah kolom untuk dirinya sendiri, ini hanya menyisakan 6 kolom tersisa untuk sidebar div untuk ditempati (17 + 1 + 6 = 24).

Sebelum kita sampai ke sidebar kita perlu melihat dua div yang lebih kecil, yang berjudul 'Upload a Book' dan 'Write a Review'. Ini sebenarnya adalah satu grid Blueprint yang bersarang pada grid Blueprint lainnya. Karena grid bagian dalam bersarang di dalam div yang mencakup 17 kolom, lebar maksimal untuk grid ini, bukannya 24, adalah 17.

Jadi, div pertama memiliki kelas 'span-8' dan 'colborder', yang berarti lebarnya akan menjangkau 8 kolom dan akan memiliki batas di sebelah kanan. Div kedua di sini memiliki kelas 'span-8' dan 'last'. Ini adalah bagian penting dari kerangka kerja grid Blueprint. Kolom paling kanan dalam grid harus menggunakan kelas 'last'. Ini memberi tahu BP bahwa ini adalah kolom terakhir di grid ini dan tidak perlu membuat ruang lagi. Perhatikan bagaimana kita memiliki ruang untuk 17 kolom untuk memulai, masing-masing div membentang 8 kolom dan properti 'colborder' mengambil kolom terakhir (8 + 8 + 1 = 17).

Oke, kembali ke sidebar. Sidebar div memiliki kelas 'span-6' dan 'last'. Saya yakin kalian sudah memahami bagaimana cara kerja kelas-kelas ini. Sidebar ini melengkapi grid yang dimulai span-17 div utama. Jika Anda tidak menyadarinya, kelas 'span-#' dapat mengambil angka antara 1 dan 24, kecuali jika Anda memutuskan untuk menggunakan grid yang lebih besar, dalam hal ini kelas 'span-#' dapat mengambil angka apa saja selama jumlahnya kurang dari jumlah total kolom di grid Anda.

Ini tentang HTML paling sederhana yang bisa saya buat untuk menunjukkan grid.


    <div class="container">
          <div class="span-24">
              Header
          </div>
          <div class="span-4">
              Left sidebar
          </div>
          <div class="span-16">
              Main content
          </div>
          <div class="span-4 last">
              Right sidebar
          </div>    
      </div>

Mari kita lihat beberapa kelas CSS yang kita gunakan dalam tata letak.

'caps': Kelas ini digunakan dalam judul sidebar. Itu dibawa kepada kami oleh plugin fancy-type dan memberikan gaya yang bagus untuk judul huruf besar.
'box': Ini bagus untuk menampilkan item daftar. Dengan mudah membedakan item-item ini dari sisa halaman dan memberikan margin yang bagus antara elemen dan padding yang bagus untuk elemen di dalamnya.
'quiet': Ini adalah kelas CSS yang mengubah warna teks menjadi abu-abu lembut yang Anda lihat di teks sidebar.
'prepend-top': Yang ini digunakan pada bagian 'Ulasan Terakhir' pada sidebar. Itu hanya menerapkan margin 1,5em ke bagian atas elemen. Ada kelas serupa yang disebut 'append-bottom' yang memiliki efek yang sama di bagian bawah elemen.
'prepend-5': Saya menggunakan kelas ini untuk mendorong judul di div yang lebih kecil ke kanan. Di Blueprint ada beberapa kelas untuk penspasian: prepend, append, pull, dan push. Prepend dan append menambah padding masing-masing ke kiri dan kanan. Pull dan Push, menambahkan masing-masing margin ke kiri dan kanan. Sekali lagi, Anda bisa menambahkan, menambahkan, menarik, dan mendorong sebanyak yang Anda inginkan selama Anda tidak menggunakan angka yang lebih besar dari jumlah total kolom di grid Anda (seperti prepend-25 dalam grid dengan 24 kolom).

Jika Anda tidak terbiasa dengan model kotak CSS dan tidak tahu perbedaan antara padding dan margin, berikut ini adalah pelajaran singkat. Dalam CSS, padding menambahkan ruang di dalam batas elemen dan benar-benar meningkatkan ukuran elemen. Misalnya, jika Anda memiliki tabel dengan border dan Anda menambahkan padding ke tabel itu, itu sebenarnya akan mendorong border menjauh dari tabel. Margin, di sisi lain, menambah ruang di luar border dan tidak menambah ukuran elemen. Ini mungkin memiliki efek mendorong elemen lain menjauh dari yang sekarang atau memindahkan elemen saat ini di halaman. Berikut ini adalah gambar yang bagus untuk menunjukkan model kotak CSS:

5. Kesimpulan

Tutorial ini dimaksudkan untuk menunjukkan kepada Anda bagaimana Blueprint CSS dapat digunakan untuk meletakkan dasar bagi proyek Anda berikutnya, atau setidaknya mengurangi beban bahu Anda di sekitar pengaturan ulang dan tipografi. Selain itu, jika Anda menggunakan Blueprint dengan Rails, periksa repositori mereka di Github karena mereka memiliki beberapa fitur yang memungkinkan Anda untuk dengan mudah mengintegrasikan dan mengkonfigurasi Blueprint untuk bekerja dengan proyek Rails Anda.

Hal terbaik tentang Blueprint adalah hanya CSS. Itu semua CSS. Jadi, jika Anda tertarik dengan Blueprint, periksa sumbernya dan jika Anda memiliki pengetahuan tentang CSS, Anda harus dapat memahami bagaimana semuanya bekerja. Blueprint juga bukan basis kode yang sangat besar, mungkin memiliki lebih sedikit CSS daripada kebanyakan dari kita yang digunakan pada proyek yang tipikal. Anda bahkan dapat membaca sumber di browser Anda di repositori Blueprint di Github.

Saya akan meninggalkan Anda dengan beberapa sumber daya di Blueprint:

Situs web Blueprint ada di blueprintcss.org. Ini adalah tempat termudah untuk mengunduh kerangka kerja.
Secara default Blueprint menggunakan tata letak tetap, jika Anda mendukung tata letak dinamis di sini adalah plugin yang Anda akan memungkinkan Cetak Biru berfungsi dengan tata letak dinamis.
Lebih Blueprint plugin

Berlangganan ke NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.