http://anjan.com.np Anjan Bhattrai http://facebook.com/udansoftware

1. CSS Frameworks and rapid
prototyping
Anjan Bhattrai

2. Agenda
 CSS Frameworks
 Choosing Right Framework
 Working with Grid System
 Rapid Prototyping

3. Framework?
 pre-written CSS files which can be applied to
HTML by using the class names defined in the
framework.
 number of Frameworks you can freely download
and use in your projects.
 you will need a fair bit of CSS knowledge, some
patience and a fair bit of time to get yourself
familiar with the layout.

4. Framework?
Pros Cons
 Increased productivity  Learning curve
 Contestant Code  Excess code
 Easier collaboration
 Fewer Browser Bugs
 Standards-Based

5. Some CSS Frameworks
Twitter bootstrap
http://twitter.github.com/bootstrap/
Foundation
http://foundation.zurb.com/
960.Gs
http://960.gs/
BluePrint
http://blueprintcss.org/

6. Choosing Right Framework
 Project requirements
 Fluid Grid System, Responsiveness
 Offer More than just a grid [Eg. Predefined styles for
topography, tables, buttons, navigation, forms, element, etc]
 Great Documentation, Managed regularly by the community
or creator
 Open Source

7. Working with Grid System

8. Grid Implementation
<div class="container_12">
<div class="grid_12">
<p>940px</p>
</div>
<div class="clear"></div>
<div class="grid_7">
<p>540px</p>
</div>
<div class="grid_5">
<p>380px</p>
</div>
<div class="clear"></div>
</div>

9. Rapid Prototyping
 Typography [h1,h2..h6]
 Code [<code>, <pre>]
 Tables [<table class=“table table-striped”>]
 Forms [<form class=“form-search”>, input]
 Buttons [<button class=“btn btn-primary”>]
 Images [<img src="..." class="img-rounded">]
 Icons

10. Components
 Dozens of reusable components built to
provide navigation, alerts, popovers, and
more.
 Dropdowns, Button groups, Button
dropdowns, Navs, Navbar, Breadcrumbs, P
agination, Labels and
badges, Typography, Thumbnails, Alerts, Pr
ogress bars, Misc

11. JavaScript
 Transitions , Modal, Dropdown, Scrollspy
 Tab, Tooltip, Popover, Alert
 Button, Collapse, Carousel
 etc

12. Bootstrap
 Sleek, intuitive, and powerful front-end
framework for faster and easier web
development.
 Docs Discussed :
http://twitter.github.com/bootstrap/getting-started.html

13. Thank You !
Anjan Bhattrai
anjan.bhattrai@udansoftware.com.np
http://anjan.com.np
http://facebook.com/udansoftware