การออกแบบเฟรมเวิร์ก CSS สามารถช่วยให้เราสร้างเพจคุณภาพสูงได้อย่างรวดเร็วและมีประสิทธิภาพ และยังมีส่วนช่วยในการสร้างมาตรฐานของโค้ดด้วย แน่นอนว่าแต่ละเฟรมเวิร์กนั้นขึ้นอยู่กับความพยายามของเฟรมเวิร์กรุ่นก่อน ๆ จำนวนนับไม่ถ้วน นี่คือเฟรมเวิร์ก CSS ที่แนะนำ
CSS Frameworks + รีเซ็ต CSS: การออกแบบตั้งแต่เริ่มต้น
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
1. บทนำ
พิมพ์เขียวเป็นสิ่งที่เรียกว่ากรอบงาน CSS ในการเปรียบเทียบ ความคิดเห็นในโค้ดพิมพ์เขียวนั้นค่อนข้างละเอียด
ปฏิบัติตามวิธีการสร้างเฟรมเวิร์ก CSS ตามที่อธิบายไว้ในเฟรมเวิร์กสำหรับนักออกแบบของ Jeff Croft (หรือการทำความเข้าใจเฟรมเวิร์กเว็บและวิธีการสร้างเฟรมเวิร์ก CSS เวอร์ชันภาษาจีน):
มีหลายวิธีที่เป็นไปได้ในการสร้างเฟรมเวิร์ก แต่วิธีที่ใช้กันทั่วไปและน่าจะมีประโยชน์มากที่สุดคือการสรุป CSS ทั่วไปของคุณให้เป็นสไตล์ชีทแต่ละสไตล์ซึ่งแต่ละสไตล์ครอบคลุมส่วนใดส่วนหนึ่งของทั้งหมด ตัวอย่างเช่น คุณอาจมีสไตล์ชีตที่กำหนด การเพิ่มตัวอักษรและอีกวิธีหนึ่งที่จัดการกับการรีเซ็ตจำนวนมาก ความสวยงามของแนวทางนี้คือความสามารถในการเลือกเฉพาะสไตล์ที่คุณต้องการ คุณอาจจบลงด้วยสไตล์ชีทที่แตกต่างกันหกหรือเจ็ดแบบในกรอบงานของคุณ แต่หากโครงการใดโครงการหนึ่งไม่ ไม่ต้องการหนึ่งหรือสองอัน ไม่จำเป็นต้องรวมเฟรมเวิร์กที่เราสร้างขึ้นในสำนักงานของเรามีห้าสไตล์ชีต:
reset.css—จัดการการรีเซ็ตจำนวนมาก
type.css—จัดการการพิมพ์
grid.css—จัดการตารางเค้าโครง
widgets.css—จัดการวิดเจ็ต เช่น แท็บ เมนูแบบเลื่อนลง และปุ่ม “อ่านเพิ่มเติม”
base.css—รวมสไตล์ชีทอื่นๆ ทั้งหมด เพื่อที่เราจะต้องเรียก base.css จากเอกสาร (X)HTML ของเราเพื่อใช้กรอบงานทั้งหมด
พิมพ์เขียวถูกสร้างขึ้นในทำนองเดียวกัน :
แบ่งแยกและพิชิต :
ในแง่ของการจัดระเบียบการทำงาน Buleprint จะกระจายฟังก์ชันต่างๆ เช่น เค้าโครง การพิมพ์ วิดเจ็ต การรีเซ็ต และการพิมพ์ลงในไฟล์ css ต่างๆ ทำให้สะดวกสำหรับผู้ใช้ในการนำเข้าเฉพาะฟังก์ชันที่ต้องการใช้ แทนที่จะนำเข้าไฟล์ทั้งหมด และปรับปรุงประสิทธิภาพการโหลดหน้า ปัจจุบัน ส่วนส่วนประกอบให้เฉพาะการประมวลผลปุ่มเท่านั้น และยังไม่บรรลุแนวทาง MECE ของ McKinsey ("ที่เป็นอิสระซึ่งกันและกันและครบถ้วนสมบูรณ์")
อินเทอร์เฟซแบบรวม :
แม้ว่าฟังก์ชันจะกระจายออกเป็นไฟล์ css หลายไฟล์ แต่เมื่อนำเข้า จะต้องรวมเฉพาะไฟล์ screen.css เดียวกันเท่านั้น รายละเอียดการนำเข้าเฉพาะจะได้รับการประมวลผลใน screen.css ซึ่งรวมอินเทอร์เฟซภายนอกไว้ด้วยกัน
คำอธิบายของไฟล์ css ที่รวมอยู่ในพิมพ์เขียว:
หน้าจอ.css
นี่คือไฟล์หลักของเฟรมเวิร์ก โดยนำเข้าไฟล์ CSS อื่นๆ จากไดเร็กทอรี "lib" และควรรวมไว้ในทุกหน้า
เช่นเดียวกับฟังก์ชัน base.css ของ Jeff Croft คุณเพียงแค่ต้องรวมไฟล์นี้และสามารถนำเข้าได้
พิมพ์.css
ไฟล์นี้ตั้งค่ากฎการพิมพ์เริ่มต้น เพื่อให้ฉบับพิมพ์รวมอยู่ในทุกหน้า
ใช้เพื่อจัดการการพิมพ์และสามารถจัดเป็นวิดเจ็ตได้
lib/grid.css
ไฟล์นี้ตั้งค่ากริด (เป็นจริง) มีคลาสมากมายที่คุณใช้กับ div เพื่อตั้งค่ากริดแบบอิงคอลัมน์
ใช้เพื่อจัดการเค้าโครงหน้า (คอลัมน์)
lib/วิชาการพิมพ์.css
ไฟล์นี้ตั้งค่าการพิมพ์เริ่มต้นบางส่วน นอกจากนี้ยังมีวิธีการบางอย่างสำหรับสิ่งพิเศษบางอย่างที่เกี่ยวข้องกับข้อความของคุณ
ใช้เพื่อจัดการเค้าโครงขององค์ประกอบของหน้า
lib/reset.css
ไฟล์นี้จะรีเซ็ตค่า CSS ที่เบราว์เซอร์มักจะตั้งไว้สำหรับคุณ
ใช้เพื่อรีเซ็ตเพจและระบุค่าเริ่มต้นสำหรับองค์ประกอบของเพจที่ไม่ได้ระบุแอตทริบิวต์ CSS
lib/buttons.css
มีปุ่มเฉพาะ CSS ที่ยอดเยี่ยม
ใช้เพื่อจัดการปุ่มต่างๆ ซึ่งสามารถจัดเป็นวิดเจ็ตได้
lib/compressed.css
ไฟล์หลักเวอร์ชันบีบอัด ใช้สิ่งนี้กับทุกไซต์ที่ใช้งานจริง
ดู screen.css สำหรับคำแนะนำ
จัดให้มีไฟล์ css ที่ถูกบีบอัด (รวมถึง grid.css, วิชาการพิมพ์.css, reset.css, Buttons.css)
2. การวิจัยการใช้งานแต่ละโมดูล
2.1. การวิจัยบน grid.css
การจัดการความเข้ากันได้ของการวางศูนย์กลางข้ามเบราว์เซอร์
โดยทั่วไป เพื่อจัดการกับความแตกต่างระหว่าง Firefox และ IE เมื่อต้องจัดการกับการจัดกึ่งกลาง จะมีการใช้วิธีการต่อไปนี้:
body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}
ดึงข้อมูลจาก: http://www.maxdesign.com.au/presentation/center/
วิธีจัดการกับพิมพ์เขียว:
body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* คอนเทนเนอร์ควรจัดกลุ่มคอลัมน์ทั้งหมดของคุณ */ .container { text-align: left; : 0 auto; /* เค้าโครงกึ่งกลาง */ width: 1150px; /* ความกว้างทั้งหมด */ } วิธีใช้พิมพ์เขียวสำหรับคอลัมน์ (คอลัมน์):
พิมพ์เขียวกำหนด .column, .span-x และ .last ซึ่งรวมกันเพื่อให้ทราบถึงฟังก์ชันคอลัมน์
ในหมู่พวกเขา: .column กำหนดแอตทริบิวต์ float ของคอลัมน์ .span-x กำหนดความกว้างของคอลัมน์ .last ตั้งค่าระยะขอบขวาเป็น 0px
| .column { float : left; margin-right: 10px; padding: 0;}/* ใช้คลาสเหล่านี้เพื่อกำหนดความกว้างของคอลัมน์ */ .span-1 { width: 30px; : 70px; }.span-3 { ความกว้าง: 110px; }.span-4 { ความกว้าง: 150px; 10 { ความกว้าง: 390px; }....span-23 { ความกว้าง: 910px; : 1150px; Margin: 0; }/* องค์ประกอบสุดท้ายในบล็อกหลายคอลัมน์ต้องการคลาสนี้ class ="column span-24"> ส่วนหัว แถบด้านข้างซ้าย เนื้อหาหลัก แถบด้านข้างขวา การใช้งานสี่คอลัมน์: ส่วนหัว < div class ="column span-4"> แถบด้านข้างซ้าย เนื้อหาหลัก 0 เนื้อหาหลัก 1 div div> แถบด้านข้างขวา โปรดทราบว่าความกว้างใน .container (ซึ่งกำหนดความกว้างของทั้งหน้า) จะถูกเปลี่ยนเป็น 1150px การใช้ช่องว่าง คอลัมน์: สำหรับหลายคอลัมน์ (เช่น 5 คอลัมน์) จะมีคอลัมน์ว่าง (เช่น คอลัมน์ซ้ายและขวาว่างเปล่า) คุณสามารถใช้ .append-x และ .prepend-x เพื่อเติมข้อมูลเหล่านั้นได้ ในจำนวนนั้น .append-x จะเพิ่มคอลัมน์ว่างหลังคอลัมน์ (padding-right) และ .prepend-x จะเพิ่มคอลัมน์ว่างก่อนคอลัมน์ (padding-left) คำจำกัดความของคอนเทนเนอร์ทั่วไป /* คอนเทนเนอร์ควรจัดกลุ่มคอลัมน์ทั้งหมดของคุณ */ .container { text-align: left; padding: 0; margins: 0 auto; ความกว้าง */ } |
2.2. การวิจัยเกี่ยวกับ reset.css
รหัสดั้งเดิมของ reset.css ควรมาจาก Eric Meyer มีบันทึกสองรายการเกี่ยวกับการรีเซ็ต ซึ่งใช้เพื่อจัดการกับปัญหาค่าเริ่มต้นที่แตกต่างกันในเบราว์เซอร์ เอกสารของ Eric Meyer นั้นยอดเยี่ยม:
รีเซ็ตเหตุผล: http://meyerweb.com/eric/ thoughts/2007/04/18/reset-reasoning/
รีเซ็ตโหลดซ้ำ: http://meyerweb.com/eric/ thoughts/2007/05/01/reset-reloaded/
ทำไมต้องรีเซ็ต.
เหตุผลพื้นฐานคือเบราว์เซอร์ทั้งหมดมีค่าเริ่มต้นในการนำเสนอ แต่ไม่มีเบราว์เซอร์ใดที่มีค่าเริ่มต้นเหมือนกัน (เอาล่ะ ไม่มีเบราว์เซอร์สองตระกูล เบราว์เซอร์ที่ใช้ Gecko ส่วนใหญ่จะมีค่าเริ่มต้นเหมือนกัน)
ตัวอย่างเช่น เบราว์เซอร์บางตัวเยื้องรายการที่ไม่เรียงลำดับและเรียงลำดับด้วยระยะขอบซ้าย ในขณะที่เบราว์เซอร์บางตัวใช้ช่องว่างภายในด้านซ้าย ในปีที่ผ่านมา เราได้จัดการกับความไม่สอดคล้องกันเหล่านี้เป็นกรณีๆ ไป
เหตุใดจึงใช้รูปแบบการรีเซ็ตแทนตัวเลือกสากล
ตัวเลือกที่เรียกว่าสากลใช้ * เพื่อแสดงองค์ประกอบทั้งหมดของเอกสาร เป็นต้น
* { Margin: 0;} แหล่งข้อมูลบางส่วนในหัวข้อสไตล์การรีเซ็ต:
ไลบรารีรีเซ็ต YUI: http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
บทความต่อไปนี้เป็นบทความที่พูดถึงกรอบงาน CSS หรือเคล็ดลับจริงๆ แต่บทความเหล่านี้ล้วนกล่าวถึงหัวข้อการรีเซ็ต
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. การวิจัยเกี่ยวกับ วิชาการพิมพ์.css
วิชาการพิมพ์.css ใช้เพื่อกำหนดรูปแบบเค้าโครงเริ่มต้น (พื้นฐาน) ขององค์ประกอบของหน้า:
การตั้งค่าประเภทบนเว็บเป็นตารางพื้นฐาน:
http://alistapart.com/articles/settingtypeบนเว็บ
2.4. การวิจัยบน Buttons.css
การค้นพบองค์ประกอบปุ่มอีกครั้งจะกล่าวถึงคุณประโยชน์ต่างๆ ของการใช้องค์ประกอบปุ่มเพื่อแทนที่องค์ประกอบอินพุต องค์ประกอบปุ่มมีฟังก์ชันที่สมบูรณ์ยิ่งขึ้น
http://particletree.com/features/rediscovering-the-button-element
2.4. การวิจัย Print.css
Eric Meyer มีบทความเกี่ยวกับการใช้ฟังก์ชัน print ใน css ซึ่งสามารถใช้เป็นข้อมูลอ้างอิงในการทำความเข้าใจ print.css
การออกแบบ CSS: กำลังจะพิมพ์
พิมพ์แตกต่าง
2.5, บีบอัด.css
บีบอัด.css เป็นแพ็คเกจที่บีบอัดไฟล์พิมพ์เขียวหลายไฟล์ นอกจากนี้ยังบีบอัดไฟล์ css โดยลบช่องว่างที่ไม่มีประโยชน์ บรรทัดใหม่ ความคิดเห็น และข้อความอื่น ๆ
วิธีการนี้ใช้เมื่อปรับใช้บนระบบที่ใช้งานจริงเพื่อหลีกเลี่ยงการนำเข้าไฟล์ css หลายไฟล์บนเพจ และยังมีประโยชน์ในการปรับปรุงประสิทธิภาพของเพจอีกด้วย
ตามคำแนะนำใน lib/screen.css ควรใช้บริการบีบอัด css ที่จัดทำโดยวัยรุ่น:
http://teenage.cz/acidofil/tools/cssformat.php
นอกจากนี้ บริการที่คล้ายกันที่ให้การปรับให้เหมาะสมและการบีบอัด css และ javascript ได้แก่:
http://csstidy.sourceforge.net/ (โอเพ่นซอร์ส)
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/ (อิงจาก csstidy)
3. ตัวอย่างการใช้งาน
4. เอกสารอ้างอิง
http://code.google.com/p/blueprintcss/wiki/Tutorial
5. โครงการที่เกี่ยวข้อง
พิมพ์เขียวเครื่องกำเนิดไฟฟ้า: http://kematzy.com/blueprint-generator/
ตริโปลี: http://monc.se/tripoli/
บทความที่แนะนำ: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/