Skip to content

Latest commit

 

History

History
187 lines (144 loc) · 3.98 KB

README.md

File metadata and controls

187 lines (144 loc) · 3.98 KB
Raw

Bulma-Social

Social Buttons and Colors for Bulma

npm jsdelivr Awesome

Check out the live demo!

bulma-social-image

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.