Lf layout
How do I make an lf layout?
What is a lf layout? How do you make a lf layout? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.
Lf layout Previews
Lf layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>lf layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ .-g-padding-large { padding: 3rem !important;
}
.-g-margin-large { margin: 3rem !important;
}
.-g-padding-medium { padding: 2rem !important;
}
.-g-margin-medium { margin: 2rem !important;
}
.-g-padding-small { padding: 1.5rem !important;
}
.-g-margin-small { margin: 1.5rem !important;
}
.-g-padding-xsmall { padding: 0.5rem !important;
}
.-g-margin-xsmall { margin: 0.5rem !important;
}
.-g-muted { opacity: .3;
}
* { box-sizing: border-box;
}
body, html { height: 100%;
}
html { font-size: 10px;
}
body { font-size: 1.4em; overflow: hidden;
}
.lf-main-wrapper { padding-top: 6rem; position: relative; background: #ececec; height: 100%; width: 100%;
}
.lf-main-wrapper.has-leftpanel .lf-sidepanel,
.lf-main-wrapper.has-rightpanel .lf-sidepanel { top: 6rem; transition: left 0.2s, right 0.2s, width 0.2s;
}
.lf-main-wrapper.has-leftpanel .lf-content,
.lf-main-wrapper.has-rightpanel .lf-content { transition: margin 0.2s;
}
.lf-main-wrapper.has-leftpanel .lf-content { margin-left: 32rem;
}
@media (max-width: 992px) { .lf-main-wrapper.has-leftpanel .lf-content { margin-left: 0; }
}
.lf-main-wrapper.has-rightpanel .lf-content { margin-right: 32rem;
}
@media (max-width: 992px) { .lf-main-wrapper.has-rightpanel .lf-content { margin-right: 0; }
}
.lf-main-wrapper.-left-collapsed .lf-sidepanel.-position-left { left: -32rem;
}
@media (max-width: 767px) { .lf-main-wrapper.-left-collapsed .lf-sidepanel.-position-left { left: -100%; }
}
.lf-main-wrapper.-left-collapsed .lf-content { margin-left: 0;
}
.lf-main-wrapper.-right-collapsed .lf-sidepanel.-position-right { right: -32rem;
}
@media (max-width: 767px) { .lf-main-wrapper.-right-collapsed .lf-sidepanel.-position-right { right: -100%; }
}
.lf-main-wrapper.-right-collapsed .lf-content { margin-right: 0;
}
.lf-main-wrapper.-right-overlay .lf-content { margin-right: 0;
}
.lf-main-wrapper.-left-overlay .lf-content { margin-left: 0;
}
.lf-header { background: #260F26; position: fixed; top: 0; width: 100%; height: 6rem; line-height: 6rem; z-index: 1000; color: white; overflow: hidden;
}
.lf-sidepanel { position: absolute; top: 0; bottom: 0; width: 32rem; background: #f8f8f8; z-index: 1000;
}
@media (max-width: 767px) { .lf-sidepanel { width: 100%; }
}
.lf-sidepanel.-position-left { left: 0;
}
.lf-sidepanel.-position-right { right: 0;
}
.lf-sidepanel__header { padding: 1.5rem; background: #86CB92; color: white;
}
.lf-content { position: relative; height: 100%;
}
.lf-content__scroller { overflow: auto;
}
.lf-content__footer { position: fixed; background: #260F26; width: 100%; padding: 1.5rem; color: white; bottom: 0;
}
.lf-panel { background: white; padding: 2rem;
}
.lf-panel.-size-small { width: 32rem;
}
.lf-tabs { list-style: none; padding: 0; margin: 0; display: flex;
}
.lf-tabs li { padding: 1.5rem;
}
.lf-tabs .is-active { border-top: 3px solid #404E7C; background: white;
}
.lf-page-title { background: #404E7C; color: white; padding: 2rem; margin: 0;
}
.lf-btn { color: white; background: none; border: none; outline: none; padding: 0 1rem; transition: all 0.2s;
}
.lf-btn:hover { background: rgba(255, 255, 255, 0.2);
}
.thumbnails { display: flex; flex-wrap: wrap;
}
.thumbnails .lf-panel { flex-grow: 1;
}
.sidepanel-logs { margin: 0; list-style: none; padding: 3rem; padding-bottom: 6rem; height: 100%; overflow: auto;
}
.sidepanel-logs li { background: #ececec; padding: 1.5rem; margin-bottom: 1rem; position: relative;
}
.sidepanel-logs li:before { content: ' '; display: block; width: 5rem; height: 5rem; background: #86CB92; opacity: .2; border-radius: 50%;
}
.sidepanel-logs li:after { position: absolute; top: 2rem; left: 8rem; width: 14rem; height: 4rem; display: block; opacity: .4; content: ''; background: white;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header class="lf-header"> <button class="lf-btn js-toggle-leftpanel">Left Panel</button> <button class="lf-btn js-toggle-header">Page Header</button> <button class="lf-btn js-toggle-footer">Footer</button> <button class="lf-btn js-toggle-rightpanel -g-muted">Right Panel</button> <label><input class="js-toggle-overlay" type="checkbox" /> Left panel always overlaied</label>
</header>
<div class="lf-main-wrapper has-leftpanel has-rightpanel -right-collapsed -right-overlay"> <aside class="lf-sidepanel -position-left"> <header class="lf-sidepanel__header"> Histroy log </header> <ul class="sidepanel-logs"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </aside> <main class="lf-content"> <div class="lf-content__header"> <ul class="lf-tabs"> <li class="is-active">Activities</li> <li>Statistics</li> <li>Reports</li> </ul> <p class="lf-page-title" contenteditable>Click me - I'm editable</p> </div> <div class="lf-content__scroller"> <div class="lf-content__body -g-padding-large"> <h1 class="-g-margin-medium">this will scroll</h1> <div class="thumbnails"> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> <div class="lf-panel -size-small -g-margin-small"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p> </div> </div> </div> </div> <div class="lf-content__footer" contenteditable> stuff here wont scrolll (also editabled) </div> </main> <aside class="lf-sidepanel -position-right"> <header class="lf-sidepanel__header"> Hidden right panel. </header> <ul class="sidepanel-logs"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </aside>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Lf layout - Script Codes CSS Codes
.-g-padding-large { padding: 3rem !important;
}
.-g-margin-large { margin: 3rem !important;
}
.-g-padding-medium { padding: 2rem !important;
}
.-g-margin-medium { margin: 2rem !important;
}
.-g-padding-small { padding: 1.5rem !important;
}
.-g-margin-small { margin: 1.5rem !important;
}
.-g-padding-xsmall { padding: 0.5rem !important;
}
.-g-margin-xsmall { margin: 0.5rem !important;
}
.-g-muted { opacity: .3;
}
* { box-sizing: border-box;
}
body, html { height: 100%;
}
html { font-size: 10px;
}
body { font-size: 1.4em; overflow: hidden;
}
.lf-main-wrapper { padding-top: 6rem; position: relative; background: #ececec; height: 100%; width: 100%;
}
.lf-main-wrapper.has-leftpanel .lf-sidepanel,
.lf-main-wrapper.has-rightpanel .lf-sidepanel { top: 6rem; transition: left 0.2s, right 0.2s, width 0.2s;
}
.lf-main-wrapper.has-leftpanel .lf-content,
.lf-main-wrapper.has-rightpanel .lf-content { transition: margin 0.2s;
}
.lf-main-wrapper.has-leftpanel .lf-content { margin-left: 32rem;
}
@media (max-width: 992px) { .lf-main-wrapper.has-leftpanel .lf-content { margin-left: 0; }
}
.lf-main-wrapper.has-rightpanel .lf-content { margin-right: 32rem;
}
@media (max-width: 992px) { .lf-main-wrapper.has-rightpanel .lf-content { margin-right: 0; }
}
.lf-main-wrapper.-left-collapsed .lf-sidepanel.-position-left { left: -32rem;
}
@media (max-width: 767px) { .lf-main-wrapper.-left-collapsed .lf-sidepanel.-position-left { left: -100%; }
}
.lf-main-wrapper.-left-collapsed .lf-content { margin-left: 0;
}
.lf-main-wrapper.-right-collapsed .lf-sidepanel.-position-right { right: -32rem;
}
@media (max-width: 767px) { .lf-main-wrapper.-right-collapsed .lf-sidepanel.-position-right { right: -100%; }
}
.lf-main-wrapper.-right-collapsed .lf-content { margin-right: 0;
}
.lf-main-wrapper.-right-overlay .lf-content { margin-right: 0;
}
.lf-main-wrapper.-left-overlay .lf-content { margin-left: 0;
}
.lf-header { background: #260F26; position: fixed; top: 0; width: 100%; height: 6rem; line-height: 6rem; z-index: 1000; color: white; overflow: hidden;
}
.lf-sidepanel { position: absolute; top: 0; bottom: 0; width: 32rem; background: #f8f8f8; z-index: 1000;
}
@media (max-width: 767px) { .lf-sidepanel { width: 100%; }
}
.lf-sidepanel.-position-left { left: 0;
}
.lf-sidepanel.-position-right { right: 0;
}
.lf-sidepanel__header { padding: 1.5rem; background: #86CB92; color: white;
}
.lf-content { position: relative; height: 100%;
}
.lf-content__scroller { overflow: auto;
}
.lf-content__footer { position: fixed; background: #260F26; width: 100%; padding: 1.5rem; color: white; bottom: 0;
}
.lf-panel { background: white; padding: 2rem;
}
.lf-panel.-size-small { width: 32rem;
}
.lf-tabs { list-style: none; padding: 0; margin: 0; display: flex;
}
.lf-tabs li { padding: 1.5rem;
}
.lf-tabs .is-active { border-top: 3px solid #404E7C; background: white;
}
.lf-page-title { background: #404E7C; color: white; padding: 2rem; margin: 0;
}
.lf-btn { color: white; background: none; border: none; outline: none; padding: 0 1rem; transition: all 0.2s;
}
.lf-btn:hover { background: rgba(255, 255, 255, 0.2);
}
.thumbnails { display: flex; flex-wrap: wrap;
}
.thumbnails .lf-panel { flex-grow: 1;
}
.sidepanel-logs { margin: 0; list-style: none; padding: 3rem; padding-bottom: 6rem; height: 100%; overflow: auto;
}
.sidepanel-logs li { background: #ececec; padding: 1.5rem; margin-bottom: 1rem; position: relative;
}
.sidepanel-logs li:before { content: ' '; display: block; width: 5rem; height: 5rem; background: #86CB92; opacity: .2; border-radius: 50%;
}
.sidepanel-logs li:after { position: absolute; top: 2rem; left: 8rem; width: 14rem; height: 4rem; display: block; opacity: .4; content: ''; background: white;
}
Lf layout - Script Codes JS Codes
'use strict';
var $mainWrapper = $('.lf-main-wrapper');
var $content = $('.lf-content');
var $contentScroller = $('.lf-content__scroller');
var $contentHeader = $('.lf-content__header');
var $contentFooter = $('.lf-content__footer');
// Main Content
// ==============
function resizeMainContainer() { var newHeight = $content.innerHeight(); if ($contentHeader.is(':visible')) newHeight = newHeight - $contentHeader.outerHeight(); if ($contentFooter.is(':visible')) newHeight = newHeight - $contentFooter.outerHeight(); if (resizeMainContainer.oldHeight !== newHeight) { resizeMainContainer.oldHeight = newHeight; $contentScroller.height(newHeight); } window.setTimeout(resizeMainContainer, 500);
}
resizeMainContainer();
// Header
// ==========
$('.js-toggle-header').click(function () { return $contentHeader.toggle();
});
$('.js-toggle-footer').click(function () { return $contentFooter.toggle();
});
$('.js-toggle-leftpanel').click(function () { return $mainWrapper.toggleClass('-left-collapsed');
});
$('.js-toggle-rightpanel').click(function () { return $mainWrapper.toggleClass('-right-collapsed');
});
$('.js-toggle-overlay').on('change', function () { return $mainWrapper.toggleClass('-left-overlay');
});
$('.lf-header .lf-btn').click(function () { $(this).toggleClass('-g-muted');
});
| Developer | Chris Hanson |
| Username | chrishanson |
| Uploaded | October 01, 2022 |
| Rating | 3 |
| Size | 6,820 Kb |
| Views | 20,240 |
Do you need developer help for Lf 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!
Chris Hanson (chrishanson) Script Codes
| Name | Size |
| Css spinner | 2,953 Kb |
| Ui-select with tree navigation | 5,321 Kb |
| Photo crop prototype | 19,337 Kb |
| Rotating 3d cube | 2,957 Kb |
| Custom branding | 9,737 Kb |
| UI Select Multiselect | 3,372 Kb |
| A Pen by Chris Hanson | 9,469 Kb |
| Nested rotating shapes | 2,646 Kb |
| Search bar | 5,899 Kb |
| Fireworks | 3,514 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Speech bubbles | Something | 1,547 Kb |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
| A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
| NAV WPMANAGER | Mstoic | 1,991 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| Board Site | IndianaLuft | 10,542 Kb |
| 3D Text in Sass | Bookcasey | 2,766 Kb |
| SCSS Unit Conversion | Jakob-e | 8,210 Kb |
| Awesome | Samarthpd | 2,901 Kb |
| A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Do you want hide your ip address?
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!