Skip to content

Instantly share code, notes, and snippets.

@HaeckDesign
Last active December 16, 2016 06:54
Show Gist options
  • Save HaeckDesign/8fcb6d69208e21810bc7 to your computer and use it in GitHub Desktop.
Save HaeckDesign/8fcb6d69208e21810bc7 to your computer and use it in GitHub Desktop.

Revisions

  1. HaeckDesign revised this gist Oct 15, 2015. 1 changed file with 25 additions and 25 deletions.
    50 changes: 25 additions & 25 deletions Demo HTML
    Original file line number Diff line number Diff line change
    @@ -1,47 +1,33 @@
    <!-- Demo Version of footerwidgets.hbs -->

    <aside class="uk-width-1-1 uk-navbar uk-navbar-attached uk-clearfix uk-text-center uk-clearfix">
    <div class="uk-grid uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-4 uk-container uk-container-center uk-margin uk-margin-top midbar" data-uk-margin data-uk-grid-match>
    <a href="/so-many-features/" class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
    <i class="uk-icon-tachometer uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Quick Loading</h5></a>
    <a href="/so-many-features/" class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
    <i class="uk-icon-arrows-alt uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Fully Responsive</h5></a>
    <a class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-right'}" href="#" data-uk-smooth-scroll="" title="Top">
    <i class="uk-icon-newspaper-o uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Post Sorting</h5></a>
    <a href="/so-many-features/" class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
    <i class="uk-icon-code uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Efficiently Coded</h5></a>
    </div>
    </aside>


    <aside class="shade2 uk-clearfix">
    <div class="uk-width-1-1 uk-width-medium-3-4 uk-grid uk-container uk-container-center" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-container uk-container-center uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-width-1-1 uk-width-medium-3-4 uk-grid uk-container-center" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-h5 uk-panel-title"><i class="uk-icon-envelope uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i>MailChimp</div>
    <p>We don't send a lot of mail, but when we do it's usually pretty awesome.</p>
    <div id="mc_embed_signup">
    <form action="#FROMMAILCHIMP" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate uk-form" target="_blank" novalidate>
    <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate uk-form" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <input type="email" value="" name="EMAIL" class="required email uk-width-1-1" id="mce-EMAIL" placeholder="Email Address">
    <div class="uk-hidden"><input type="text" name="#FROMMAILCHIMP" tabindex="-1" value=""></div>
    <div class="uk-hidden"><input type="text" name="#" tabindex="-1" value=""></div>
    <div class="uk-clearfix uk-margin-small uk-float-right"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="uk-button uk-button-small"></div>
    </div>
    </form>
    </div>
    </div>

    <div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-container uk-container-center uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-h5 uk-panel-title"><i class="uk-icon-gears uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i>About Us</div>
    <p>Our focus is on supplying a bulletproof foundation that can serve as starting point for advanced web developers, while also providing a clean design for those who prefer to grow their style organically over time.</p>
    </div>

    <div class="uk-width-1-1 uk-width-small-1-1 uk-width-medium-1-3 uk-container uk-container-center uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-h5 uk-panel-title" itemscope itemtype="http://schema.org/LocalBusiness"><i class="uk-icon-h-square uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i><span itemprop="name">Haeck Design</span></div>
    <div class="uk-width-1-1 uk-width-small-1-1 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header" itemscope itemtype="http://schema.org/LocalBusiness">
    <div class="uk-h5 uk-panel-title"><i class="uk-icon-h-square uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i><span itemprop="name">Haeck Design</span></div>
    <ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="uk-list uk-list-line uk-margin-small uk-text-center-small">
    <li><span itemprop="streetAddress" class="uk-display-block">100 N Person Street</span>
    <span itemprop="addressLocality">Raleigh</span>, <span itemprop="addressRegion">North Carolina</span><i class="uk-icon-map-marker uk-float-right uk-margin-small-top uk-icon-mini"></i></li>
    <li>@HaeckDesign<i class="uk-icon-twitter uk-float-right uk-margin-small-top uk-icon-mini"></i></li>
    <li><span itemprop="telephone">800-555-5555</span><i class="uk-icon-phone uk-float-right uk-margin-small-top uk-icon-mini"></i></li>
    <span itemprop="addressLocality">Raleigh</span>, <span itemprop="addressRegion">North Carolina</span><i class="uk-icon-map-marker uk-float-right uk-margin-small-top uk-icon-mini uk-text-muted"></i></li>
    <li><span class="uk-text-muted">@</span>HaeckDesign<i class="uk-icon-twitter uk-float-right uk-margin-small-top uk-icon-mini uk-text-muted"></i></li>
    <li><span itemprop="telephone">800-555-5555</span><i class="uk-icon-phone uk-float-right uk-margin-small-top uk-icon-mini uk-text-muted"></i></li>
    </ul>
    </div>

    @@ -50,6 +36,21 @@



    <!-- Demo Version of front-page.hbs - White Bar -->

    <aside class="uk-width-1-1 uk-navbar uk-navbar-attached uk-clearfix uk-text-center uk-clearfix">
    <div class="uk-grid uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-4 uk-container-center uk-margin uk-margin-top midbar" data-uk-margin data-uk-grid-match data-uk-scrollspy="{cls:'uk-animation-fade'}">
    <a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" target="_blank" title="" rel="nofollow">
    <i class="uk-icon-tachometer uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Quick Loading</h5></a>
    <a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" target="_blank" title="" rel="nofollow">
    <i class="uk-icon-arrows-alt uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Fully Responsive</h5></a>
    <a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" data-uk-smooth-scroll="" title="Top">
    <i class="uk-icon-newspaper-o uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Post Sorting</h5></a>
    <a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" target="_blank" title="" rel="nofollow">
    <i class="uk-icon-code uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Efficiently Coded</h5></a>
    </div>
    </aside>


    <!-- Demo Version of socialplugins.hbs -->

    @@ -84,4 +85,3 @@
    </div>
    </div>


  2. HaeckDesign revised this gist Oct 2, 2015. 1 changed file with 36 additions and 0 deletions.
    36 changes: 36 additions & 0 deletions Demo HTML
    Original file line number Diff line number Diff line change
    @@ -49,3 +49,39 @@
    </aside>




    <!-- Demo Version of socialplugins.hbs -->

    <div class="uk-width-1-1 shade2">
    <div class="uk-h3 uk-width-1-1 uk-width-medium-3-4 uk-grid uk-container-center uk-clearfix" data-uk-grid-match="{target:'.uk-width-medium-1-2'}" >

    <div class="uk-width-1-1 uk-container uk-container-center uk-margin-large-top">
    <i class="uk-icon-instagram uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:900}"></i>
    <h6 class="uk-h4 uk-display-inline">On Instagram</h6>
    <ul id="instafeed" class="uk-thumbnav uk-grid-width-1-2 uk-grid-width-small-1-4 uk-grid uk-margin uk-margin-large-bottom" data-uk-scrollspy="{cls:'uk-animation-fade'}">
    </ul>
    </div>

    <div class="uk-width-1-1 uk-width-medium-1-2 uk-container uk-container-center">
    <i class="uk-icon-twitter uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:900}"></i>
    <h6 class="uk-h4 uk-display-inline">On Twitter</h6>
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin-top uk-margin-large-bottom flexmedia uk-grid-width-1-1">
    <a class="twitter-timeline" href="https://twitter.com/HaeckDesign" data-widget-id="246827722200989696" height="280"></a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    </div>

    <div class="uk-width-1-1 uk-width-medium-1-2 uk-container uk-container-center">
    <i class="uk-icon-pinterest uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:900}"></i>
    <h6 class="uk-h4 uk-display-inline">On Pinterest</h6>
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin-top uk-margin-large-bottom uk-grid-width-1-1 uk-cover">
    <a data-pin-do="embedUser" href="http://www.pinterest.com/haeckdesign/"></a>
    <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
    </div>
    </div>

    </div>
    </div>


  3. HaeckDesign renamed this gist Oct 2, 2015. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  4. HaeckDesign renamed this gist Oct 2, 2015. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  5. HaeckDesign revised this gist Oct 2, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <h3>footerwidgets.hbs</h3><hr />
    <!-- Demo Version of footerwidgets.hbs -->

    <aside class="uk-width-1-1 uk-navbar uk-navbar-attached uk-clearfix uk-text-center uk-clearfix">
    <div class="uk-grid uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-4 uk-container uk-container-center uk-margin uk-margin-top midbar" data-uk-margin data-uk-grid-match>
  6. HaeckDesign revised this gist Oct 2, 2015. 1 changed file with 49 additions and 2 deletions.
    51 changes: 49 additions & 2 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,51 @@
    Social Footer (Instagram, Twitter, & Pinterest Feeds)
    <h3>footerwidgets.hbs</h3><hr />

    <aside class="uk-width-1-1 uk-navbar uk-navbar-attached uk-clearfix uk-text-center uk-clearfix">
    <div class="uk-grid uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-4 uk-container uk-container-center uk-margin uk-margin-top midbar" data-uk-margin data-uk-grid-match>
    <a href="/so-many-features/" class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
    <i class="uk-icon-tachometer uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Quick Loading</h5></a>
    <a href="/so-many-features/" class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
    <i class="uk-icon-arrows-alt uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Fully Responsive</h5></a>
    <a class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-right'}" href="#" data-uk-smooth-scroll="" title="Top">
    <i class="uk-icon-newspaper-o uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Post Sorting</h5></a>
    <a href="/so-many-features/" class="uk-panel uk-panel-space uk-icon-hover" data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
    <i class="uk-icon-code uk-icon-large"></i><h5 class="uk-h4 uk-margin-small-top">Efficiently Coded</h5></a>
    </div>
    </aside>


    <aside class="shade2 uk-clearfix">
    <div class="uk-width-1-1 uk-width-medium-3-4 uk-grid uk-container uk-container-center" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-container uk-container-center uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-h5 uk-panel-title"><i class="uk-icon-envelope uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i>MailChimp</div>
    <p>We don't send a lot of mail, but when we do it's usually pretty awesome.</p>
    <div id="mc_embed_signup">
    <form action="#FROMMAILCHIMP" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate uk-form" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <input type="email" value="" name="EMAIL" class="required email uk-width-1-1" id="mce-EMAIL" placeholder="Email Address">
    <div class="uk-hidden"><input type="text" name="#FROMMAILCHIMP" tabindex="-1" value=""></div>
    <div class="uk-clearfix uk-margin-small uk-float-right"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="uk-button uk-button-small"></div>
    </div>
    </form>
    </div>
    </div>

    <div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-container uk-container-center uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-h5 uk-panel-title"><i class="uk-icon-gears uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i>About Us</div>
    <p>Our focus is on supplying a bulletproof foundation that can serve as starting point for advanced web developers, while also providing a clean design for those who prefer to grow their style organically over time.</p>
    </div>

    <div class="uk-width-1-1 uk-width-small-1-1 uk-width-medium-1-3 uk-container uk-container-center uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
    <div class="uk-h5 uk-panel-title" itemscope itemtype="http://schema.org/LocalBusiness"><i class="uk-icon-h-square uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i><span itemprop="name">Haeck Design</span></div>
    <ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="uk-list uk-list-line uk-margin-small uk-text-center-small">
    <li><span itemprop="streetAddress" class="uk-display-block">100 N Person Street</span>
    <span itemprop="addressLocality">Raleigh</span>, <span itemprop="addressRegion">North Carolina</span><i class="uk-icon-map-marker uk-float-right uk-margin-small-top uk-icon-mini"></i></li>
    <li>@HaeckDesign<i class="uk-icon-twitter uk-float-right uk-margin-small-top uk-icon-mini"></i></li>
    <li><span itemprop="telephone">800-555-5555</span><i class="uk-icon-phone uk-float-right uk-margin-small-top uk-icon-mini"></i></li>
    </ul>
    </div>

    </div>
    </aside>

    Footer (MailChimp, About Us, & Location)

  7. HaeckDesign created this gist Oct 1, 2015.
    4 changes: 4 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    Social Footer (Instagram, Twitter, & Pinterest Feeds)

    Footer (MailChimp, About Us, & Location)