Building with Bootstrap

A quick tour of some of the features of Twitter Bootstrap.

Transcript

1. Building with Bootstrap Bryce Kerley Design Miami, 6/4/2012 Monday, June 4, 12
2. Links All Links http://bit.ly/dm-bs-links Monday, June 4, 12
3. Links These Slides http://bit.ly/dm-bs Monday, June 4, 12
4. Import Bootstrap CSS Bootstrap http://bitly.com/K8G35s Monday, June 4, 12
5. Monday, June 4, 12 Web pages sucked before CSS.
6. Monday, June 4, 12
7. Monday, June 4, 12
8. Monday, June 4, 12
9. CSS Framework Complex applications Standard features Programmer CSS Monday, June 4, 12
10. CSS Frameworks Monday, June 4, 12
11. CSS Frameworks Blueprint 960 BlueTrip 52 Gridless Perkins Less Framework 4 Gravity HTML5 Boilerplate G5 Baseline SproutCore Lime Cartagen inuitCSS YUI Emastics YAML OOCSS Elastic CSS Golden Grid Sparkl Atatonic Lovely CSS 52Framework Markercss Tripoli SenCSS 1kb jQuery UI Elements Hartija Formy LogicCSS Monday, June 4, 12
12. CSS Frameworks Monday, June 4, 12
13. Monday, June 4, 12
14. Monday, June 4, 12 Built for and by nerds: Like you, we love building awesome products on the web.
15. Monday, June 4, 12 Styleguide docs: Designed first and foremost as a styleguide document, for best practices and examples
16. Monday, June 4, 12 Responsive design: fully responsive, scaled to a range of resolutions and devices
17. Twitter Bootstrap Modern Web Applications Monday, June 4, 12
18. Monday, June 4, 12
19. Monday, June 4, 12
20. Twitter Bootstrap Sane Defaults Monday, June 4, 12
21. Programmer Art Monday, June 4, 12
22. Two Methods 1. Import Bootstrap CSS 2. Import Bootstrap Sass/Less Monday, June 4, 12
23. Import Bootstrap CSS Download Bootstrap from http://twitter.github.com/bootstrap/ Monday, June 4, 12
24. Import Bootstrap CSS Make a project directory git init Monday, June 4, 12
25. Import Bootstrap CSS Decompress Bootstrap into Project Directory Monday, June 4, 12
26. Import Bootstrap CSS Decompress Bootstrap into Project Directory Monday, June 4, 12
27. Import Bootstrap CSS git add bootstrap git commit -m “bootstrapped” Monday, June 4, 12
28. Import Bootstrap CSS Create an index.html Monday, June 4, 12
29. Import Bootstrap CSS Create an index.html Monday, June 4, 12
30. Import Bootstrap CSS Create an index.html Monday, June 4, 12
31. Import Bootstrap CSS Build Page Commit Often Monday, June 4, 12
32. Monday, June 4, 12
33. Monday, June 4, 12
34. Monday, June 4, 12
35. Monday, June 4, 12
36. Monday, June 4, 12
37. Monday, June 4, 12
38. Monday, June 4, 12 This is tables but you have to do your own math.
39. Two Methods 1. Import Bootstrap CSS 2. Import Bootstrap Sass/Less Monday, June 4, 12
40. Static Site Framework Monday, June 4, 12
41. Static Site Framework Dear Design Miami Friends, I’m sorry I didn’t make a version of Charleston that does this. I got caught up in some of the details and needed to start over. Please accept my apology, Bryce Kerley Monday, June 4, 12
42. Let’s Just Use Rails •Bootstrap rocks for big applications •Frighteningly nice forms •Useful app components •Version that uses SASS Monday, June 4, 12
43. Use Rails Install Rails from http://bit.ly/brycerails Monday, June 4, 12
44. Use Rails rails new appname cd appname Monday, June 4, 12
45. Use Rails git init git add -A git commit -m “initial” Monday, June 4, 12
46. Use Rails Add to Gemfile: gem ‘bootstrap-sass’ Monday, June 4, 12
47. Use Rails bundle install git commit -m “added bootstrap” Gemfile* Monday, June 4, 12
48. Use Rails rails g scaffold species name:string rails g scaffold pet name:string species:references git add app db test config/routes.rb git commit -m “scaffolds” Monday, June 4, 12 Just some stuff so I have pages to test with
49. Use Rails rails server Monday, June 4, 12
50. Use Rails Monday, June 4, 12
51. Use Rails Monday, June 4, 12
52. Use Rails Monday, June 4, 12
53. Use Rails Monday, June 4, 12
54. A Bit About Assets Monday, June 4, 12
55. A Bit About Assets Rails 3.1 has an Asset Pipeline Monday, June 4, 12
56. A Bit About Assets Rails 3.1 has an Asset Pipeline http://bit.ly/LinwkR Monday, June 4, 12
57. A Bit About Assets Rails 3.1 has an Asset Pipeline http://bit.ly/LinwkR CSS and JavaScript for big apps get big Monday, June 4, 12
58. A Bit About Assets Rails 3.1 has an Asset Pipeline http://bit.ly/LinwkR CSS and JavaScript for big apps get big Image management gets complicated Monday, June 4, 12
59. Use Rails In app/assets/stylesheets: Rename “application.css” to “application.css.scss” Monday, June 4, 12
60. Use Rails In app/assets/stylesheets/application.css.scss Remove the big comment block @import "bootstrap" @import "scaffolds" @import "pets" @import "species" Monday, June 4, 12
61. Let’s Play! Monday, June 4, 12
62. A Bit About Assets Monday, June 4, 12