Page layout experiment
How do I make an page layout experiment?
What is a page layout experiment? How do you make a page layout experiment? This script and codes were developed by Kenan Yusuf on 06 December 2022, Tuesday.
Page layout experiment - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page layout experiment</title> <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400|Source+Sans+Pro:400,300,500,600' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="page js-page"> <div class="layout js-layout"> <div class="layout__drag-bar js-layout-handle"> <div class="material-icons">drag_handle</div> </div> <div class="layout__row"> <div class="layout__column layout__column--main js-column"> <div class="widget js-widget"> <div class="widget__toolbar js-widget-handle"> <div class="widget__name">Page heading</div> <div class="widget__actions widget__actions--main"> <div class="action js-widget-visibility"> <div class="material-icons icon--widget-visibility"></div> </div> <div class="action js-widget-edit"> <div class="material-icons icon--widget-edit"></div> </div> </div> <div class="widget__actions widget__actions--edit"> <div class="action js-widget-confirm"> <div class="material-icons icon--widget-confirm"></div> </div> <div class="action js-widget-cancel"> <div class="material-icons icon--widget-cancel"></div> </div> </div> </div> <div class="widget__content"> <div class="widget__preview"> <div class="edit-area js-edit-area">Latest news</div> </div> </div> </div> <div class="widget js-widget"> <div class="widget__toolbar js-widget-handle"> <div class="widget__name">Standfirst</div> <div class="widget__actions widget__actions--main"> <div class="action js-widget-visibility"> <div class="material-icons icon--widget-visibility"></div> </div> <div class="action js-widget-edit"> <div class="material-icons icon--widget-edit"></div> </div> </div> <div class="widget__actions widget__actions--edit"> <div class="action js-widget-confirm"> <div class="material-icons icon--widget-confirm"></div> </div> <div class="action js-widget-cancel"> <div class="material-icons icon--widget-cancel"></div> </div> </div> </div> <div class="widget__content"> <div class="widget__preview"> <div class="edit-area js-edit-area">The latest in tech, tailored for you.</div> </div> </div> </div> </div> <div class="layout__column layout__column--sidebar js-column"> <div class="widget js-widget"> <div class="widget__toolbar js-widget-handle"> <div class="widget__name">Login</div> <div class="widget__actions widget__actions--main"> <div class="action js-widget-visibility"> <div class="material-icons icon--widget-visibility"></div> </div> <div class="action js-widget-edit"> <div class="material-icons icon--widget-edit"></div> </div> </div> <div class="widget__actions widget__actions--edit"> <div class="action js-widget-confirm"> <div class="material-icons icon--widget-confirm"></div> </div> <div class="action js-widget-cancel"> <div class="material-icons icon--widget-cancel"></div> </div> </div> </div> <div class="widget__content"> <div class="widget__preview">User login/register form</div> </div> </div> </div> </div> <div class="layout__toolbar"> <div class="layout__actions"> <div class="action js-layout-visibility"> <div class="material-icons icon--layout-visibility"></div> </div> <div class="action js-delete"> <div class="material-icons icon--delete"></div> </div> </div> </div> </div> <div class="layout js-layout"> <div class="layout__drag-bar js-layout-handle"> <div class="material-icons">drag_handle</div> </div> <div class="layout__row"> <div class="layout__column layout__column--main js-column"> <div class="widget js-widget"> <div class="widget__toolbar js-widget-handle"> <div class="widget__name">Text</div> <div class="widget__actions widget__actions--main"> <div class="action js-widget-visibility"> <div class="material-icons icon--widget-visibility"></div> </div> <div class="action js-widget-edit"> <div class="material-icons icon--widget-edit"></div> </div> </div> <div class="widget__actions widget__actions--edit"> <div class="action js-widget-confirm"> <div class="material-icons icon--widget-confirm"></div> </div> <div class="action js-widget-cancel"> <div class="material-icons icon--widget-cancel"></div> </div> </div> </div> <div class="widget__content"> <div class="widget__preview"> <div class="edit-area js-edit-area">Aenean sodales, elit sed dapibus blandit, risus justo semper sapien, eget vulputate felis urna malesuada libero. Donec erat augue, porttitor a fringilla vitae, tempus quis enim.</div> </div> </div> </div> <div class="widget js-widget"> <div class="widget__toolbar js-widget-handle"> <div class="widget__name">Footer</div> <div class="widget__actions widget__actions--main"> <div class="action js-widget-visibility"> <div class="material-icons icon--widget-visibility"></div> </div> <div class="action js-widget-edit"> <div class="material-icons icon--widget-edit"></div> </div> </div> <div class="widget__actions widget__actions--edit"> <div class="action js-widget-confirm"> <div class="material-icons icon--widget-confirm"></div> </div> <div class="action js-widget-cancel"> <div class="material-icons icon--widget-cancel"></div> </div> </div> </div> <div class="widget__content"> <div class="widget__preview"> <div class="edit-area js-edit-area">Built by Kenan Yusuf</div> </div> </div> </div> </div> </div> <div class="layout__toolbar"> <div class="layout__actions"> <div class="action js-layout-visibility"> <div class="material-icons icon--layout-visibility"></div> </div> <div class="action js-delete"> <div class="material-icons icon--delete"></div> </div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Page layout experiment - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { background: #e6e6e6; font-family: 'Source Sans Pro', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Alegreya Sans', sans-serif; font-weight: 300; margin-top: 0;
}
.container { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.layout { display: block; width: 800px; background: #fff; padding: 10px;
}
.layout--active { padding-top: 0; margin: 10px 0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); border-bottom: 1px solid #d9d9d9;
}
.layout__drag-bar { display: none; justify-content: center; cursor: move; color: #808080;
}
.layout--active .layout__drag-bar { display: flex;
}
.layout__toolbar { display: none; justify-content: flex-end; margin-top: 10px;
}
.layout--active .layout__toolbar { display: flex;
}
.layout__actions { display: flex;
}
.layout__row { display: flex;
}
.layout__column { background: #f2f2f2;
}
.layout__column--main { flex: 1;
}
.layout__column--sidebar { padding-left: 0; width: 250px;
}
.widget { margin: 10px; background: #fff; border-bottom: 1px solid #d9d9d9;
}
.layout--invisible .widget,
.widget.widget--invisible { background: #e6e6e6;
}
.widget--edit { border-color: #2aa1c0;
}
.widget__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 5px 15px; cursor: move;
}
.widget__content { border-top: 1px solid #f2f2f2; padding: 15px;
}
.widget__name { color: #4d4d4d; font-weight: 600;
}
.widget__actions { display: flex; opacity: 0; transition: opacity 0.1s;
}
.widget:hover .widget__actions,
.widget--edit .widget__actions { opacity: 1;
}
.widget--edit .widget__actions--main { display: none;
}
.widget__actions--edit { display: none;
}
.widget--edit .widget__actions--edit { display: flex;
}
.widget__preview { color: #4d4d4d;
}
.ui-sortable-placeholder { visibility: visible !important; background: #d9d9d9 !important; box-shadow: none;
}
.action { cursor: pointer; padding: 5px; margin: 0 5px; color: #808080; transition: color 0.1s;
}
.action:hover { color: #2aa1c0;
}
.icon--widget-visibility:after { content: 'visibility';
}
.widget--invisible .icon--widget-visibility:after,
.layout--invisible .icon--widget-visibility:after { content: 'visibility_off';
}
.icon--layout-visibility:after { content: 'visibility';
}
.layout--invisible .icon--layout-visibility:after { content: 'visibility_off';
}
.icon--widget-edit:after { content: 'edit';
}
.icon--widget-confirm:after { content: 'done';
}
.action:hover .icon--widget-confirm:after { color: #4caf50;
}
.icon--widget-cancel:after { content: 'clear';
}
.action:hover .icon--widget-cancel:after { color: #f44336;
}
textarea { width: 100%; border: 0; outline: 0; padding: 0; margin: 0; margin-bottom: -4px; resize: none; background: transparent;
}
Page layout experiment - Script Codes JS Codes
var $document = $(document) , $page = $('.js-page') , $column = $('.js-column') , $layout = $('.js-layout') , $layoutVisibility = $('.js-layout-visibility') , $widget = $('.js-widget') , $widgetVisibility = $('.js-widget-visibility') , $widgetEdit = $('.js-widget-edit') , $widgetConfirm = $('.js-widget-confirm') , $widgetCancel = $('.js-widget-cancel') , $editArea = $('.js-edit-area')
$page.sortable( { appendTo: document.body , handle: '.js-layout-handle' , axis: 'y' , cursor: 'move'
})
$column.sortable( { handle: '.js-widget-handle' , connectWith: '.js-column' , cursor: 'move'
})
$layout.on('click', function () { $layout.removeClass('layout--active') $(this).addClass('layout--active')
})
$document.on('click', function (e) { var $target = $(e.target) if ($target.is('.js-layout') || $target.parents('.js-layout').length) { e.stopPropagation() return } $layout.removeClass('layout--active')
})
$layoutVisibility.on('click', function () { $(this).closest($layout).toggleClass('layout--invisible')
})
$widgetVisibility.on('click', function () { $(this).closest($widget).toggleClass('widget--invisible')
})
$widgetEdit.on('click', function () { var $associatedWidget = $(this).closest($widget) , $currentEditArea = $associatedWidget.find($editArea) , $currentContent = $currentEditArea.html() , $textArea = '<textarea rows="1">' + $currentContent + '</textarea>' $associatedWidget.addClass('widget--edit') $currentEditArea.replaceWith($textArea) autosize($('textarea'))
})
$widgetConfirm.on('click', function () { $(this).closest($widget).removeClass('widget--edit')
})
$widgetCancel.on('click', function () { $(this).closest($widget).removeClass('widget--edit')
})
Developer | Kenan Yusuf |
Username | KenanYusuf |
Uploaded | December 06, 2022 |
Rating | 3 |
Size | 5,391 Kb |
Views | 6,072 |
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 |
A Pen by Kenan Yusuf | 2,582 Kb |
Expanding box and fading content | 3,418 Kb |
Scrollable Navigation | 3,141 Kb |
Styling unvisited links | 2,816 Kb |
Kyusuf.com layout | 3,467 Kb |
Slick carousel with detached captions | 3,150 Kb |
EU Referendum Ballot Paper | 4,023 Kb |
Card awaiting content | 4,012 Kb |
Material Weather Widget with Moment.js | 5,929 Kb |
Styling visited links | 2,799 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 |
RSW | JordanC | 3,726 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Mario | Takaneichinose | 3,902 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Ball physics | Blackkbot | 3,874 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 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!