First prototype in my UI to Code repo https://github.com/emoreno911/UI-to-Code. Credit for the design to https://dribbble.com/sergiipetakh
Created
April 10, 2017 07:37
-
-
Save junioryauricasa/f1e9c246e5cbdcc63236e326321efd04 to your computer and use it in GitHub Desktop.
UI to Code #1: Juuce App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<div class="sidebar"> | |
<div class="brand">JUUCE</div> | |
<div class="menu"> | |
<ul> | |
<li><i class="glyph-icon flaticon-user"></i> Profile</li> | |
<li><i class="glyph-icon flaticon-like"></i> Wish list</li> | |
<li><i class="glyph-icon flaticon-like-1"></i> Why buy juuce?</li> | |
<li><i class="glyph-icon flaticon-vision"></i> About us</li> | |
<li><i class="glyph-icon flaticon-mail"></i> Contact us</li> | |
<li><i class="glyph-icon flaticon-info"></i> FAQ</li> | |
</ul> | |
</div> | |
</div> | |
<div class="content no-animation" data-pos="0"> | |
<div> | |
<div id="openMenu"> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div id="shoppingIcon"> | |
<span>4</span> | |
<i class="glyph-icon flaticon-cart"></i> | |
</div> | |
<div class="header"> | |
<h3>Cold pressed juices</h3> | |
<small>shop category</small> | |
</div> | |
<div class="triangle"></div> | |
<div class="product"> | |
<div class="slider__dots"> | |
<a href="#" class="slider__dot" data-pos="0"></a> | |
<a href="#" class="slider__dot" data-pos="1"></a> | |
<a href="#" class="slider__dot" data-pos="2"></a> | |
<a href="#" class="slider__indicator"></a> | |
</div> | |
</div> | |
<div class="price"> | |
<div><span>€ 3.00</span></div> | |
<div><a href="#">Add to cart</a></div> | |
</div> | |
<div class="slider" data-pos="0"> | |
<div class="slider__slides"> | |
<div class="slider__slide"> | |
<div class="picture"> | |
<span>ster</span><img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle3x.png?raw=true"> | |
<div class="buttons"> | |
<div class="glyph-icon flaticon-like"></div> | |
<div class="glyph-icon flaticon-arrows"></div> | |
<div class="glyph-icon flaticon-share"></div> | |
</div> | |
</div> | |
<div class="title"> | |
<h3>Booster</h3><small><span>✔</span> In Stock</small> | |
<div class="dropdown"> | |
<div class="front"> 250 ml </div> | |
<div class="back"> | |
<ul> | |
<li>250 ml</li> | |
<li>500 ml</li> | |
<li>1 lt</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div> | |
</div> | |
<div class="slider__slide"> | |
<div class="picture"> | |
<span>Fuel</span> <img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle2x.png?raw=true"> | |
<div class="buttons"> | |
<div class="glyph-icon flaticon-like"></div> | |
<div class="glyph-icon flaticon-arrows"></div> | |
<div class="glyph-icon flaticon-share"></div> | |
</div> | |
</div> | |
<div class="title"> | |
<h3>Rocket Fuel</h3><small><span>✔</span> In Stock</small> | |
<div class="dropdown"> | |
<div class="front"> 250 ml </div> | |
<div class="back"> | |
<ul> | |
<li>250 ml</li> | |
<li>500 ml</li> | |
<li>1 lt</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div> | |
</div> | |
<div class="slider__slide"> | |
<div class="picture"> | |
<span>Red</span><img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle1x.png?raw=true"> | |
<div class="buttons"> | |
<div class="glyph-icon flaticon-like"></div> | |
<div class="glyph-icon flaticon-arrows"></div> | |
<div class="glyph-icon flaticon-share"></div> | |
</div> | |
</div> | |
<div class="title"> | |
<h3>Big Red</h3><small><span>✔</span> In Stock</small> | |
<div class="dropdown"> | |
<div class="front"> 250 ml </div> | |
<div class="back"> | |
<ul> | |
<li>250 ml</li> | |
<li>500 ml</li> | |
<li>1 lt</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** https://github.com/emoreno911/UI-to-Code/tree/master/juuce_app **/ | |
'use strict'; | |
var dots = 3; | |
var contentElem = document.querySelector('.content'); | |
var dotElems = document.querySelectorAll('.slider__dot'); | |
var indicatorElem = document.querySelector('.slider__indicator'); | |
Array.prototype.forEach.call(dotElems, function (dotElem) { | |
dotElem.addEventListener('click', function (e) { | |
var currentPos = parseInt(contentElem.getAttribute('data-pos')); | |
var newPos = parseInt(dotElem.getAttribute('data-pos')); | |
var newDirection = newPos > currentPos ? 'right' : 'left'; | |
var currentDirection = newPos < currentPos ? 'right' : 'left'; | |
indicatorElem.classList.remove('slider__indicator--' + currentDirection); | |
indicatorElem.classList.add('slider__indicator--' + newDirection); | |
contentElem.setAttribute('data-pos', newPos); | |
}); | |
}); | |
// Hammer.js for touch gestures | |
var hammertime = new Hammer(contentElem); | |
// listen to touch events... | |
hammertime.on("swipeleft swiperight", function(evt) { | |
var currentPos = parseInt(contentElem.getAttribute('data-pos')), | |
newPos; | |
if(evt.type == 'swipeleft') | |
newPos = (currentPos + 1 > 2)? currentPos : currentPos + 1; | |
else if (evt.type == 'swiperight') | |
newPos = (currentPos - 1 < 0)? currentPos : currentPos - 1; | |
if(newPos != currentPos) { | |
var newDirection = newPos > currentPos ? 'right' : 'left'; | |
var currentDirection = newPos < currentPos ? 'right' : 'left'; | |
indicatorElem.classList.remove('slider__indicator--' + currentDirection); | |
indicatorElem.classList.add('slider__indicator--' + newDirection); | |
contentElem.setAttribute('data-pos', newPos); | |
} | |
}); | |
/** Events **/ | |
$('#openMenu').on('click', function(evt) { | |
$('.content') | |
.removeClass('no-animation') //disable initial animation | |
.toggleClass('shrink'); | |
}); | |
$('.buttons > div').on('click', function(evt) { | |
$(this).toggleClass('selected'); | |
}); | |
$(".dropdown").on("click", function(){ | |
$(this).toggleClass("flip"); | |
}) | |
$(".back ul li").on("click", function(){ | |
var val = $(this).text(); | |
$(this).closest('.dropdown').find('.front').text(val); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/domtastic/0.12/domtastic.min.js"></script> | |
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.slider { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
} | |
.slider__slides { | |
position: relative; | |
width: 300%; | |
height: 100%; | |
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1); | |
transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1); | |
transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1); | |
transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1); | |
will-change: transform; | |
} | |
.slider__slide { | |
float: left; | |
width: 33.33333%; | |
height: 100%; | |
} | |
.slider__dots { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
position: absolute; | |
bottom: 1.5em; | |
left: 50%; | |
top: 70px; | |
-webkit-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.slider__dot, .slider__indicator { | |
display: block; | |
margin: 0 0.5em; | |
width: 0.5em; | |
height: 0.5em; | |
background: rgba(255, 255, 255, 0.5); | |
border-radius: 100px; | |
} | |
.slider__indicator { | |
position: absolute; | |
background: white; | |
/*width: auto;*/ | |
} | |
.slider__indicator--left { | |
-webkit-transition: left 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15); | |
transition: left 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15); | |
} | |
.slider__indicator--right { | |
-webkit-transition: left 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15); | |
transition: left 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15); | |
} | |
.content[data-pos="0"] .slider__slides { | |
-webkit-transform: translateX(0%); | |
transform: translateX(0%); | |
} | |
.content[data-pos="1"] .slider__slides { | |
-webkit-transform: translateX(-33.33333%); | |
transform: translateX(-33.33333%); | |
} | |
.content[data-pos="2"] .slider__slides { | |
-webkit-transform: translateX(-66.66667%); | |
transform: translateX(-66.66667%); | |
} | |
.content[data-pos="0"] .slider__indicator { | |
left: 0em; | |
right: 4em; | |
} | |
.content[data-pos="1"] .slider__indicator { | |
left: 1.5em; | |
right: 2em; | |
} | |
.content[data-pos="2"] .slider__indicator { | |
left: 3em; | |
right: 0em; | |
} | |
.content[data-pos="0"] .slider__slide:nth-child(1) .picture span { | |
left: -160px; | |
} | |
.content[data-pos="1"] .slider__slide:nth-child(2) .picture span { | |
left: -140px; | |
} | |
.content[data-pos="2"] .slider__slide:nth-child(3) .picture span { | |
left: -85px; | |
} | |
.content[data-pos="0"] .slider__slide:nth-child(1) .buttons { | |
display: block; | |
} | |
.content[data-pos="1"] .slider__slide:nth-child(2) .buttons { | |
display: block; | |
} | |
.content[data-pos="2"] .slider__slide:nth-child(3) .buttons { | |
display: block; | |
} | |
.content[data-pos="0"] .slider__slide:nth-child(1) .dropdown { | |
display: block; | |
} | |
.content[data-pos="1"] .slider__slide:nth-child(2) .dropdown { | |
display: block; | |
} | |
.content[data-pos="2"] .slider__slide:nth-child(3) .dropdown { | |
display: block; | |
} | |
.content[data-pos="0"] > div { | |
background-color: rgba(255, 87, 34,.65); | |
} | |
.content[data-pos="1"] > div { | |
background-color: rgba(13,148,20,.4); | |
} | |
.content[data-pos="2"] > div { | |
background-color: rgba(209,27,27,.65); | |
} | |
body { | |
font-family: 'Open Sans', sans-serif; | |
overflow-x: hidden; | |
background-color: #f3f3f3; | |
} | |
.wrapper { | |
background-color: #f8f8f8; | |
display: flex; | |
max-height: 736px; | |
height: 736px; | |
width: 414px; | |
margin: 10px auto; | |
/*border: solid 2px #aaa;*/ | |
box-shadow: 0px 2px 15px #ddd; | |
border-radius: 3px; | |
} | |
.sidebar { | |
max-height: 736px; | |
height: 736px; | |
width: 250px; | |
position: absolute; | |
padding: 0 10px; | |
} | |
.sidebar .brand { | |
font-family: 'Nunito', sans-serif; | |
font-weight: 900; | |
font-size: 3.5em; | |
/*http://www.cssmatic.com/es/gradient-generator*/ | |
background: linear-gradient(to right, | |
rgba(209,27,27,1) 0%, | |
rgba(209,27,27,1) 1%, | |
rgba(248,80,50,1) 20%, | |
rgba(13,148,20,1) 50%, | |
rgba(230,202,60,1) 77%, | |
rgba(230,143,12,1) 100%); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
position: absolute; | |
top: 10px; | |
left: 30px; | |
} | |
.sidebar .menu { | |
height: 100%; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.sidebar .menu ul { | |
padding-left: 0; | |
} | |
.sidebar .menu .glyph-icon { | |
font-weight: 700; | |
margin-right: 20px; | |
vertical-align: middle; | |
} | |
.sidebar .menu .flaticon-mail { | |
font-weight: 400; | |
} | |
.sidebar ul li { | |
color: #777; | |
line-height: 3; | |
list-style: none; | |
font-family: 'Montserrat', sans-serif; | |
} | |
.content { | |
flex: 1; | |
transform: translateX(0) scale(1); | |
animation: shrink-off .4s ease-out; | |
background: linear-gradient(to right, #666 0%, #FFEB3B 100%); | |
} | |
.content.shrink { | |
box-shadow: -2px 2px 20px #ddd; | |
transform: translateX(250px) scale(.95); | |
animation: shrink-on .4s ease-out; | |
} | |
.content > div { | |
position: relative; | |
transition: background-color 0.8s ease; | |
} | |
.content #openMenu { | |
cursor: pointer; | |
position: absolute; | |
top: 10px; | |
left: 10px; | |
} | |
.content #openMenu > div { | |
width: 20px; | |
border: solid #fff 1px; | |
margin-bottom: 5px; | |
} | |
.content #openMenu > div:nth-child(2) { width: 15px; } | |
.content #shoppingIcon { | |
color: #fff; | |
position: absolute; | |
top: 10px; | |
right: -10px; | |
transform: rotateY(180deg); | |
} | |
.content .flaticon-cart:before { font-size: 24px } | |
.content #shoppingIcon span { | |
color: #fff; | |
background-color: red; | |
padding: 1px 6px; | |
border-radius: 50px; | |
font-size: 12px; | |
font-weight: 600; | |
position: absolute; | |
left: 35px; | |
top: -4px; | |
transform: rotateY(180deg); | |
} | |
.content .header { | |
color: #fff; | |
height: 100px; | |
text-align: center; | |
padding-top: 5px; | |
letter-spacing: 1; | |
} | |
.content .header h3 { | |
margin: 0; | |
margin-bottom: 3px; | |
font-weight: 100; | |
} | |
.content .triangle { | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-width: 100px 414px 0 0; | |
border-color: transparent #fff transparent transparent; | |
margin-top: -1px; | |
} | |
.content .product { | |
height: 448px; | |
width: 100%; | |
background-color: #fff; | |
} | |
.slider { position: absolute; top: 100px; height: 554px; } | |
.picture { position: relative; margin: 0 15px; } | |
.picture img { height: 362px; margin-left: 70px; position: relative; } | |
.title { position: relative; color: #777; margin: 0 15px; } | |
.title h3 { margin-bottom: 5px; font-family: 'Montserrat', sans-serif; letter-spacing: 1; } | |
.title span { color: green; font-weight: bold; margin-right: 5px; } | |
.description { color: #999; margin: 15px 15px; font-size: 14px; } | |
.picture span { | |
position: absolute; | |
top: 160px; | |
left: -20px; | |
font-size: 10em; | |
color: #ededed; | |
font-family: "Montserrat", sans-serif; | |
font-weight: 900; | |
letter-spacing: 4; | |
text-transform: uppercase; | |
transition: all .8s ease-in-out; | |
} | |
.buttons { | |
display: none; | |
position: absolute; | |
top: 70px; | |
right: 20px; | |
animation: scale-up .8s ease; | |
} | |
.buttons > div { | |
margin-bottom: 30px; | |
border: solid 2px #ddd; | |
padding: 10px 12px 10px 10px; | |
border-radius: 50px; | |
cursor: pointer; | |
} | |
.buttons > div:before { | |
font-size: 25px; | |
font-weight: 600; | |
color: #888; | |
margin-left: 0; | |
transition: color .6s ease-out; | |
} | |
.buttons > div:nth-child(1).selected { border-color: #F44336; } | |
.buttons > div:nth-child(1).selected:before { color: #F44336; } | |
.buttons > div:nth-child(2).selected { border-color: #2196F3; } | |
.buttons > div:nth-child(2).selected:before { color: #2196F3; } | |
.content .price { | |
height: 80px; | |
width: 100%; | |
background-color: #fff; | |
border-top: solid #ddd 4px; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.content .price > div { | |
margin: 0 20px; | |
} | |
.content .price span { | |
font-size: 30px; | |
color: #00BC34; | |
} | |
.content .price a { | |
font-size: 20px; | |
background-color: #00BC34; | |
color: #fff; | |
text-decoration: none; | |
padding: 8px 35px; | |
border-radius: 50px; | |
} | |
.content .price a:hover { background-color: #00a52e; } | |
.no-animation { | |
animation: none !important; | |
} | |
@keyframes shrink-on { | |
0% { | |
transform: translateX(0) scale(1); | |
} | |
70% { | |
transform: translateX(250px) scale(.9); | |
} | |
100% { | |
transform: translateX(250px) scale(.95); | |
} | |
} | |
@keyframes shrink-off { | |
0% { | |
transform: translateX(250px) scale(.95); | |
} | |
70% { | |
transform: translateX(-10px) scale(1.05); | |
} | |
100% { | |
transform: translateX(0) scale(1); | |
} | |
} | |
@keyframes scale-up { | |
0% { | |
transform: scale(0); | |
} | |
70% { | |
transform: scale(1.05); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
.slider .dropdown { | |
position: absolute; | |
top: 0; | |
right: 20px; | |
font-family: "Montserrat", sans-serif; | |
animation: scale-up .8s ease; | |
} | |
/** Dropdown **/ | |
.dropdown { | |
display: none; | |
position: relative; | |
width: 100px; | |
color: #fff; | |
transform-style: preserve-3d; | |
perspective: 1500; | |
} | |
.dropdown.flip .front { | |
transform: rotateX(180deg); | |
} | |
.dropdown.flip .back { | |
transform: rotateX(0deg); | |
} | |
.dropdown .front, | |
.dropdown .back { | |
transition: all 0.4s ease; | |
} | |
.dropdown .front { | |
height: 40px; | |
width: 90px; | |
backface-visibility: hidden; | |
cursor: pointer; | |
border: solid 2px #ddd; | |
border-radius: 50px; | |
line-height: 40px; | |
text-align: center; | |
color: #888; | |
margin-left: 5px; | |
} | |
.dropdown .front:after { | |
content: ""; | |
position: relative; | |
top: 15px; | |
left: 4px; | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 5px solid #888; | |
} | |
.dropdown .back { | |
transform: rotateX(180deg); | |
backface-visibility: hidden; | |
} | |
.dropdown ul { | |
position: absolute; | |
top: -120px; | |
z-index: 1; | |
width: calc(100% - 40px); | |
padding: 20px; | |
background-color: #fff; | |
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); | |
list-style: none; | |
border-radius: 3px; | |
} | |
.dropdown ul li { | |
color: #888; | |
line-height: 30px; | |
cursor: pointer; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Nunito:700" rel="stylesheet" /> | |
<link href="https://dl.dropbox.com/s/tb1hmq8sr5gh1mu/flaticon.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment