Skip to content
Garrett Lee Graham Anderson edited this page Feb 23, 2015 · 6 revisions

Welcome to the TIY-Catalog wiki!

  • A user can browse products so that users can see all the products.
    • A user can change categories so that the user can filter results.
  • A user can view products on our site so that a user can browse Etsy products (via API)
  • A user can view products on different size screens so that they can find the desired data easier depending on size.

Responsive Product Grid Layout

  • A user can view thumbnails so that they can view product, picture, and price. (L)
  • A user can choose options so that they can customize product. (L)
  • Layout can change so that users can view on different devices. (M)

rpgl Stretch

  • A user can specify from multiple options so that they can customize the order. (L)
  • A user can change picture so that they can see more product details. (L)

View mode switch --> products.html : Sam Kauffman, Carolina Powers, Garrett Graham

Gid layout

"user can toggle between a list view and grid view so the user can decide how they prefer to shop"

"in desktop view (md), a user that views products will see the grid display as three products per row and four columns per (each of the three column -> 3 x 4 )"

"in tablet view (sm), a user that views products will see the grid display as six rows by two columns: two products per row and six products per column."

"in mobilw view (xs), a user that views products will see the grid display as one large column, with one product per row

"for each product, the user will see the product image, product name, product price, product description, and a button that adds product to the shopping cart"

List Layout

"the user will see one product per row"

"for each product, the user will see the product image, product name, product price, product description, and a button that adds product to the shopping cart"

"in the mobile and tablet view, the user will find that the product desciption drops below the product image"

"in the mobile and tablet view, the user will find that the product price will move off to the right of the product image"

"when resizing the viewport, the user will notice that the text wraps and stacks within the box"