Blueprint CSS Framework

Nama : Reza Bayu Permana NIM : 12141378 Prodi : Teknik Informatika (Malam) Mata Kuliah : Web Statis Blueprint CSS Framework Blueprint Css adalah sebuah framework CSS. Herankan kenapa css pun memiliki framework. CSS Framework sebenarnya di targetkan untuk developer yang merasa bosan melakukan halhal yang sama berkaitan dengan perancangan UI (User Interface). Keuntungan dari penggunaan ini adalah mempercepat proses desain User Interface. Biasanya kita akan ribet dengan masalah cross browser, tipografi dll.. serahkan semuanya kepada blueprint. Blueprint telah menyediakan kelas-kelas yang dapat mempercepat proses desain. adapun fitur-fitur blueprint adalah sebagai berikut Memiliki CSS reset yang menghilangkan perbedaan pada browser. Support untuk desain layout yang komplek Typography based Memiliki Form styles yang menarik untuk user interfaces. Udah include Print styles supaya webpage gampang di print. Plugins untuk buttons, tabs dan sprites. Jika pertama kali menggunakan blueprint anda harus mengerti konsep grid desain. Grid desain dapat adalah desain yang mirip table, tetapi kita tidak menggunakan tag table disini (saya rasa anda sudah tau alasanya). Sebuah grid pada blueprint mempunyai lebar 950 pixel yang dibagi dalam 24 kolom, dengan 10 pixel untuk spasi perkolom. Adapun kelas-kelas yang harus diketahui pada pembuatan Grid adala container : kelas yang membungkus semua kelas lainnya column : kelas yang menyatakan bahwa div tersebut berlaku sebagai kolom grid span-n : kelas yang akan menentukan lebar kolom jumlah n dalam 1 kolom adalah 24. untuk menentukan panjang bisa dengan rumus (n x 40)- 10. append-n : memberikan spasi kosong kekanan pada grid prepend: memberikan spasi kosong kekiri pada grid Berikut ini langkah langkah penggunaan blueprint 1 P a g e

Langkah 1 : Download Blueprint CSS Anda dapat mendownload di http://www.blueprintcss.org/. Setelah didownload silakan extract blueprint lalu copy folder blueprint ke folder tempat anda bekerja Langkah 2 : Link Download Blueprint CSS Download Blueprint CSS di : <li> <a href="https://github.com/joshuaclayton/blueprint-css/archive/master.zip">zip</a> </li> Langkah 3 : Simple Framework Blueprint CSS Blueprint css grid Terdapat 24 kolom atau grid. 1 grid memiliki lebar 30px. Margin antarkolom 10px. Jadi total canvas yang dapat kita gunakan adalah sepanjang 950px dengan resolusi terbaik 1024 768. Untuk menggunakan blueprint css ini, kita dapat mengunduh file masternya di blueprintcss.org. Di website resminya juga terdapat informasi website-website ternama yang menggunakan framework css ini. Setelah kita mengunduh file dari blueprintcss.org yang berupa zip. Didalam zip banyak folderfolder namun yang digunakan ialah ie.css, print.css dan screen.css. 2 P a g e

1. Reset.css File ini menentukan default masuk di semua browser. Saya yakin kita semua akrab dengan memulai sebuah proyek baru, pergi ke file CSS utama dan menambahkan gaya default beberapa untuk pemilih body, seperti ' margin: 0 ; padding: 0 ; font-family : Helvetica, Arial, sans - serif ; ' reset.css me-reset gaya default untuk spasi, tabel, font, dll sehingga Anda dapat bekerja dari yang bersih. 2. ie.css Blueprint mendukung IE, jadi tentu saja dibutuhkan itu stylesheet khusus sendiri untuk mengurus detail-detail kecil yang membuat IE begitu istimewa :) Yang menyenangkan adalah Blueprint yang tidak menangani hal ini untuk Anda, sehingga semua gaya inti akan bekerja di semua browser utama ( mendukung IE 5 ) 3. typhograpy.css File ini set up beberapa tipografi default. Saya tidak akan menjelaskan semua style bahwa ini adalah bagian favorit saya dari Blueprint karena, bagi saya, tidak ada yang lebih mengecewakan daripada mencoba untuk layout page dan melihat beberapa teks Times New Roman berwarna hitam ke pojok kiri atas halaman. Typography.css juga memberikan beberapa style yang benar-benar bagus di ukuran font, line- ketinggian, styling default tabel, dll 4. grid.css File ini menjalankan bagian grid layout blueprint. Satu hal penting untuk dicatat dengan grid, secara default menggunakan lebar 950px, dengan 24 kolom masing-masing memiliki lebar 30px dan margin 10px antara kolom. Hal ini mungkin terdengar konstriktif, tetapi jika hal ini layout tidak Anda inginkan, Anda dapat selalu menggunakan Blueprint Grid CSS Generator untuk menghasilkan border layout kustom. 5. forms.css File ini berisi mencari bentuk standar serta kelas untuk pemberitahuan kesalahan atau bahkan berkedip pemberitahuan jika Anda menggunakan sesuatu seperti Rails. Karena ini adalah satu-satunya bagian yang tidak akan menutupi secara lebih rinci, di sini adalah beberapa style bentuk default digunakan : 3 P a g e

Masukkan kode dibawah diantara tag <head> </head> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>book Haven</title>  <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" />   <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" /> </head> Langkah berikutnya, untuk membuat template website dengan blueprint css kita tinggal memanggil grid-grid atau kolom yang sudah di-generate oleh blueprint css. 4 P a g e

Contohnya : Kode di bawah tulis diantara tag <body> </body>, container dibawah ini digunakan untuk column dan di ikuti span <body> <div class="container"> <div class="span-24 last"> The header <div class="span-4"> The first column <div class="span-16"> The center column <div class="span-4 last"> The last column <div class="span-24 last"> The footer </body> Atau Yang paling penting untuk dicatat tentang kode ini : grid Anda harus dikelilingi oleh < div > dengan class ' container ' jika tidak maka tidak akan ditampilkan sebagai grid. < hr / > tag digunakan oleh Blueprint untuk memisahkan bagian halaman Anda secara vertikal. ' alt ' class di folder fancy-type Plugin dan menyediakan cara yang bagus untuk membumbui beberapa teks ( dapat diterapkan untuk elemen teks ). <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> <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> 5 P a g e

<hr /> Main Content <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> 6 P a g e <hr /> <div class="span-8 colborder"> <h4 class="prepend-5">upload a Book</h4> <p> Nam vitae tortor id ante sodales facilisis. </p> <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 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 class="quiet">by Craven

<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 <a href="#" class="quiet">read this review</a> <hr /> Ada banyak hal penting dalam potongan kode ini! Mari kita mulai dari atas dengan < div class = " span - 17 colborder " >. Tag diuraikan div terbesar pada halaman tersebut, salah satu yang berisi bagian Featured Book serta dua bagian kecil di bawah ini. class ' span - 17 ' berkaitan dengan grid layout Blueprint. Ini menyatakan bahwa lebar div ini harus menjangkau 17 dari 24 kolom pada halaman. class lain yang digunakan, ' colborder ', adalah singkatan column border dan memberitahu Blueprint untuk menempatkan border di sebelah kanan div dan sidebar. Penting : menggunakan ' colborder ' class benar-benar mengambil seluruh colomns. div utama kami adalah menggunakan 17 columns ( span - 17 ), Anda akan berharap bahwa sidebar bisa menempati 7 kolom ( 17 + 7 = 24, jumlah colomns di halaman kami), tapi karena ' colborder ' properti memakan colomns untuk dirinya sendiri, hanya 6 kolom yang tersisa untuk div sidebar untuk menempati ( 17 + 1 + 6 = 24 ). Sebelum kita sampai ke sidebar kita perlu melihat dua lebih kecil div, yang berjudul ' Upload a Book ' dan ' Write a Review '. Ini sebenarnya adalah salah satu Blueprint kotak bersarang jaringan Blueprint lain. Sejak grid batin bersarang di dalam div mencakup 17 kolom, lebar max untuk grid ini, bukan 24, adalah 17. Jadi, div pertama memiliki kelas ' spam - 8 ' dan ' colborder ', yang berarti itu lebar akan span 8 colomns dan akan memiliki border kanan. Div kedua di sini memiliki class ' span - 8 ' dan 'last '. Ini merupakan bagian penting blueprint grid framework. colomns paling kanan dalam border harus memiliki penggunaan class 'last '. Ini memberitahu BluePrint bahwa ini adalah colomns terakhir dalam border ini dan tidak perlu membuat ruang lainnya. Perhatikan bagaimana kita memiliki ruang untuk 17 colomns untuk memulai dengan, masing-masing div span 8 dan ' colborder ' ( 8 + 8 + 1 = 17 ) lalu. OK, kembali ke sidebar. Sidebar div memiliki class ' span - 6 ' dan 'last'. saya yakin anda mengetahui kelas ini bekerja. Sidebar ini melengkapi grid yang utama span - 17 div, dan ' span- # ' kelas dapat mengambil sejumlah antara 1 dan 24, kecuali jika Anda memutuskan untuk menggunakan grid yang lebih besar, dalam hal ini ' span- # ' kelas dapat mengambil sejumlah asalkan jumlahnya kurang dari jumlah kolom dalam grid. 7 P a g e

Jadi, file index.html tadi berisi kode sebagai berikut: Jadi, file index.html tadi berisi kode sebagai berikut: Tutorial Membuat Template Website Dengan Blueprint CSS <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="iqbalparabi" /> <link rel="stylesheet" href="asset/css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="asset/css/blueprint/print.css" type="text/css" media="print">  <title>tutorial Blueprint CSS</title> </head> <body> <div> 8 P a g e

</body> </html> <div> header <div> Colomns pertama <div> Colums tengah <div> Colomns terakhir <div> Bagian footer Sekarang kita coba untuk melihatnya di browser, maka hasilnya akan seperti ini: Yang terpenting : 1. Jangan sampai salah memanggil class / import file inti dari Blueprint CSS. Perhatikan path tempat sobat menyimpannya. 2. Terdapat 24 kolom dimana tiap kolom harus terdapat class last. Jangan lupa untuk menutup tiap kolom terakhir dengan class last. Jika kita menggunakan seluruhnya (24 kolom) maka penulisannya: <div class= span-24 last >.. Jika kita bagi menjadi beberapa kolom misalnya 2, kita menjumlahkan besar span menjadi 24 seperti ini: <div class= span-8 > <div class= span-16 last >. Ingat, jangan lupakan last jika sudah diakhir. 3. Gunakan file CSS untuk melakukan variasi tiap kolom yang akan sobat buat. Variasi warna dan gambar yang bagus. Jika sudah paham maka tinggal mencari Inspirasi style seperti apa yang akan kita bangun. 9 P a g e

Contoh FrameworkCSS simple.html Salah Satu Contoh Framework Blueprint CSS yang berada di.rar Blueprintcss.org Sourcecode FrameworkCSS <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>blueprint Sample Page</title>  <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"> 10 P a g e

<link rel="stylesheet" href="../../blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> </head> <body> <div class="container"> <h1>blueprintcss FrameWork(Container)</h1> <hr> <h2 class="alt">this sample page demonstrates a tiny fraction of what you get with Blueprint.</h2> <hr> <div class="span-7 colborder"> <h6>here's a box(span-7 colborder)</h6> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> <div class="span-8 colborder"> <h6>and another box(span-8 colborder)</h6> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p> <div class="span-7 last"> 11 P a g e

<h6>this box is aligned with the sidebar(span-7 last)</h6> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> <hr> <hr class="space"> <div class="span-15 prepend-1 colborder"> <p><img src="test.jpg" class="top pull-1 left" alt="test">lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">small CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p> <p>nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p> <p>vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p> <blockquote> 12 P a g e

<p>integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p> </blockquote> <p>maecenas vel metus quis magna pharetra fermentum. <em>integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p> <hr> <div class="span-7 colborder"> <h6>this is a nested column(span-7 colborder)</h6> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <div class="span-7 last"> <h6>this is another nested column</h6> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <div class="span-7 last"> <h3>a <span class="alt">simple</span> Sidebar</h3> 13 P a g e

<p>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> <p>mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p> <p class="quiet">vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> <h5>incremental leading</h5> <p class="incr">vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p> <p class="incr">vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p> <hr> <h2 class="alt">you may pick and choose amongst these and many more features, so be bold.</h2> <hr> <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="valid.png" alt="valid HTML 4.01 Strict" height="31" width="88" class="top"> 14 P a g e

</a> </p> </body> </html> Contoh Screenshot Percobaan. Sourcecode HTML <html> <head> <title>blueprint CSS</title> <meta content="text/html; charset=utf-8" http-equiv="content-type"> </head> <body> <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="print.css" type="text/css" media="print"> <!-[if lt IE 8]> 15 P a g e

<p>    <div id="footer" class="container prepend-top"> <hr /> <p class="alt right"> Brought to you by the Blueprint core team 2011. <a href="https://github.com/joshuaclayton/blueprintcss/archive/master.zip">(download here)</a> </p>  </body> </html> Sourcecode CSS /* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools Templates and open the template in the editor. */ /* Created on : Nov 11, 2014, 1:43:36 PM Author : Rheza Permana */ body { color: #222; font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; font-size: 75%; line-height: 1.5; 17 P a g e

.clearfix:after,.container:after { clear: both; content: " "; display: block; height: 0; overflow: hidden; visibility: hidden; div.append-bottom,.append-bottom { margin-bottom: 1.5em; div.append-bottom,.append-bottom { margin-bottom: 1.5em; div.prepend-top,.prepend-top { margin-top: 1.5em; h1, h2 { color: #111; font-weight: normal; h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; pre, code, kbd, samp { font-family: monospace,sans-serif; pre { background: none repeat scroll 0 0 #fafafa; border: 1px solid #e1e1e1; font-size: 12px; 18 P a g e

margin-bottom: 20px; padding: 10px; white-space: pre-wrap; word-wrap: break-word;.container{ margin: 0 auto; width: 950px; #content { background: #640808 repeat scroll 0 0 blue!important; #artikel { background-color: #fbf2f2; border-bottom: 2px solid #efdddd; text-align: center; #navigation { font: 300 1.3em/1 "Signika",sans-serif; #footer { background: none repeat scroll 0 0 #ffffff; border-top: 1px solid #640808; color: #111; div.prepend-top,.prepend-top { margin-top: 1.5em; h2 { font-size: 2em; margin-bottom: 0.75em; 19 P a g e

h1, h2,h3, h4, h5, h6 { color: #111; font-weight: normal; h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em;.span-24 { margin-right: 0; width: 950px;.column,.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span10,.span-11,.span-12,.span-13,.span-14,.span-15,.span-16,.span-17,.span-18,.span-19,.span-20,.span-21,.span-22,.span-23,.span-24 { float: left; margin-right: 10px;.colborder { border-right: 1px solid #ddd; margin-right: 25px; padding-right: 24px;.span-11 { width: 430px;.span-12 { width: 470px; 20 P a g e

.last { margin-right: 0px; padding-right: 0px; hr { background: none repeat scroll 0 0 #ddd; border: medium none; clear: both; color: #ddd; float: none; height: 1px; margin: 0 0 17px; width: 100%;.right { float: right!important; p{ margin: 0 0 1.5em;.column,.push-1,.push-2,.push-3,.push-4,.push-5,.push-6,.push-7,.push-8,.push-9,.push10,.push-11,.push-12,.push-13,.push-14,.push-15,.push-16,.push-17,.push-18,.push-19,.push-20,.push-21,.push-22,.push-23,.push-24 { float: center; position: relative; 21 P a g e

Contoh Web screenshot lain 22 P a g e