Embed Size (px)
DESCRIPTION
Find out how to reduce your web design and development time by using the Blueprint CSS Framework
Citation preview
www.techsailor.comEngaging Your Customers Online
by Ashley Hau
7 Dec 2010
Blueprint CSS Framework
www.techsailor.com
What are CSS Frameworks?
www.techsailor.com
CSS frameworks are meant to
speed up and simplify the development
of complex websites.
Tool to Aid Web Development
www.techsailor.com
These frameworks contain
predefined libraries of code that
contain a ton of options for you
to use in your HTML.
Reusable Code
www.techsailor.com
For instance, grid-based
frameworks usually contain
several classes that are a set
number of pixels wide to make it
easy to create multi-columned
layouts.
Example of Convenience
www.techsailor.com
• Blueprint CSS (http://www.blueprintcss.org)
• Elements (http://elements.projectdesigns.org)
• YUI 2: Grids CSS (http://developer.yahoo.com/yui/grids)
• Logic CSS (http://code.google.com/p/logicss)
• Elastic CSS (http://elasticss.com)
Popular CSS Frameworks
www.techsailor.com
Blueprint cuts down development time with:
an easy-to-use grid system
sensible typography
useful plugins (including stylesheet for printing)
Introducing Our Favorite Framework
www.techsailor.com
• Optimal browser-compatibility
• Speedy development
• Consistency
• Normalize code/class base
• Clean, well-structured and complete code
What we like about the Blueprint CSS Framework
www.techsailor.com
• Bloated source code
• Lack of freedom
• Can not be framed semantically
• Ignoring the uniqueness of the projects
What we dislike about the Blueprint CSS Framework
www.mint.com www.stay.com
Sites Using Blueprint
http://www.webvanta.com/ http://www.cca.qc.ca/en
Sites Using Blueprint
The generator tool helps in generating more flexible
versions of Blueprint. You can generate 8,10, 16 or 24
columns based on your design.
Generator: http://bgg.kematzy.com
Blueprint Generator
Blueprint cheat sheet gives you
the reference with all the
important class names that you
can print out and keep on your
desk.
Download:
http://blueprintcss.org/media/Bl
ueprintV0.8byGJMS.pdf
Blueprint Cheatsheet
http://www.youtube.com/watch?v=KHLrEF9tHjw
http://www.youtube.com/watch?v=54II5G4rxAo
Video Tutorials: CSS Layout with Blueprint
www.techsailor.com
Thank you
Singapore
156 Macpherson Road, #08-01, Singapore 348528Tel: +65 6748 8522Fax: +65 6836 4963
Malaysia
Lot 2-1A, Support Services, Technology Park Malaysia, Lebuhraya Puchong-Sg. Besi, Bukit Jalil, 57000 Kuala Lumpur, Malaysia. Tel: +60 38994 1750 / 1751Fax: +60 32297 5390
China
中国广东省广州市天河区黄埔大道中207 号海景花园 C 栋 1801邮编： 510665 电话 : +86 020 8567 0704传真 : +86 020 8567 0704
Email : [email protected] Website : http://www.techsailor.com
