Skip to content
361 lines (305 sloc) 20.3 KB
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UIkit</title>
<link rel="shortcut icon" href="docs/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="docs/images/apple-touch-icon.png">
<link id="data-uikit-theme" rel="stylesheet" href="docs/css/uikit.docs.min.css">
<link rel="stylesheet" href="docs/css/docs.css">
<link rel="stylesheet" href="vendor/highlight/highlight.css">
<script src="vendor/jquery.js"></script>
<script src="docs/js/uikit.min.js"></script>
<script src="vendor/highlight/highlight.js"></script>
<script src="docs/js/docs.js"></script>
</head>
<body class="tm-background">
<nav class="tm-navbar uk-navbar uk-navbar-attached">
<div class="uk-container uk-container-center">
<a class="uk-navbar-brand uk-hidden-small" href="index.html"><img class="uk-margin uk-margin-remove" src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
<ul class="uk-navbar-nav uk-hidden-small">
<li><a href="docs/documentation_get-started.html">Get Started</a></li>
<li><a href="docs/core.html">Core</a></li>
<li><a href="docs/components.html">Components</a></li>
<li><a href="docs/customizer.html">Customizer</a></li>
<li><a href="showcase/index.html">Showcase</a></li>
<li><a href="docs/tutorials.html">Tutorials</a></li>
</ul>
<a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
<div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>
</div>
</nav>
<div class="tm-section tm-section-color-1 tm-section-colored">
<div class="uk-container uk-container-center uk-text-center">
<img class="tm-logo" src="docs/images/logo_uikit_large.svg" width="281" height="217" title="UIkit" alt="UIkit">
<p class="uk-text-large">A lightweight and modular front-end framework<br class="uk-hidden-small"> for developing fast and powerful web interfaces.</p>
<a class="uk-button tm-button-download" data-uikit-download>Download UIkit</a>
<ul class="tm-subnav uk-subnav uk-flex-center">
<li><a href="https://github.com/uikit/uikit">GitHub</a></li>
<li><a href="docs/documentation_get-started.html">Get Started</a></li>
<li data-uikit-version></li>
</ul>
<ul class="tm-subnav uk-subnav uk-flex-center">
<li><a href="https://github.com/uikit/uikit/stargazers"><i class="uk-icon-star"></i> <span data-uikit-stargazers>6514</span> Stargazers</a></li>
<li><a href="https://github.com/uikit/uikit/network"><i class="uk-icon-code-fork"></i> <span data-uikit-forks>1287</span> Forks</a></li>
<li><a href="https://twitter.com/getuikit"><i class="uk-icon-twitter"></i> @getuikit</a></li>
<li><a href="https://gitter.im/uikit/uikit"><i class="uk-icon-comments-o"></i> Community</a></li>
</ul>
</div>
</div>
<div class="tm-section tm-section-color-2 tm-section-colored">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="uk-heading-large">Features</h1>
<p class="uk-text-large">UIkit gives you a comprehensive collection of HTML, CSS, and JS components<br class="uk-hidden-small"> which is simple to use, easy to customize and extendable.</p>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-4">
<div class="uk-panel">
<img class="tm-image-pull" src="docs/images/icon_less.svg" width="200" height="140" alt="LESS">
<h2 class="uk-margin-top-remove">LESS</h2>
<p>UIkit is developed in <a href="http://lesscss.org">LESS</a> &amp; <a href="http://sass-lang.com">SASS </a> to write well-structured, extendable code which is easy to maintain.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel">
<img class="tm-image-pull" src="docs/images/icon_components.svg" width="200" height="140" alt="Components">
<h2 class="uk-margin-top-remove">Components</h2>
<p>A collection of small, responsive components using consistent and conflict-free naming conventions.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel">
<img class="tm-image-pull" src="docs/images/icon_themes.svg" width="200" height="140" alt="Themes">
<h2 class="uk-margin-top-remove">Customizer</h2>
<p>UIkit's very basic style can be extended with themes and is easy to customize to create your own look.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel">
<img class="tm-image-pull" src="docs/images/icon_responsive.svg" width="200" height="140" alt="Responsive">
<h2 class="uk-margin-top-remove">Responsive</h2>
<p>With the mobile-first approach UIkit provides a consistent experience from phones and tablets to desktops.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tm-section tm-section-color-white">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="tm-margin-large-bottom"><strong>Get involved.</strong> Become a part of the UIkit community.</h1>
<div class="uk-grid tm-grid-margin-large" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin>
<div class="uk-width-medium-1-3">
<a class="uk-panel tm-panel-link" href="https://twitter.com/getuikit">
<div class="tm-icon"><i class="uk-icon-twitter uk-icon-large"></i></div>
<h2>Twitter</h2>
<p>Follow us on Twitter and be the first to receive news and updates. We are open for your feedback and questions.</p>
</a>
</div>
<div class="uk-width-medium-1-3">
<a class="uk-panel tm-panel-link" href="https://github.com/uikit/uikit/issues">
<div class="tm-icon"><i class="uk-icon-github-alt uk-icon-large"></i></div>
<h2>Contribute on GitHub</h2>
<p>You want to take part in the development? Fork UIkit on GitHub and send us a pull request. To report a bug, file a new issue.</p>
</a>
</div>
<div class="uk-width-medium-1-3">
<a class="uk-panel tm-panel-link" href="https://gitter.im/uikit/uikit">
<div class="tm-icon"><i class="uk-icon-comments-o uk-icon-large"></i></div>
<h2>UIkit Community</h2>
<p>If you're interested in discussing, participating and helping each other, the UIkit community is the place to be.</p>
</a>
</div>
</div>
</div>
</div>
<div class="tm-section tm-section-color-2 tm-section-colored">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="uk-heading-large uk-margin-bottom-remove">Open Source</h1>
<p class="uk-text-large">UIkit is an open source framework to make the web look good.<br class="uk-hidden-small"> Create your own styles and discover the unlimited use of UIkit.</p>
<div class="uk-grid uk-grid-divider" data-uk-grid-margin>
<div class="uk-width-1-1 uk-width-medium-1-3">
<div class="uk-panel">
<h2>MIT License</h2>
<p>UIkit is absolutely free of charge and you can use, copy, merge, publish and distribute the framework without any limitations.</p>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel">
<h2>Our Heros</h2>
<p>A big thanks to LESS, jQuery, normalize.css and FontAwesome. UIkit wouldn't be possible without these awesome open source projects.</p>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel">
<h2>Active Development</h2>
<p>UIkit is built by <a href="http://www.yootheme.com">YOOtheme</a>, using our extensive experience in creating Joomla and WordPress themes, to power the <a href="http://www.yootheme.com/themes/warp-framework">Warp theme framework</a>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tm-footer">
<div class="uk-container uk-container-center uk-text-center">
<ul class="uk-subnav uk-subnav-line uk-flex-center">
<li><a href="https://github.com/uikit/uikit">GitHub</a></li>
<li><a href="https://github.com/uikit/uikit/issues">Issues</a></li>
<li><a href="https://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
<li><a href="https://twitter.com/getuikit">Twitter</a></li>
</ul>
<div class="uk-panel">
<p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br class="uk-hidden-small">Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
<a href="index.html"><img src="docs/images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
</div>
</div>
</div>
<div id="tm-offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
<li class="uk-parent"><a href="#">Documentation</a>
<ul class="uk-nav-sub">
<li><a href="docs/documentation_get-started.html">Get started</a></li>
<li><a href="docs/documentation_how-to-customize.html">How to customize</a></li>
<li><a href="docs/documentation_layouts.html">Layout examples</a></li>
<li><a href="docs/core.html">Core</a></li>
<li><a href="docs/components.html">Components</a></li>
<li><a href="docs/documentation_project-structure.html">Project structure</a></li>
<li><a href="documentation_less-sass.html">Less &amp; Sass files</a></li>
<li><a href="docs/documentation_create-a-theme.html">Create a theme</a></li>
<li><a href="docs/documentation_create-a-style.html">Create a style</a></li>
<li><a href="docs/documentation_customizer-json.html">Customizer.json</a></li>
<li><a href="docs/documentation_javascript.html">Javascript</a></li>
<li><a href="docs/documentation_custom-prefix.html">Custom prefix</a></li>
</ul>
</li>
<li class="uk-nav-header">Core</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
<ul class="uk-nav-sub">
<li><a href="docs/base.html">Base</a></li>
<li><a href="docs/print.html">Print</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
<ul class="uk-nav-sub">
<li><a href="docs/grid.html">Grid</a></li>
<li><a href="docs/panel.html">Panel</a></li>
<li><a href="docs/block.html">Block</a></li>
<li><a href="docs/article.html">Article</a></li>
<li><a href="docs/comment.html">Comment</a></li>
<li><a href="docs/utility.html">Utility</a></li>
<li><a href="docs/flex.html">Flex</a></li>
<li><a href="docs/cover.html">Cover</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
<ul class="uk-nav-sub">
<li><a href="docs/nav.html">Nav</a></li>
<li><a href="docs/navbar.html">Navbar</a></li>
<li><a href="docs/subnav.html">Subnav</a></li>
<li><a href="docs/breadcrumb.html">Breadcrumb</a></li>
<li><a href="docs/pagination.html">Pagination</a></li>
<li><a href="docs/tab.html">Tab</a></li>
<li><a href="docs/thumbnav.html">Thumbnav</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
<ul class="uk-nav-sub">
<li><a href="docs/list.html">List</a></li>
<li><a href="docs/description-list.html">Description list</a></li>
<li><a href="docs/table.html">Table</a></li>
<li><a href="docs/form.html">Form</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
<ul class="uk-nav-sub">
<li><a href="docs/button.html">Button</a></li>
<li><a href="docs/icon.html">Icon</a></li>
<li><a href="docs/close.html">Close</a></li>
<li><a href="docs/badge.html">Badge</a></li>
<li><a href="docs/alert.html">Alert</a></li>
<li><a href="docs/thumbnail.html">Thumbnail</a></li>
<li><a href="docs/overlay.html">Overlay</a></li>
<li><a href="docs/text.html">Text</a></li>
<li><a href="docs/column.html">Column</a></li>
<li><a href="docs/animation.html">Animation</a></li>
<li><a href="docs/contrast.html">Contrast</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
<ul class="uk-nav-sub">
<li><a href="docs/dropdown.html">Dropdown</a></li>
<li><a href="docs/modal.html">Modal</a></li>
<li><a href="docs/offcanvas.html">Off-canvas</a></li>
<li><a href="docs/switcher.html">Switcher</a></li>
<li><a href="docs/toggle.html">Toggle</a></li>
<li><a href="docs/scrollspy.html">Scrollspy</a></li>
<li><a href="docs/smooth-scroll.html">Smooth scroll</a></li>
</ul>
</li>
<li class="uk-nav-header">Components</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
<ul class="uk-nav-sub">
<li><a href="docs/grid-js.html">Dynamic Grid</a></li>
<li><a href="docs/grid-parallax.html">Parallax Grid</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
<ul class="uk-nav-sub">
<li><a href="docs/dotnav.html">Dotnav</a></li>
<li><a href="docs/slidenav.html">Slidenav</a></li>
<li><a href="docs/pagination-js.html">Dynamic Pagination</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
<ul class="uk-nav-sub">
<li><a href="docs/form-advanced.html">Form advanced</a></li>
<li><a href="docs/form-file.html">Form file</a></li>
<li><a href="docs/form-password.html">Form password</a></li>
<li><a href="docs/form-select.html">Form select</a></li>
<li><a href="docs/placeholder.html">Placeholder</a></li>
<li><a href="docs/progress.html">Progress</a></li>
</ul>
</li>
<li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
<ul class="uk-nav-sub">
<li><a href="docs/lightbox.html">Lightbox</a></li>
<li><a href="docs/autocomplete.html">Autocomplete</a></li>
<li><a href="docs/datepicker.html">Datepicker</a></li>
<li><a href="docs/htmleditor.html">HTML editor</a></li>
<li><a href="docs/slider.html">Slider</a></li>
<li><a href="docs/slideset.html">Slideset</a></li>
<li><a href="docs/slideshow.html">Slideshow</a></li>
<li><a href="docs/parallax.html">Parallax</a></li>
<li><a href="docs/accordion.html">Accordion</a></li>
<li><a href="docs/notify.html">Notify</a></li>
<li><a href="docs/search.html">Search</a></li>
<li><a href="docs/nestable.html">Nestable</a></li>
<li><a href="docs/sortable.html">Sortable</a></li>
<li><a href="docs/sticky.html">Sticky</a></li>
<li><a href="docs/timepicker.html">Timepicker</a></li>
<li><a href="docs/tooltip.html">Tooltip</a></li>
<li><a href="docs/upload.html">Upload</a></li>
</ul>
</li>
<li class="uk-nav-divider"></li>
<li><a href="showcase/index.html">Showcase</a></li>
<li><a href="docs/tutorials.html">Tutorials</a></li>
</ul>
</div>
</div>
<script>
$.ajax({
dataType : "jsonp",
url : "https://api.github.com/repos/uikit/uikit?callback=ukghapi&nocache="+Math.random(),
success : function(data){
if(!data) return;
if(data.data.watchers){
$("[data-uikit-stargazers]").html(data.data.watchers);
}
if(data.data.forks){
$("[data-uikit-forks]").html(data.data.forks);
}
}
});
</script>
</body>
</html>
Something went wrong with that request. Please try again.