Creating an Enterprise CSS Framework: A Salesforce UX Case Study
Blueprint css framework
-
Upload
techsailor -
Category
Technology
-
view
112 -
download
1
description
Transcript of Blueprint css framework
![Page 1: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/1.jpg)
www.techsailor.comEngaging Your Customers Online
by Ashley Hau
7 Dec 2010
Blueprint CSS Framework
![Page 2: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/2.jpg)
www.techsailor.com
What are CSS Frameworks?
![Page 3: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/3.jpg)
www.techsailor.com
CSS frameworks are meant to
speed up and simplify the development
of complex websites.
Tool to Aid Web Development
![Page 4: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/4.jpg)
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
![Page 5: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/5.jpg)
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
![Page 6: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/6.jpg)
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
![Page 7: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/7.jpg)
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
![Page 8: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/8.jpg)
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
![Page 9: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/9.jpg)
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
![Page 10: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/10.jpg)
www.mint.com www.stay.com
Sites Using Blueprint
![Page 11: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/11.jpg)
http://www.webvanta.com/ http://www.cca.qc.ca/en
Sites Using Blueprint
![Page 12: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/12.jpg)
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
![Page 13: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/13.jpg)
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
![Page 14: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/14.jpg)
http://www.youtube.com/watch?v=KHLrEF9tHjw
http://www.youtube.com/watch?v=54II5G4rxAo
Video Tutorials: CSS Layout with Blueprint
![Page 15: Blueprint css framework](https://reader036.fdocuments.in/reader036/viewer/2022062617/54c828cc4a795923758b464c/html5/thumbnails/15.jpg)
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