A pure CSS wireframe example.
Jump to a Section:
Overview
I discovered a similar browser image on Codepen, but didn't like how the CSS was written. I changed the original code from HTML/CSS to Slim/SCSS and rewrote the code to be a little more flexible by creating variables and making everything inside .wireframe a percentage.
Portfolio x
Portfolio
Goals
To create CSS style wireframe that is flexible. You can easily move items around within the wireframe template. I thought it may also be fun in the future to integrate real tabs inside the little browser image so you could interact with it.
Tools and Skills
- Sass
- Codepen
- Slim
Slim
div.wireframe
div.w-dgray-wrap-browser
div.w-b-red
div.w-b-lgray
div.w-b-green
div.w-b-mgray-tab Portfolio x
div.w-mgray-wrap-url
div.w-lgray-wrap-maincontent
div.w-half
div.w-logo Portfolio
div.w-mgray-rectangle
div.w-mgray-rectangle
div.w-mgray-rectangle
div.w-mgray-rectangle
d.w-mgray-half-button Featured
div.w-half
div.w-dgray-wrap-circle
div.w-white-wrap-footercontent
div.w-mgray-circle
div.w-mgray-circle
div.w-mgray-circle
SASS
html {
height: 100%;
}
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #FEF2D8;
}
.wireframe {
position: relative;
/** NEED it smaller? change these:**/
width: 500px;
height: 625px;
margin-top: 30%; /**** Remove this margin its just for codepen****/
[class^="w-"] {
float: left;
display: block;
}
[class*="wrap"] {
width: 100% !important;
}
[class*="half"] {
width: 40% !important;
padding: 1% 5%;
height: 100%;
[class*="w-"] {
width: 95%;
clear: both;
margin: 5px;
padding: 2% 5%;
}
[class*="wrap"] {
width: 80% !important;
height: 80% !important;
}
}
[class*="white"] {
background: #fff;
}
[class*="green"] {
background: #47cf73; /**green**/
}
[class*="lgray"] {
background: #eee;
}
[class*="mgray"] {
background: #ccc;
}
[class*="dgray"] {
background: #444;
}
[class*="red"] {
background: #FF3C41;
}
[class*="browser"], [class*="url"] {
height: 4%;
animation: before-start 1.5s alternate ease-in-out;
}
[class*="w-b-"] {
margin: 5px;
width: 5px;
height: 5px;
border-radius: 10px;
}
[class*="tab"]{
padding: 2px 5px 13px 10px;
width: 15%;
border-radius: 5px 5px 0 0;
font-size: .7rem;
}
[class*="content"] {
height: 30%
}
[class*="main"] {
animation: before-start 1s alternate ease-in-out;
}
[class*="footer"] {
border-radius: 0px 0px 10px 10px;
animation: before-start .8s alternate ease-in-out;
}
[class*="logo"] {
margin: 5px 10px;
}
[class*="button"] {
color: #fff;
max-height: 15%;
}
[class*="circle"] {
height: 60%;
width: 25%;
margin: 4%;
border-radius: 65%;
&::after {
height: 25%;
border-radius: 50px;
content:"";
}
}
[class*="rectangle"] {
height: 1px;
border: 1px solid #eee;
}
}
@keyframes before-start {
0% {transform: translateY(-50px)}
100% {transform: translateY(0px)}
}
No comments:
Post a Comment