Bulma-Social

Social Buttons and Colors for Bulma

Check out the live demo!

Installation

NPM

npm install bulma-social

or

Yarn

yarn add bulma-social

After installation, you can import the CSS files into your project using these commands:

Import all social providers:

import "bulma-social/css/all.min.css";

or import certain social providers:

import "bulma-social/css/single/apple/apple.min.css";

CDN

https://www.jsdelivr.com/package/npm/bulma-social

Link all social providers:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma-social@2/css/all.min.css"
/>

or link certain social providers:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma-social@2/css/single/apple/apple.min.css"
/>

Documentation

The documentation resides in the docs directory.

Browse the online documentation here.

Available Social Provider Classes

• .is-apple
• .is-bitbucket
• .is-discord
• .is-dropbox
• .is-facebook
• .is-flickr
• .is-foursquare
• .is-github
• .is-instagram
• .is-linkedin
• .is-microsoft
• .is-odnoklassniki
• .is-openid
• .is-pinterest
• .is-reddit
• .is-slack
• .is-soundcloud
• .is-tumblr
• .is-twitter
• .is-vimeo
• .is-vk
• .is-yahoo
• .is-youtube

Available Styles

• .is-outlined
• .is-inverted
• .is-light

Available States

• .is-hovered and :hover
• .is-focused and :focus
• .is-active and :active
• .is-disabled and disabled
• .is-static

Available Text Color Styles

Replace <social-provider>

• .has-text-<social-provider>
• .has-text-<social-provider>-light
• .has-text-<social-provider>-dark

Available Background Color Styles

Replace <social-provider>

• .has-background-<social-provider>
• .has-background-<social-provider>-light
• .has-background-<social-provider>-dark

Examples

<!-- Buttons with text -->
<a class="button is-medium is-facebook">
  <span class="icon">
    <i class="fab fa-facebook"></i>
  </span>
  <span>Facebook</span>
</a>
<a class="button is-medium is-facebook is-outlined">
  <span class="icon">
    <i class="fab fa-facebook"></i>
  </span>
  <span>Facebook</span>
</a>
<a class="button is-medium is-facebook is-light">
  <span class="icon">
    <i class="fab fa-facebook"></i>
  </span>
  <span>Facebook</span>
</a>

<!-- Icon Buttons -->
<a class="button is-medium is-facebook">
  <span class="icon">
    <i class="fab fa-facebook fa-lg"></i>
  </span>
</a>
<a class="button is-medium is-facebook is-outlined">
  <span class="icon">
    <i class="fab fa-facebook fa-lg"></i>
  </span>
</a>
<a class="button is-medium is-facebook is-light">
  <span class="icon">
    <i class="fab fa-facebook fa-lg"></i>
  </span>
</a>
<a class="button is-medium is-facebook is-inverted">
  <span class="icon">
    <i class="fab fa-facebook fa-lg"></i>
  </span>
</a>

<!-- Text Colors -->
<a class="is-size-4 has-text-facebook">Hi Facebook</a>
<a class="is-size-4 has-text-facebook-light">Hi Facebook Light</a>
<a class="is-size-4 has-text-facebook-dark">Hi Facebook Dark</a>

<!-- Background Colors -->
<div class="is-size-4 has-background-facebook has-text-white">Hi Facebook</div>
<div class="is-size-4 has-background-facebook-light">Hi Facebook Light</div>
<div class="is-size-4 has-background-facebook-dark has-text-white">
  Hi Facebook Dark
</div>

Licence 📜

Code released under the MIT license.

Bulma-Social Changelog

2.1.0 (2021-10-24)

New features

• Slack colors (Pull Request #18 by @mariotaddeucci)

2.0.0 (2020-11-19)

BIG UPDATE - BREAKING CHANGES

The css files are now located in the css folder:
before: bin/bulma-social.min.css
after: css/all.min.css

Visit the documentation page for more information.

New Features

Selective Import
Import the Social Providers that you really need.

Sass Support
Sass files and functions are based on the original work of @jgthms (Bulma creator).

New Colors and Classes
Colors are generated with Bulma's original functions for seamless integration with your project.
You can now use:
.is-inverted
.is-outlined
.is-light
along with the Social Providers classes.

In addition, you can use these classes independently:
.has-text-<socialprovider>
.has-text-<socialprovider>-light
.has-text-<socialprovider>-dark
.has-background-<socialprovider>
.has-background-<socialprovider>-light
.has-background-<socialprovider>-dark

New Scripts
Compile your own Bulma Social all.min.css file with the Social Providers you really need.
You can find the scripts in the package.json file and the steps in the documentation.

Browser Compatibility
New vendor prefixes for the most popular browsers (thanks to Autoprefixer)

Updated

• Discord colors (Pull Request #7 by @nathanchere - Fixes Issue #6)
• Facebook colors
• Github colors
• Gitlab colors
• Instagram colors
• LinkedIn colors
• Microsoft colors
• Okru colors
• Openid colors
• Pinterest colors
• Reddit colors
• Tumblr colors
• Twitter colors
• Vimeo colors
• VK colors
• Yahoo colors

1.2.0 (2020-08-06)

New features

• Apple colors. (Pull Request #5 by @mariotaddeucci)

Improvements

• Border color of buttons is now transparent
• Round buttons are now round
• disabled button styles
• You can now use .is-active, .is-focused and .is-hovered classes

Updated

• Reddit colors
• Instagram static colours

Removed

• Unused .badge and .dropdown-toggle styles
• Appnet colors
• Google colors

1.1.1 (2020-03-20)

Improvements

• 4 Bin directory missing when installing version 1.1.0 on NPM (Issue #4 by @chrisgacsal)

1.1.0 (2020-02-11)

New features

• Gitlab buttons (Pull Request #1 by @nathanchere)
• Button animations (by default) on button hover (cubic-bezier effect)
• no-animation class to disable button animations
• New tabs on the right column to preview normal/rounded/loading and static button types

Improvements

• Instagram colours

1.0.1 (2019-12-15)

Improvements

• Added .npmignore to ignore files not needed for production

1.0.0 (2019-12-15)

• Initial Release!