bsakhanov

Grid Layout w/ UiKit alt-1

A Pen by Beibit Sakhanov on CodePen.

License.

bsakhanov

doctype html

// images
- var image=['https://images.unsplash.com/photo-1468549940493-46152524296c?auto=format&fit=crop&w=952&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1075&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1505168125601-4ddfdea4c7e7?auto=format&fit=crop&w=1051&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1466854076813-4aa9ac0fc347?auto=format&fit=crop&w=1489&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjNlMzNjMTMtNDAxYi00M2QxLTlmYWQtMTdkZDljMmIzYjI5XkEyXkFqcGdeQXVyMzM4NjcxOTc@._V1_SY1000_CR0,0,685,1000_AL_.jpg'];

// tooltip
- var tooltip='<span class="uk-text-lead uk-text-small uk-light">Lorem ipsum dolor sit amet</span><br><span class="uk-text-muted">Lorem ipsum</span><br><br><span class="uk-text-meta uk-text-small uk-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta purus sit amet t

bsakhanov

<header id="header">
	<nav class="links" style="--items: 5;">
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="#">Link 3</a>
		<a href="#">Link 4</a>
		<a href="#">Link 5</a>
		<span class="line"></span>
	</nav>
</header>

bsakhanov

<div class="uk-child-width-expand@s uk-text-center uk-grid-collapse" uk-grid>
    <div>
        <div class="uk-tile">1</div>
    </div>
    <div>
        <div class="uk-tile">2</div>
    </div>
    <div>
        <div class="uk-tile">3</div>
    </div>

bsakhanov

<div class="container">
  <div class="slideset">
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing 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.
          <div class="arrow"></div>
        </blockquote>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1138174/profile/profile-512.jpg" alt="Maksim Goffin" />
        <div class="author">
          <h5>Maksim Goffin</h5>

bsakhanov

<div class="accordion">
  <ul>
    <li><a href="#">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut consequat.</p>
      </div>
      </a> </li>
    <li><a href="#">
      <div>

bsakhanov

<!-- codepen editor mode - you could open the HTML tab in full width + only one extra line of CSS (not in uikit) on this example 
**since rc.20(October 24, 2018)Offcanvas no longer requires a wrapping content div
-->
<!-- desktop sticky navbar -->
<div class="uk-position-top" id="top">
  <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar="dropbar: false;" data-uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky uk-section-primary uk-light; bottom: #scrollup-dropdown">
    <!-- LEFT -->
    <div class="uk-navbar-left uk-light">
      <a class="uk-navbar-item uk-logo" href="#">Logo-desktop</a>
      <!-- show ul on desktop-tablet with uk-visible@m = Only affects device widths of 960px and larger-->

bsakhanov

doctype html

//- logo
- var logo_white="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png"

.uk-offcanvas-content
  // menu position. delete .uk-light to change black navbar to white (also you should change logo to dark one)
  //- https://getuikit.com/docs/sticky#responsive
  nav.uk-navbar-container.uk-light(uk-navbar="mode: click" uk-sticky="animation: uk-animation-slide-top; show-on-up: true")
    // logo or title

bsakhanov

<nav data-uk-sticky id="items" class="uk-navbar">
  <label class="uk-navbar-content uk-hidden-small">Filter:</label>
  <ul class="uk-navbar-nav uk-hidden-small">
    <li data-uk-filter="" class="uk-active"><a href="#">ALL</a></li>
    <li data-uk-filter="blue"><a href="#">BLUE</a></li>
    <li data-uk-filter="green"><a href="#">GREEN</a></li>
  </ul>

  <label class="uk-navbar-content uk-hidden-small">Sort:</label>
  <ul class="uk-navbar-nav uk-hidden-small">

bsakhanov

<canvas id="canvas"></canvas>