Responsive App Layout

Size
5,661 Kb
Views
14,168

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 Previews

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);
Responsive App Layout - Script Codes
Responsive App Layout - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 3
Size 5,661 Kb
Views 14,168
Do you need developer help for Responsive App Layout?

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!

Christian Naths (christiannaths) Script Codes
Create amazing SEO content with AI!

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!