Rapid prototyping front end libraries provide skeleton code for CSS, HTML, and JavaScript that developers can use for common UI elements in a project. Two popular options are Bootstrap and Foundation. Both provide a grid system, styles for forms, buttons, tables and other common patterns. They also include modal windows, image grids, drop down menus and other pre-built components. The main differences are that Bootstrap has a more polished, product-like appearance with transitions while Foundation provides a more raw foundation for customization and extension.

1. Rapid prototyping
front end libraries
Michał Taberski
Poznań Ruby User Group 26.10.2011

2. What is it?
Skeleton of CSS, HTML, and JS code you will probably need at
your project
examples
reset.css
common well known UI design patterns
basic form styling
basic JS features plugins

3. Who is playing this game?
There are two players
Bootstrap (by Twitter)
Foundation (by Zurb)

4. bootstrap
by
http://twitter.github.com/bootstrap/

5. foundation
by
http://foundation.zurb.com/

6. I hope you noticed,
I switched ZURB and Twitter
logo to check your attention!

7. so... what is common for both
Grid
form, buttons, table etc. styles
modal window
image girds
popular UI patterns already done
drop down menu, horizontal menu, pagination, info, alert box
free for commercial usage

8. are there any significant differences?
BOOTSTRAP: more CSS3 with sweetie transitions, looks more
like a ready product
FOUNDATION: raw, not as beauty as bootstrap, but...
is a “foundation” for page, prepared to be extended by the
final graphics, custom style
you won`t need to write once again front end code for
production version
prepared for mobile browsers

9. What do you think?
Discussion time...

10. Thanks...
@michaltaberski