twitter-bootstrap

Entry Level

EP24 – Twitter Bootstrap 101

28 Dec , 2012  

Play

This week Arlo and Ryan attempt to break down Twitter Bootstrap and how it may be helpful. Stick around and listen in on us talk about how cooland useful we think Twitter Bootstrap really is.

Download: Direct Link

Itunes: itunes link

What problem does it solve?

  • Coming up with CSS for:
    • great fonts just make things look beautiful
    • aligning my junk or fluid layouts
    • consistent css [resetting css often]
    • want to learn sass, but eehhh…
    • great for devs who suck at web design
  • Layouts Generation (scaffolding)
    • math math math….grrr
    • lack of math above 12
    • row based/grid based
    • nesting
    • html 5 friendly
  • Generic Tools
    • Javascript stuff
    • CSS stuff
  • Easy to modify/update customize

What does it have to offer?

  • Fonts:
    • Typography
    • hero units
    • headers and sub-headers
  • Grids:
    • 12 columns. 940px. Anything under 767px stacks vertically.
  • CSS
    • code blocks
    • tables
    • forms
    • buttons
    • images
    • icons
    • hero unit
  • Scripting
    • Navigational menus
    • tabs
    • drop downs
    • tooltips
    • carousels
    • transitions
    • tooltip
    • button
    • alert
    • typeahead
    • modals
  • website components/modules
    • inclusion of media like images, thumbnails
    • button groups
    • nav bar generation
    • breadcrumb generation
    • labels/badges
    • alerts
    • progress bars
    • wells
    • close icon
    • disabled state
  • cool stuff
    • helper classes

How do I use it?

  • Include CSS/JS files into your page
  • simple layout
  • CLASSES CLASSES CLASSES
    • grid system: span, offsetting, nesting, etc..
    • Responsive: visible-??? or hidden-???. phone, tablet, desktop

, ,


Leave a Reply

Your email address will not be published. Required fields are marked *