Files

• _footer.scss
• footer.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/footer

Module Overview

Examples

<footer class="footer">
    <div class="footer_wrapper">
        <div class="container">
            ...
        </div>
    </div>
    <div class="container">
        <div class="footer_bar">
            <div class="footer_copyright">
                ...
            </div>
            <div class="footer_nav">
                ...
            </div>
        </div>
    </div>
</footer>

View Demo

Twitter Feed

<footer class="footer">

    <div class="footer_wrapper">
    
        <div class="container">
        
            <div class="row">
            
                ...
                
                <!-- Twitter Feed -->
                    
                <div class="span-3" id="footer-twitter-feed">
                
                    <header class="heading_group-small">
                        <h4 class="footer_title heading-heavy-uppercase-size-3 font-2">
                            <i class="fa fa-twitter"></i> Twitter Feed
                        </h4>
                        <h5 class="heading-light-brand-1">
                            View our latest tweets
                        </h5>
                        <div class="footer_tweets-nav button_group-small">
                            <div class="tweet-prev button-icon-circle-size-1">
                                <i class="fa fa-angle-left"></i>
                            </div>
                            <div class="tweet-next button-icon-circle-size-1">
                                <i class="fa fa-angle-right"></i>
                            </div>
                        </div>
                    </header>
                    <div class="twitter-feed_content"></div>
                    
                </div>
                
            </div><!-- .row -->
            
        </div><!-- .container -->
        
    </div><!-- .footer_wrapper -->
    
    <div class="container">
        <div class="footer_bar">
            ...
        </div>
    </div>
    
</footer><!-- .footer -->

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), pass any desired options to the footer() function:

$('.footer').footer({
    twitterFeedSelector : '#footer-twitter-feed',
    twitterFeed   : {
        username  : 'esr360',
        tweets    : 8,
        container : '.twitter-feed_content'
    }
});

Testimonials

<footer class="footer">

    <div class="footer_wrapper">
    
        <div class="container">
        
            <div class="row">
                ...
                <div class="span-3">
                
                    <!-- Testimonial Carousel -->
                    
                    <header class="heading_group-small">
                        <h4 class="footer_title heading-heavy-uppercase-size-3 font-2">
                            Testimonials
                        </h4>
                        <h5 class="heading-light-brand-1">
                            See what our clients say
                        </h5>
                        <div class="footer_testimonials-nav button_group-small">
                            <div class="tweet-prev button-icon-circle-size-1">
                                <i class="fa fa-angle-left"></i>
                            </div>
                            <div class="tweet-next button-icon-circle-size-1">
                                <i class="fa fa-angle-right"></i>
                            </div>
                        </div>
                    </header>
                    
                    <div id="footer-testimonials" class="owl-carousel">
                        
                        <blockquote class="blockquote-testimonial">
                            <div class="blockquote_bubble">
                                <div class="blockquote_content">
                                    Aenean lobortis ante nunc. Integer justo ex. Curabitur at enim ac nisi...
                                </div>
                            </div>
                            <footer class="blockquote_footer">
                                <a class="blockquote_avatar-small" href="">
                                    <img src="../../../images/team/team-2.jpg" alt="">
                                </a>
                                <div class="blockquote_cite heading_group">
                                    <h4 class="heading-size-2 font-2">John Dough</h4>
                                    <h5 class="heading-light-brand-1-size-2">Theme Forest</h5>
                                </div>
                            </footer>
                        </blockquote>	
                        
                        ...
                    
                    </div>
                    
                </div>
                
            </div><!-- .row -->
            
        </div><!-- .container -->
        
    </div><!-- .footer_wrapper -->
    
    <div class="container">
        <div class="footer_bar">
            ...
        </div>
    </div>
    
</footer><!-- .footer -->

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), pass any desired options to the footer() function:

$('.footer').footer({
    testimonialsSelector : '#footer-testimonials'
});

Customizing

The Footer can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

To change one of the above values, pass your new value(s) to the footer() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include footer((
    'wrapper-padding' : 6em 0,
    'logo-height'     : 40px,
    'bar-responsive'  : 720px,
    'bar-font-size'   : 1em
));