Files

• _twitter-feed.scss
• README.md

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

Module Overview

Examples

<div class="twitter-feed" id="twitter-feed">
    <a class="loading-tweets" href="http://twitter.com/esr360" target="blank">
        <i class="fa fa-twitter"></i>
    </a>
    <div class="twitter-feed_content container">
        <div class="tweets-nav button_group-small">
            <div class="tweet-prev button-icon-border-size-2">
                <i class="fa fa-angle-left"></i>
            </div>
            <div class="tweet-next button-icon-border-size-2">
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
    </div>
</div>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the twitterFeed() function on your Twitter feed container:

$('#twitter-feed').twitterFeed();

Options

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

Dark Twitter Feed

<div class="twitter-feed-dark" id="twitter-feed">
    ...
</div>

Or...

@include twitter-feed((
    'dark' : true
));

Customizing

The Twitter Feed can be customized using the following options:

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

Property Name	Default Value	Description
background	darken(color('greyscale', 'grey-1'), 3%)	The background for the Twitter Feed module.
dark	false	If enabled the dark modifier styles will be applied without being required in the markup.
dark-background	color('greyscale', 'grey-5')	The background for the module when the dark modifier is applied.
dark-color	color('greyscale', 'white')	If text color for the module when the dark modifier is applied.

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

@include twitter-feed((
    'dark'            : true,
    'dark-background' : #000000
));