CSS framework

928 views

Published on

http://anjan.com.np
Anjan Bhattrai

http://facebook.com/udansoftware

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
928
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS framework

  1. 1. CSS Frameworks and rapid prototyping Anjan Bhattrai
  2. 2. Agenda CSS Frameworks Choosing Right Framework Working with Grid System Rapid Prototyping
  3. 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. 4. Framework?Pros Cons Increased productivity  Learning curve Contestant Code  Excess code Easier collaboration Fewer Browser Bugs Standards-Based
  5. 5. Some CSS FrameworksTwitter bootstraphttp://twitter.github.com/bootstrap/Foundationhttp://foundation.zurb.com/960.Gshttp://960.gs/BluePrinthttp://blueprintcss.org/
  6. 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. 7. Working with Grid System
  8. 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. 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. 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. 11. JavaScript Transitions , Modal, Dropdown, Scrollspy Tab, Tooltip, Popover, Alert Button, Collapse, Carousel etc
  12. 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. 13. Thank You !Anjan Bhattraianjan.bhattrai@udansoftware.com.nphttp://anjan.com.nphttp://facebook.com/udansoftware

×