Skip to content

Instantly share code, notes, and snippets.

@nojaja

nojaja/.siteeditor

Last active May 23, 2020 06:25
Show Gist options
  • Save nojaja/e893904d54af7e1e0504dc6c4d78a6a8 to your computer and use it in GitHub Desktop.
Save nojaja/e893904d54af7e1e0504dc6c4d78a6a8 to your computer and use it in GitHub Desktop.
Download ZIP
new project
Raw
index.ahtml
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frontpage layout example - UIkit documentation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.12.0/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="uikit_component.js"></script>
</head>
<body>
<div>
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
<uk-navbar href="layouts_frontpage.html" title="Brand">
<uk-navbar-item class="uk-active" href="layouts_frontpage.html" title="Frontpage" />
<uk-navbar-item href="layouts_portfolio.html" title="Portfolio" />
<uk-navbar-item href="layouts_blog.html" title="Blog" />
<uk-navbar-item href="layouts_documentation.html" title="Documentation" />
<uk-navbar-item href="layouts_contact.html" title="Contact" />
<uk-navbar-item href="layouts_login.html" title="Login" />
</uk-navbar>
<uk-grid>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center" style="background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Sample Heading</h1>
<p class="uk-text-large">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</uk-grid>
<uk-grid>
<sample-heading icon="cog" title="Sample Heading" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sample-heading>
<sample-heading icon="thumbs-o-up" title="Sample Heading" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sample-heading>
<sample-heading icon="cloud-download" title="Sample Heading" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sample-heading>
</uk-grid>
<uk-grid>
<sample-heading icon="dashboard" title="Sample Heading" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sample-heading>
<sample-heading icon="comments" title="Sample Heading" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sample-heading>
<sample-heading icon="briefcase" title="Sample Heading" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sample-heading>
</uk-grid>
<hr class="uk-grid-divider">
<uk-grid>
<div class="uk-width-medium-1-2">
<uk-mock-img />
</div>
<div class="uk-width-medium-1-2">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="uk-button uk-button-primary" href="#">Button</a>
</div>
</uk-grid>
<hr class="uk-grid-divider">
<uk-grid>
<div class="uk-width-medium-1-2">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="uk-button uk-button-primary" href="#">Button</a>
</div>
<div class="uk-width-medium-1-2">
<uk-mock-img />
</div>
</uk-grid>
<hr class="uk-grid-divider">
<uk-grid>
<div class="uk-width-medium-1-1">
<div class="uk-panel uk-panel-box uk-text-center">
<p><strong>Phasellus viverra nulla ut metus.</strong> Quisque rutrum etiam ultricies nisi vel augue. <a class="uk-button uk-button-primary uk-margin-left" href="#">Button</a></p>
</div>
</div>
</uk-grid>
<h1 class="uk-text-center">Our Clients</h1>
<our-clients>
<our-client/>
<our-client/>
<our-client/>
<our-client/>
<our-client/>
<our-client/>
</our-clients>
</div>
<uk-offcanvas>
<uk-navbar-item class="uk-active" href="layouts_frontpage.html" title="Frontpage" />
<uk-navbar-item class="uk-active" href="layouts_portfolio.html" title="Portfolio" />
<uk-navbar-item class="uk-active" href="layouts_blog.html" title="Blog" />
<uk-navbar-item class="uk-active" href="layouts_documentation.html" title="Documentation" />
<uk-navbar-item class="uk-active" href="layouts_contact.html" title="Contact" />
<uk-navbar-item class="uk-active" href="layouts_login.html" title="Login" />
</uk-offcanvas>
</div>
</body>
</html>
Raw
uikit.ahtml
<html>
<body>
<div>
<element name="uk-navbar">
<template>
<nav class="uk-navbar uk-margin-large-bottom">
<a class="uk-navbar-brand uk-hidden-small" href="{this.props.href}">{this.props.title}</a>
<ul class="uk-navbar-nav uk-hidden-small">
{this.props.children}
</ul>
<a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
<div class="uk-navbar-brand uk-navbar-center uk-visible-small">{this.props.title}</div>
</nav>
</template>
</element>
<element name="uk-navbar-item">
<template>
<li class="{this.props.class}">
<a href="{this.props.href}">{this.props.title}</a>
</li>
</template>
</element>
<element name="uk-mock-img">
<template>
<img width="{this.props.width||660}" height="{this.props.height||400}" src="{this.props.src||'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjYwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2NjAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NjAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSI2NjAiIGhlaWdodD0iNDAwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0yNTguMTg0LDE0My41djExM2gxNDMuNjMydi0xMTNIMjU4LjE4NHogTTM5MC4yNDQsMjQ0LjI0N0gyNzAuNDM3di04OC40OTRoMTE5LjgwOEwzOTAuMjQ0LDI0NC4yNDcNCgkJTDM5MC4yNDQsMjQ0LjI0N3oiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjI3Ni44ODEsMjM0LjcxNyAzMDEuNTcyLDIwOC43NjQgMzEwLjgyNCwyMTIuNzY4IDM0MC4wMTYsMTgxLjY4OCAzNTEuNTA1LDE5NS40MzQgDQoJCTM1Ni42ODksMTkyLjMwMyAzODQuNzQ2LDIzNC43MTcgCSIvPg0KCTxjaXJjbGUgZmlsbD0iI0Q4RDhEOCIgY3g9IjMwNS40MDUiIGN5PSIxNzguMjU3IiByPSIxMC43ODciLz4NCjwvZz4NCjwvc3ZnPg0K'}">
</template>
</element>
<element name="uk-grid">
<template>
<div class="uk-grid" data-uk-grid-margin>
{this.props.children}
</div>
</template>
</element>
<element name="sample-heading">
<template>
<div class="uk-width-medium-1-3">
<div class="uk-grid">
<div class="uk-width-1-6">
<i class="uk-icon-{this.props.icon} uk-icon-large uk-text-primary"></i>
</div>
<div class="uk-width-5-6">
<h2 class="uk-h3">{this.props.title}</h2>
<p>{this.props.children}</p>
</div>
</div>
</div>
</template>
</element>
<element name="our-clients">
<template>
<div class="uk-grid" data-uk-grid-margin>
{this.props.children}
</div>
</template>
</element>
<element name="our-client">
<template>
<div class="uk-width-1-2 uk-width-medium-1-3 uk-width-large-1-6">
<figure class="uk-overlay uk-overlay-hover">
<img width="350" height="150" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzUwcHgiIGhlaWdodD0iMTUwcHgiIHZpZXdCb3g9IjAgMCAzNTAgMTUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNTAgMTUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIzNTAiIGhlaWdodD0iMTUwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0xMzEuOTEsNDEuMXY2Ny44aDg2LjE4VjQxLjFIMTMxLjkxeiBNMjExLjE0NiwxMDEuNTQ5SDEzOS4yNlY0OC40NTFoNzEuODg3VjEwMS41NDl6Ii8+DQoJPHBvbHlnb24gZmlsbD0iI0Q4RDhEOCIgcG9pbnRzPSIxNDMuMTI5LDk1LjgzIDE1Ny45NDMsODAuMjU4IDE2My40OTQsODIuNjYgMTgxLjAwOSw2NC4wMTQgMTg3LjkwMiw3Mi4yNiAxOTEuMDE0LDcwLjM4MiANCgkJMjA3Ljg0OCw5NS44MyAJIi8+DQoJPGNpcmNsZSBmaWxsPSIjRDhEOEQ4IiBjeD0iMTYwLjI0MyIgY3k9IjYxLjk1NCIgcj0iNi40NzIiLz4NCjwvZz4NCjwvc3ZnPg0K">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
<div>Client Name</div>
</figcaption>
<a class="uk-position-cover" href="#"></a>
</figure>
</div>
</template>
</element>
<element name="uk-offcanvas">
<template>
<div id="offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
{this.props.children}
</ul>
</div>
</div>
</template>
</element>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment