Skip to content

Instantly share code, notes, and snippets.

@jelaniwoods
Created May 27, 2022 18:09
Show Gist options
  • Save jelaniwoods/68d1253f3f8d8f167ffbe9f345d43dff to your computer and use it in GitHub Desktop.
Save jelaniwoods/68d1253f3f8d8f167ffbe9f345d43dff to your computer and use it in GitHub Desktop.
  • 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment