ad1-day-9.md

• Bootstrap Demo
  • At least half the class for lab—
  • we’ll see how far we can get
  • README
    • how can we make our app, look like this—
    • we haven’t learned it so far, to reduce how many things we learned
    • but the apps we’ve built have looked bad, how to make them look good
  • Start up server, landing page
    • w/ link to target
    • describe the layout and components
  • lookup RCAV
    • new syntax for routes
  • old way of doing CSS
    • define a file in public folder, body color red
    • link the css file in our view template
    • now we have to write a bunch of CSS to turn our starting point into the target
    • Now we have CSS Frameworks we can use instead
      • Open Source Style sheets
  • Installing Bootstrap
    • in public/css/
    • same basic syntax we learned
    • but there’s like SO much of it
  • instead of trying to read this line by line, there’s documentation you can read
    • Cheatsheet
    • with all the styles, components, layouts,
    • interactive components with JS
      • accordion
  • So in order to use this
    • first we have to link to Bootstrap
      • replace my_styles
      • notice immediately
        • sans-serif font
        • links have hover state
        • -> slides
  • What are the benefits of using Bootstrap?
    • Reboot
    • Layout (link to grid examples in README)
      • does this remind you of anything? the table element
      • now instead of miss-using the table element to layout a page
      • we use <div>s for everything
      • beauty of this is, when I resize my browser
      • the container resizes itself before the content overflows
      • and the cells stack vertically
    • Utility classes
      • example from full docs (shadows)
      • benefit of these are
        • we don’t have to write it
        • it promotes consistency across your app and the devs on your team
      • I use the spacing ones a lot, for margin and padding
    • Components
      • complicated groups of HTML elements
        • cards
        • carousels
        • navbars
    • JavaScript components
      • interactive components w/ animations like accordion, modals, dropdowns
      • look at navbar in the target
      • link in the README
        • copy it from the docs into my app
      • So try this out,
      • format document
      • drop down isn’t working—
      • so we need to include bootstrap’s JS
        • script tag
      • you can see how quickly our view templates grow in size now that we use bootstrap
        • why we didn’t learn it before
      • trail and error to get it to customize the content
        • make git commits
        • format
        • practice
    • Grid demo
      • look at the target
      • identify the structure of the page
        • assume 12 column grid
        • this is one row—
        • this is another row
        • this first row has 3 cells in it
        • the other row has 2 cells
      • Add row w/ three cells, numbers
      • Add row w/ 2 cells
      • Add cards in first row (format document)
        • use image from public folder
        • remove style attribute
        • pixel perfect responsive phone support for free
      • now we can embed our ruby content into the component
    • You might recognize these bootstrap components from all of the firstdraft tools, grades, ruby-gym, firstdraft
    • really empowering and fun to make your apps look nice
    • and bootstrap makes it not too difficult
  • Break
  • Design Resources
    • collection of some really nice readings/resources
    • typography, majority of content on the web is text, choosing fonts can really impact the UX
    • bootswatch free themes
      • add to target
    • paid themes
      • ~$50
      • more components
      • give example pages
    • bootstrap.build
      • demo
      • personal to your brand colors
    • CSS generators
    • quick link to assets
• I hope that’s empowering to know!
• We won’t grade on this at all,
  • but it’s really fun to make apps look nice

---

Wrap Up Slides

• Where we started—
  • a lot of you had never seen a line of code before—
  • so we had to learn a LOT in order to hack together ideas
    • Web Requests
    • Database Design
    • Querying
    • Cloud based, database backed software
  • (airbnb video)
    • can even style pretty closely w/ bootsrap
    • hopefully now this is more clear how the software you use works
    • you know the basics
• What do you think?
  • anything you still want to know how to do?

What do we do in AD2

• in AD2 we focus on prototyping
• things are functional, not necessarily pretty, performant, or secure
• So, in AD2 you learn more of the intricacies of Rails
  • how to write ruby like professional devs do
• We learn JS to make our webpages more interactive
• By the end, the goal is to be ready to charge money for the project
  • many students work on NVC projects