gmmedia / cw-uikit-social-buttons Goto Github PK

1. Intro
2. Quick Start
   • Requirements
   • Button Creation
3. Extended Option
   • Button Size
   • Button Icons
   • Button Text
   • Button Count
4. Current Networks
5. Tested
6. License
7. Issues?

Are you using UIkit on its own or packaged with a template/theme/extension?

Do you need a quick and easy way to get uniform social buttons on your site?

By adding the cw-uikit-social-buttons.css file to your pages you can harness the power of UIkit and get great looking buttons in minutes.

{.coalaweb-docs}

UIkit: The first thing you need to do is to make sure you have UIkit loading on your site. To check right click your page and select View Page Source then have a look in the head of the page for a reference to UIkit. [Figure 2]

{.coalaweb-docs}

Note: If you are using a YooTheme template or any other YooTheme extension then you will already have it loading.

CW UIkit Social Buttons: Next include the cw-uikit-social-buttons.css on your page. You can check if its loaded the same way as above. [Figure 3]

{.coalaweb-docs}

jQuery: Lastly make sure to include the jQuery on your page. You can check if its loaded the same way as above. [Figure 4]

{.coalaweb-docs}

Note: If you have files listed but they don't appear to be working make sure the files are reachable by clicking on the link when viewing the page source. If it opens then its reachable.

Now lets add some buttons, I prefer to have the buttons in a list but thats up to you. Below we have a few outer containers to help with the layout and then inside that we have our list container and one button in its default state.

<div class="uk-container uk-margin-top uk-margin-bottom">
    <div class="uk-grid" data-uk-grid-margin="">
        <div class="uk-width-1-1 uk-text-left">
            <ul class="cw-social-container">
                <li class="">
                    <a href="#" class="uk-button uk-contrast cw-social cw-twitter">Twitter</a>
                </li>
            </ul>
        </div>
    </div>
</div>

The minimum attributes that you will need to include with your buttons are:

• uk-button
• uk-contrast
• cw-social
• cw-twitter

Note: You can choose which social network based on the currently supported Networks List

You have several options to extend the functionality of the buttons such as size, icon, text and count.

The buttons can be displayed in a variety of sizes which included:

Default:

• Link class =
• Button class =
• Icon class =

Small:

• Link class = cw-small
• Button class = cw-small
• Icon class = uk-icon-small

Medium:

• Link class = cw-medium
• Button class = cw-medium
• Icon class = uk-icon-medium

Large:

• Link class = cw-large
• Button class = cw-large
• Icon class = uk-icon-large

<div class="uk-button-group">
    <a href="#" class="uk-button uk-contrast cw-social cw-small cw-google-plus">
        <i class="uk-icon-google-plus uk-icon-small"></i> Google</a>
    <button class="uk-button cw-share-count cw-small">313</button>
</div>

Then if you want to add an icon use an <i> tag with a class using the social network you want to display.

<i class="uk-icon-twitter"></i>

Note: You can choose which social network based on the currently supported Networks List

Note: The icon will also have to match your Link/Button size:

Default:

• Icon Class =

Small:

• Icon Class = uk-icon-small

Medium:

• Icon Class = uk-icon-medium

Large:

• Icon Class = uk-icon-large

<div class="uk-button-group">
    <a href="#" class="uk-button uk-contrast cw-social cw-small cw-google-plus">
        <i class="uk-icon-google-plus uk-icon-small"></i> Google</a>
    <button class="uk-button cw-share-count cw-small">313</button>
</div>

The buttons can be displayed with or without text.

Text:

• Icon class =

<a href="#" class="uk-button uk-contrast cw-social cw-twitter">
    <i class="uk-icon-twitter"></i> Twitter</a>

Note: Make sure to leave a space after the icon.

No Text:

• Icon class = cw-no-text

<a href="#" class="uk-button uk-contrast cw-social cw-twitter">
    <i class="uk-icon-twitter cw-no-text"></i></a>

If you want to display a count just add a surrounding <div> element with the class attribute uk-button-group and a <button> element with the class attribute of uk-button cw-share-count.

<div class="uk-button-group">
    <a href="#" class="uk-button uk-contrast cw-social cw-twitter">
        <i class="uk-icon-twitter"></i> Twitter</a>
    <button class="uk-button cw-share-count">313</button>
</div>
</div>

Note: The count will also have to match your Link/Icon size:

Default:

• Button Class =

Small:

• Button Class = cw-small

Medium:

• Button Class = cw-medium

Large:

• Button Class = cw-large

<div class="uk-button-group">
    <a href="#" class="uk-button uk-contrast cw-social cw-small cw-google-plus">
        <i class="uk-icon-google-plus uk-icon-small"></i> Google</a>
    <button class="uk-button cw-share-count cw-small">313</button>
</div>

The currently support social networks are:

Facbook:

• Link Class = cw-facebook
• Button Class = cw-facebook
• Icon Class = uk-icon-facebook

Google:

• Link Class = cw-google-plus
• Button Class = cw-google-plus
• Icon Class = uk-icon-google-plus or uk-icon-google

Twitter:

• Link Class = cw-twitter
• Button Class = cw-twitter
• Icon Class = uk-icon-twitter

Linkedin:

• Link Class = cw-linkedin
• Button Class = cw-linkedin
• Icon Class = uk-icon-linkedin

Reddit:

• Link Class = cw-reddit
• Button Class = cw-reddit
• Icon Class = uk-icon-reddit

Stumbleupon:

• Link Class = cw-stumbleupon
• Button Class = cw-stumbleupon
• Icon Class = uk-icon-stumbleupon

Digg:

• Link Class = cw-digg
• Button Class = cw-digg
• Icon Class = uk-icon-digg

Pinterest:

• Link Class = cw-pinterest
• Button Class = cw-pinterest
• Icon Class = uk-icon-pinterest

Mail:

• Link Class = cw-mail
• Button Class = cw-mail
• Icon Class = uk-icon-envelope

Github:

• Link Class = cw-github
• Button Class = cw-github
• Icon Class = uk-icon-github

Flickr:

• Link Class = cw-flickr
• Button Class = cw-flickr
• Icon Class = uk-icon-flickr

• UIkit: 2.24.3

• jQuery: 2.1.4

• Firefox: 41.0.1
• Chrome: 45.0.2454.101
• Opera: 32.0.1948.69
• IE: 11.0.9600.18015
• Safari: 9.0.2

Dual licensed under the MIT and GPL licenses:

Do you have an issue? Found a bug? Want to request a new feature? Then create a new issue here.