08-Beer-Layout Jeremy Glover

[Jeremy-Glover]

• [x] Create a new Issue with these tasks!
• [x] Use the git cli to initialize a new project
• [x] Checkpoint: Created and committed boilerplate as listed in the Gitbook
• [x] Use the hub cli to create a repository called 08-beer-layout
• [x] Use the git cli to create a branch called develop
• [x] In Github, open a PR from develop into master
• [x] Setup build tools
  • [x] Use NPM to install (with --save-dev flag) broccoli, broccoli-sas, and broccoli-merge-trees
  • [x] Use Bower to install font-awesome and normalize-css
  • [x] Set up SASS to compile sass/app.scss and allow importing from bower_components/font-awesome/scss and bower_components/normalize-css
  • [x] Import font-awesome in app.scss and set the font_path variable
  • [x] Merge public directory with directories from the bower version of font-awesome
• [x] Checkpoint: Create the markup to represent one item from the layout
  • [x] Markup: Bottle
  • [x] Markup: Title
  • [x] Markup: Price
  • [x] Markup: Description
  • [x] Markup: Button
  • [x] Complete: Commit & Push public/index.html
• [x] Checkpoint: Finish the markup
  • [x] Duplicate item markup to make full grid
  • [x] Change content for new items
  • [x] Images
  • [x] Titles
  • [x] Description
  • [x] Complete: Commit & Push public/index.html
• [x] Add styles for page
  • [x] Checkpoint: Style the Layout of the site on desktop
  • [x] Layout Grid 3 wide
  • [x] Style: Bottle
  • [x] Style: Title
  • [x] Style: Price
  • [x] Style: Description
  • [x] Style: Button
  • [x] Complete: Commit & Push sass directory
  • [x] Checkpoint: Style the Layout of the site on phone
  • [x] Layout Grid 1 wide
  • [x] Adjust sizes as needed to compensate for screen size
  • [x] Complete: Commit & Push sass directory
  • [x] Checkpoint: Style the Layout of the site on tablet
  • [x] Layout List items wide
  • [x] Adjust sizes as needed to compensate for screen sizes
  • [x] Complete: Commit & Push sass directory

[Jeremy-Glover]

https://github.com/Jeremy-Glover/08-Beer-Layout/pull/1

[rtablada]

@Jeremy-Glover looking good, but on tablet size, use display: flex and align-items to vertically center all of the items cross-wise within the .three-up elements.

[Jeremy-Glover]

@rtablada I adjusted tablet size with display:flex and align-items to center everything and slightly adjusted the mobile size to make it more responsive. should be good.