- 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
- first we have to link to Bootstrap
- 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
- complicated groups of HTML elements
- 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
- 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?
- 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