Responsive App Layout
How do I make an responsive app layout?
4 breakpoints: tiny(iPhone-ish), small (iPad-ish), medium (small desktop-ish), and large (large desktop-ish). What is a responsive app layout? How do you make a responsive app layout? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.
Responsive App Layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive App Layout</title> <meta content='width=device-width,initial-scale=1,user-scalable=no' name='viewport'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://christiannaths.com/share/Flaticons/flaticons-stroke.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { margin: 0; font-family: "Proxima Nova"; font-size: 100%; color: #59b8d8;
}
ul { margin: 0; padding: 0; list-style: none;
}
a { color: #fff; text-decoration: none;
}
#application-nav { position: fixed; top: 0; bottom: 0; left: 0; width: 80%; z-index: 1; background: #333;
}
#context-nav, #context-main { position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-transition: -webkit-transform 300ms ease;
}
#context-nav { background: whitesmoke; z-index: 3; border-right: 1px solid #59b8d8;
}
#context-main { background: whitesmoke; z-index: 2; -webkit-transform: translateX(100%) translateZ(0);
}
#context-nav header, #context-main header { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-height: 48px; -webkit-align-items: center; -ms-align-items: center; -moz-align-items: center; -o-align-items: center; align-items: center; border-bottom: 1px solid #59b8d8;
}
#context-nav header section, #context-main header section { -webkit-box-flex: 0 1 40px; -moz-box-flex: 0 1 40px; -webkit-flex: 0 1 40px; -ms-flex: 0 1 40px; flex: 0 1 40px; font-size: 2em; text-align: center;
}
#context-nav header section:nth-child(2), #context-main header section:nth-child(2) { -webkit-box-flex: 1 1; -moz-box-flex: 1 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1;
}
#context-nav header ul, #context-nav header article, #context-main header ul, #context-main header article { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: rgba(0, 0, 0, 0.2);
}
body.application-nav-view #context-nav { -webkit-transform: translateX(80%) translateY(0) translateZ(0);
}
body.application-nav-view #context-main { -webkit-transform: translateX(80%) translateY(0) translateZ(0);
}
body.context-main-view #context-nav { -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
}
body.context-main-view #context-main { -webkit-transform: translateX(0) translateY(0) translateZ(0);
}
@media (min-width: 600px) { #context-nav { width: 260px; } #context-main { -webkit-transform: translateX(260px) translateY(0) translateZ(0); width: 100%; } body.application-nav-view #context-nav { -webkit-transform: translateX(200px) translateY(0) translateZ(0); } body.application-nav-view #context-main { -webkit-transform: translateX(460px) translateY(0) translateZ(0); } body.context-main-view #context-nav { -webkit-transform: translateX(-260px) translateY(0) translateZ(0); } body.context-main-view #context-main { -webkit-transform: translateX(0) translateY(0) translateZ(0); }
}
@media (min-width: 1200px) { #context-nav { -webkit-transform: translateX(0) translateY(0) translateZ(0); width: 25%; } #context-main { -webkit-transform: translateX(0) translateY(0) translateZ(0); left: 25%; width: 75%; } body.application-nav-view #context-nav, body.application-nav-view #context-main { -webkit-transform: translateX(200px) translateZ(0); } body.context-main-view #context-nav, body.context-main-view #context-main { -webkit-transform: translateX(0) translateZ(0); }
}
@media (min-width: 1400px) { #context-nav { margin-left: 160px; left: 0; width: 20%; } #context-main { left: 20%; padding-left: 160px; width: 80%; } body.application-nav-view #context-nav, body.application-nav-view #context-main { -webkit-transform: translateX(0) translateZ(0); }
}
.toggle-application-nav, .toggle-context-main { cursor: pointer;
}
#context-main .toggle-context-main { visibility: hidden;
}
body.context-main-view #context-main .toggle-context-main { visibility: visible;
}
@media (min-width: 1200px) { body.context-main-view #context-main .toggle-context-main { visibility: hidden; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='application-nav'></div>
<div id='context-nav'> <header> <section class='toggle-application-nav'>❖</section> <section>2</section> <section class='toggle-context-main'>☞</section> </header> <ul></ul>
</div>
<div id='context-main'> <header> <section class='toggle-context-main'>☜</section> <section>2</section> <section>3</section> </header> <article></article>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive App Layout - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { margin: 0; font-family: "Proxima Nova"; font-size: 100%; color: #59b8d8;
}
ul { margin: 0; padding: 0; list-style: none;
}
a { color: #fff; text-decoration: none;
}
#application-nav { position: fixed; top: 0; bottom: 0; left: 0; width: 80%; z-index: 1; background: #333;
}
#context-nav, #context-main { position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-transition: -webkit-transform 300ms ease;
}
#context-nav { background: whitesmoke; z-index: 3; border-right: 1px solid #59b8d8;
}
#context-main { background: whitesmoke; z-index: 2; -webkit-transform: translateX(100%) translateZ(0);
}
#context-nav header, #context-main header { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-height: 48px; -webkit-align-items: center; -ms-align-items: center; -moz-align-items: center; -o-align-items: center; align-items: center; border-bottom: 1px solid #59b8d8;
}
#context-nav header section, #context-main header section { -webkit-box-flex: 0 1 40px; -moz-box-flex: 0 1 40px; -webkit-flex: 0 1 40px; -ms-flex: 0 1 40px; flex: 0 1 40px; font-size: 2em; text-align: center;
}
#context-nav header section:nth-child(2), #context-main header section:nth-child(2) { -webkit-box-flex: 1 1; -moz-box-flex: 1 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1;
}
#context-nav header ul, #context-nav header article, #context-main header ul, #context-main header article { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: rgba(0, 0, 0, 0.2);
}
body.application-nav-view #context-nav { -webkit-transform: translateX(80%) translateY(0) translateZ(0);
}
body.application-nav-view #context-main { -webkit-transform: translateX(80%) translateY(0) translateZ(0);
}
body.context-main-view #context-nav { -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
}
body.context-main-view #context-main { -webkit-transform: translateX(0) translateY(0) translateZ(0);
}
@media (min-width: 600px) { #context-nav { width: 260px; } #context-main { -webkit-transform: translateX(260px) translateY(0) translateZ(0); width: 100%; } body.application-nav-view #context-nav { -webkit-transform: translateX(200px) translateY(0) translateZ(0); } body.application-nav-view #context-main { -webkit-transform: translateX(460px) translateY(0) translateZ(0); } body.context-main-view #context-nav { -webkit-transform: translateX(-260px) translateY(0) translateZ(0); } body.context-main-view #context-main { -webkit-transform: translateX(0) translateY(0) translateZ(0); }
}
@media (min-width: 1200px) { #context-nav { -webkit-transform: translateX(0) translateY(0) translateZ(0); width: 25%; } #context-main { -webkit-transform: translateX(0) translateY(0) translateZ(0); left: 25%; width: 75%; } body.application-nav-view #context-nav, body.application-nav-view #context-main { -webkit-transform: translateX(200px) translateZ(0); } body.context-main-view #context-nav, body.context-main-view #context-main { -webkit-transform: translateX(0) translateZ(0); }
}
@media (min-width: 1400px) { #context-nav { margin-left: 160px; left: 0; width: 20%; } #context-main { left: 20%; padding-left: 160px; width: 80%; } body.application-nav-view #context-nav, body.application-nav-view #context-main { -webkit-transform: translateX(0) translateZ(0); }
}
.toggle-application-nav, .toggle-context-main { cursor: pointer;
}
#context-main .toggle-context-main { visibility: hidden;
}
body.context-main-view #context-main .toggle-context-main { visibility: visible;
}
@media (min-width: 1200px) { body.context-main-view #context-main .toggle-context-main { visibility: hidden; }
}
Responsive App Layout - Script Codes JS Codes
(function() { var clickHandler, ref, indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; clickHandler = (ref = indexOf.call(document.documentElement, 'ontouchstart') >= 0) != null ? ref : { "touchstart": "click" }; $('.toggle-application-nav').on("touchend click", function(event) { event.preventDefault(); $('body').removeClass('context-main-view'); return $('body').toggleClass('application-nav-view'); }); $('.toggle-context-main').on("touchend click", function(event) { event.preventDefault(); $('body').removeClass('application-nav-view'); return $('body').toggleClass('context-main-view'); }); $('#context-nav li').on("touchend click", function(event) { event.preventDefault(); $('body').removeClass('application-nav-view'); return $('body').addClass('context-main-view'); });
}).call(this);
Developer | Christian Naths |
Username | christiannaths |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 5,661 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Collection-bootstrap | 2,843 Kb |
MicroHero Logo Animation | 5,290 Kb |
Off-Canvas Responsive Layout | 52,985 Kb |
Responsive Admin Panel 2 | 7,677 Kb |
Checkbox Switch | 4,665 Kb |
Next Game Widget | 7,025 Kb |
Upcoming Event Stream | 5,355 Kb |
Activity Timeline | 5,624 Kb |
CSS-Only Inputs | 4,678 Kb |
Responsive Admin Panel | 4,254 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
About Mazano | Kiti | 2,585 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!