Recently tweeted that a restaurant website should have a text menu on the front page. Figured that if I can bitch about it on social media, the least I could do is to try and implement it too.
... and it seems like if a tweet catches on, it's a great place to crowdsource UX requirements.
Big sources: Toasts... and then a million other tiny sources that looks like spam if I list them all down 😭
| -var legend = [{ alpha:"N", food:"Nuts"},{ alpha:"E", food:"Eggs"},{ alpha:"W", food:"Wheat"},{ alpha:"D", food:"Dairy"},{ alpha:"S", food:"Seafood"}] | |
| - var mains = [{ name:"Red and Blue", price:"7", description:"Avocado, hot sauce, blue cheese. Spicy.", image:"toast-1.png", calories:"300", wheat:'true', dairy:'true'}, { name:"Cool, cool, cool", price:"6.5", description:"Avocado, cucumbers, scallions, various spices.", image:"toast-2.png", calories:"220", wheat:'true'}, { name:"Avocotta", price:"7.5", description:"Avocado, ricotta, eggs, lemon zest, olive oil, basil.", image:"toast-3.png", calories:"318", egg:'true', wheat:'true', dairy:'true'}, { name:"The One True Pair", price:"10.5", description:"Avocado, smoked salmon, tomatoes, capers, onions, goat cheese.", image:"toast-4.png", calories:"320", wheat:'true', dairy:'true', sea:'true'}, { name:"Fishing Trip", price:"9", description:"Avocado, anchovies, lemon juice, paprika.", image:"toast-8.png", calories:"296", wheat:'true', dairy:'true', sea:'true'}, { name:"Sweet & Spicy Like Me", price:"7.5", description:"Avocado, mangoes, lemon juice, chili powder, mint.", image:"toast-5.png", calories:"240", wheat:'true'}, { name:"Orange You Glad", price:"7", description:"Avocado, citrus fruit of the week, mint, feta cheese.", image:"toast-6.png", calories:"238", wheat:'true', dairy:'true'}, { name:"White & Green Circles", price:"6.5", description:"Avocado, radishes, baby peas, lemon juice, basil.", image:"toast-7.png", calories:"220",wheat:'true'} ] | |
| - var sides = [{ name:"French Fries", price:"4", description:"With ketchup or mayo", calories:"425", nut:'true', egg:'true', wheat:'true', dairy:'true', sea:'true'},{ name:"Sweet Potato Fries", price:"5.5", description:"With chipotle lime dip", calories:"510", nut:'true', egg:'true', wheat:'true', dairy:'true', sea:'true'},{ name:"Hummus & Tortilla Chips", price:"5.5", calories:"333"}] | |
| - var tarts = [{ name:"Matcha Mint", price:"6.5", description:"Item here item here item here", image:"tart-1.png", calories:"215"},{ name:"Chocoberry", price:"6", description:"Item here item here item here", image:"tart-2.png", calories:"380"},{ name:"Lemon Meringue", price:"6", description:"Item here item here item here", image:"tart-3.png", calories:"299"},{ name:"Plain Cheese Tart", price:"5", description:"Item here item here item here", image:"tart-4.png", calories:"289"},] | |
| - var latte = [{ name:"Chai Latte", price:"9", image:"cof-chai.png", calories:"132", nut:'true'},{ name:"Turmeric Latte", price:"9", image:"cof-turmeric.png", calories:"131", nut:'true'},{ name:"Hojicha Latte", price:"9", image:"cof-hojicha.png", calories:"140", nut:'true'},{ name:"Rose Latte", price:"9", image:"cof-rose.png", calories:"156", nut:'true'},{ name:"Red Velvet Latte", price:"9", image:"cof-redvelvet.png", calories:"450", nut:'true'},{ name:"Matcha Latte", price:"9", image:"cof-matcha.png", calories:"225", nut:'true'},{ name:"Sweet Potato Latte", price:"9", image:"cof-ubi.png", calories:"445", nut:'true'},{ name:"Charcoal Latte", price:"9", image:"cof-charcoal.png", calories:"450", nut:'true'},] | |
| header | |
| .name | |
| each val in ['T','O','A','S','T','Y'] | |
| span= val | |
| .opening-hours | |
| | Open Sunday to Friday 10AM - 8PM. Closed on Mondays. | |
| .location | |
| p 880 Toast Street, Avocado, NY 23511 | |
| p (233) 323 3444 | |
| .special-announcements | |
| main | |
| .legend | |
| each val in legend | |
| .legend__item | |
| i= val.alpha | |
| span= val.food | |
| .menu | |
| .mains | |
| h3 Avocado Toasts | |
| each val in mains | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/"+val.image) | |
| .item__desc | |
| .item__name= val.name | |
| .item__description= val.description | |
| .item__price= '$' + val.price | |
| .item__calories= val.calories | |
| | calories | |
| .item__allergens | |
| if val.nut | |
| span.allergen.nuts N | |
| if val.egg | |
| span.allergen.eggs E | |
| if val.wheat | |
| span.allergen.wheat W | |
| if val.dairy | |
| span.allergen.dairy D | |
| if val.sea | |
| span.allergen.sea S | |
| .sides | |
| h3 Sides | |
| each val in sides | |
| .item | |
| .item__desc | |
| .item__name= val.name | |
| if val.description | |
| .item__description= val.description | |
| .item__price= '$' + val.price | |
| .item__calories= val.calories | |
| | calories | |
| .tarts | |
| h3 Tarts | |
| each val in tarts | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/"+val.image) | |
| .item__desc | |
| .item__name= val.name | |
| .item__price= '$' + val.price | |
| .item__calories= val.calories | |
| | calories | |
| .latte | |
| h3 Special Lattes | |
| each val in latte | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/"+val.image) | |
| .item__desc | |
| .item__name= val.name | |
| .item__price= '$' + val.price | |
| .item__calories= val.calories | |
| | calories | |
| a.menu-download Download the menu | |
| footer | |
| p Let's get toasty on social media! | |
| a.social-item(href="https://twitter.com/meowlivia_" target="_blank") | |
| i.icon-social-twitter.icons | |
| a.social-item(href="https://github.com/oliviale" target="_blank") | |
| i.icon-social-github.icons | |
| a.social-item(href="https://dribbble.com/oliviale" target="_blank") | |
| i.icon-social-dribbble.icons | |
| // PSA: this is the basic things your restaurant website needs, not your 100-year history and mission for Year 3000 |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
| $beige: #e2dccc; | |
| $yellow: #dec022; | |
| $black: #04110f; | |
| $teal: #00acc1; | |
| $purple: #6f7bd0; | |
| $pink: #f2bfc6; | |
| $orange-light: #e5a98e; | |
| $orange: #e88c30; | |
| $blue: #4030e8; | |
| $red: #931a47; | |
| $red-2: #ca3101; | |
| $green: #009688; | |
| $main: $yellow; | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: $beige; | |
| font-family: "Mclaren", sans-serif; | |
| font-weight: 300; | |
| line-height: 1.2; | |
| padding: 1rem; | |
| @media (min-width: 880px) { | |
| padding: 3rem; | |
| } | |
| } | |
| h3 { | |
| font-family: Syncopate, sans-serif; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| background: $main; | |
| color: $black; | |
| letter-spacing: 0.2rem; | |
| padding: 1rem 2rem; | |
| text-transform: uppercase; | |
| box-shadow: 0 -6px 0 0 #333, 0 6px 0 0 #333; | |
| @media (min-width: 550px) { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| span.allergen { | |
| display: inline-block; | |
| width: 30px; | |
| height: 30px; | |
| text-align: center; | |
| font: 800 0.8rem Syncopate; | |
| padding-top: 7px; | |
| color: $beige; | |
| background: $teal; | |
| border: 2px solid $black; | |
| margin-top: 4px; | |
| &:not(:first-child) { | |
| margin-left: -2px; | |
| } | |
| &.eggs { | |
| background: $red; | |
| } | |
| &.wheat { | |
| background: $orange; | |
| } | |
| &.dairy { | |
| background: $green; | |
| } | |
| &.sea { | |
| background: $red-2; | |
| } | |
| } | |
| header { | |
| display: grid; | |
| grid-template-columns: min-content 2fr 1.3fr; | |
| } | |
| .name { | |
| display: grid; | |
| grid: repeat(2, 60px) / repeat(3, 60px); | |
| font-family: Syncopate, sans-serif; | |
| font-weight: 700; | |
| font-size: 2.5rem; | |
| border: 6px solid $black; | |
| border-width: 6px 6px 0; | |
| color: $yellow; | |
| text-align: center; | |
| grid-column: span 3; | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| $black 0px, | |
| $black 5px, | |
| transparent 5px, | |
| transparent 10px | |
| ); | |
| @media(min-width: 550px) { | |
| grid-column: span 1; | |
| background: $black; | |
| } | |
| span { | |
| padding-top: 0.5rem; | |
| &:nth-child(odd) { | |
| background: $black; | |
| } | |
| &:nth-child(even) { | |
| background: $yellow; | |
| color: $black; | |
| } | |
| } | |
| } | |
| .opening-hours { | |
| border: 6px solid $black; | |
| border-width: 6px 6px 0 ; | |
| grid-column: span 3; | |
| background: $purple; | |
| color: $beige; | |
| padding: 1rem 1.6rem; | |
| font-size: 1.3rem; | |
| text-transform: uppercase; | |
| display: flex; | |
| align-items: center; | |
| line-height: 1.1; | |
| @media (min-width: 550px) { | |
| grid-column: span 2; | |
| border-width: 6px 6px 0 0; | |
| } | |
| @media (min-width: 880px) { | |
| grid-column: span 1; | |
| border-width: 6px 0 0; | |
| } | |
| @media (min-width: 1200px) { | |
| font-size: 1.8rem; | |
| } | |
| } | |
| .location { | |
| border: 6px solid $black; | |
| border-width: 6px 6px 0; | |
| grid-column: 1 / -1; | |
| background: $black; | |
| color: $beige; | |
| text-align: center; | |
| padding: 0.6rem; | |
| p:nth-child(1) { | |
| font-family: Syncopate; | |
| font-weight: 700; | |
| font-size: 1.4rem; | |
| margin: 0 0.5rem 0.5rem; | |
| @media (min-width: 1400px) { | |
| font-size: 1.6rem; | |
| } | |
| } | |
| @media (min-width: 550px) { | |
| display: flex; | |
| align-items: center; | |
| p:nth-child(1) { | |
| margin: 0.3rem 0.8rem 0.3rem 0.3rem; | |
| } | |
| } | |
| @media (min-width: 880px) { | |
| grid-column: 3 / 4; | |
| } | |
| } | |
| .legend { | |
| border: 6px solid $black; | |
| border-width: 0 6px 6px 0; | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| transparent 0px, | |
| transparent 5px, | |
| $black 5px, | |
| $black 10px | |
| ); | |
| @media (min-width: 880px) { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| border-width: 6px; | |
| } | |
| &__item { | |
| display: block; | |
| background: $beige; | |
| span { | |
| display: inline-block; | |
| height: 40px; | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| padding: 12px 20px 12px 12px; | |
| flex: auto; | |
| } | |
| i { | |
| display: inline-block; | |
| width: 55px; | |
| height: 45px; | |
| font-family: Syncopate, sans-serif; | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| text-align: center; | |
| line-height: 2.3; | |
| color: $beige; | |
| border: 6px solid $black; | |
| border-width: 0 6px; | |
| } | |
| &:nth-child(1) { | |
| color: $teal; | |
| i { | |
| background: $teal; | |
| } | |
| } | |
| &:nth-child(2) { | |
| color: $red; | |
| i { | |
| background: $red; | |
| } | |
| } | |
| &:nth-child(3) { | |
| color: $orange; | |
| i { | |
| background: $orange; | |
| } | |
| } | |
| &:nth-child(4) { | |
| color: $green; | |
| i { | |
| background: $green; | |
| } | |
| } | |
| &:nth-child(5) { | |
| color: $red-2; | |
| i { | |
| background: $red-2; | |
| } | |
| } | |
| } | |
| } | |
| .item { | |
| &__desc { | |
| display: grid; | |
| grid-template-columns: 1fr min-content; | |
| grid-column-gap: 8px; | |
| } | |
| &__price { | |
| grid-row: 1; | |
| grid-column: 2; | |
| } | |
| &__description, | |
| &__calories { | |
| margin-bottom: 0.3rem; | |
| font-family: Open Sans; | |
| color: #444; | |
| font-size: 1.1rem; | |
| } | |
| &__description, | |
| &__allergens { | |
| grid-column: 1 / -1; | |
| } | |
| &__name, | |
| &__price { | |
| text-transform: uppercase; | |
| font-size: 1.2rem; | |
| margin: 0.5rem 0; | |
| } | |
| } | |
| .menu { | |
| border: 6px solid $black; | |
| border-width: 0 6px 6px; | |
| @media (min-width: 1200px) { | |
| display: grid; | |
| width: 100%; | |
| grid-template-columns: repeat(4, 1fr); | |
| align-items: stretch; | |
| .mains { | |
| grid-column: 1 / 4; | |
| grid-row: 1 / 4; | |
| border-right: 6px solid $black; | |
| } | |
| .sides { | |
| grid-column: 4 / 5; | |
| } | |
| .latte { | |
| grid-column: 1 / 4; | |
| grid-row: 4 / 6; | |
| border: 6px solid $black; | |
| border-width: 6px 6px 0 0; | |
| } | |
| .tarts { | |
| grid-column: 4 / 5; | |
| grid-row: 3 / 5; | |
| align-self: flex-start; | |
| } | |
| .menu-download { | |
| grid-column: 4 / 5; | |
| grid-row: 5 / 6; | |
| } | |
| } | |
| } | |
| .mains { | |
| @media (min-width: 550px) { | |
| grid-template-columns: repeat(2, 1fr); | |
| display: grid; | |
| grid-auto-flow: dense; | |
| align-items: flex-start; | |
| h3 { | |
| grid-column: 1 / -1; | |
| } | |
| } | |
| @media (min-width: 1500px) { | |
| grid-column-gap: 20px; | |
| } | |
| .item { | |
| position: relative; | |
| padding: 2rem 2rem; | |
| @media (min-width: 1200px) { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem; | |
| &__desc { | |
| flex: 1; | |
| padding-left: 1rem; | |
| } | |
| &__image { | |
| flex: 0 0 180px; | |
| } | |
| } | |
| &__desc { | |
| } | |
| &__image { | |
| position: relative; | |
| max-width: 200px; | |
| img { | |
| width: 100%; | |
| } | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 50%; | |
| height: 100%; | |
| background: linear-gradient(to right, transparent, $beige); | |
| } | |
| } | |
| } | |
| } | |
| .sides { | |
| padding-bottom: 1rem; | |
| .item { | |
| padding: 1rem 2rem; | |
| } | |
| h3 { | |
| margin-bottom: 0.8rem; | |
| } | |
| } | |
| .tarts { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-around; | |
| padding-bottom: 1.5rem; | |
| h3 { | |
| width: 100%; | |
| margin-bottom: 1rem; | |
| } | |
| .item { | |
| flex: 1 1 50%; | |
| min-width: 16em; | |
| padding: 0.5rem 2rem; | |
| &__image { | |
| text-align: center; | |
| } | |
| img { | |
| max-width: 170px; | |
| } | |
| &__name, | |
| &__price { | |
| margin-top: 1rem; | |
| } | |
| } | |
| } | |
| .latte { | |
| display: grid; | |
| grid-column-gap: 20px; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| padding: 1rem; | |
| h3 { | |
| grid-column: 1 / -1; | |
| margin-bottom: 1rem; | |
| transform: translate(-1rem, -1rem); | |
| width: calc(100% + 2rem); | |
| } | |
| @media (min-width: 1500px) { | |
| grid-template-columns: min-content repeat(4, 1fr); | |
| h3 { | |
| grid-column: 1 / 2; | |
| grid-row: 1 / 3; | |
| writing-mode: tb-rl; | |
| transform: translate(-1rem, -1rem) rotate(-180deg); | |
| width: calc(100%); | |
| height: calc(100% + 2rem); | |
| padding-bottom: 2rem; | |
| box-shadow: 0 -6px 0 0 #333, 0 6px 0 0 #333, -6px 0 0 0 $black; | |
| text-align: right; | |
| } | |
| } | |
| .item { | |
| padding: 1rem; | |
| &__image { | |
| text-align: center; | |
| } | |
| img { | |
| width: 90%; | |
| max-width: 160px; | |
| } | |
| &__name, | |
| &__price { | |
| margin-top: 1rem; | |
| } | |
| } | |
| } | |
| .menu-download { | |
| display: block; | |
| background: $purple; | |
| text-align: center; | |
| color: $beige; | |
| text-transform: uppercase; | |
| font-family: Syncopate; | |
| font-weight: 700; | |
| padding: 1rem; | |
| cursor: pointer; | |
| font-size: 1.6rem; | |
| box-shadow: 0 0 0 6px $black; | |
| &:hover { | |
| background: $black; | |
| } | |
| @media(min-width: 550px) { | |
| padding: 2rem 4rem; | |
| } | |
| } | |
| footer { | |
| margin-top: 1rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| font-size: 1.3rem; | |
| align-items: center; | |
| justify-content: space-between; | |
| display: flex; | |
| flex-wrap: wrap; | |
| p { | |
| width: 100%; | |
| margin-bottom: 1rem; | |
| } | |
| .social-item { | |
| display: inline-block; | |
| i { | |
| display: inline-block; | |
| width: 60px; | |
| height: 60px; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| text-align: center; | |
| line-height: 2; | |
| color: $beige; | |
| } | |
| &:nth-child(2) { | |
| color: $teal; | |
| i { | |
| background: $teal; | |
| } | |
| } | |
| &:nth-child(3) { | |
| color: $green; | |
| i { | |
| background: $green; | |
| } | |
| } | |
| &:nth-child(4) { | |
| color: $red-2; | |
| i { | |
| background: $red-2; | |
| } | |
| } | |
| &:hover { | |
| color: $black; | |
| i { | |
| background: $black; | |
| } | |
| } | |
| } | |
| @media (min-width: 550px) { | |
| font-size: 1.5rem; | |
| p { | |
| flex: 1; | |
| margin: 0; | |
| } | |
| } | |
| @media (min-width: 880px) { | |
| .social-item { | |
| margin: 0rem 0 0 1rem; | |
| } | |
| } | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" /> |