https://aldi.github.io/bulma-social/

🤳 Social Buttons and Colors for Bulma
https://aldi.github.io/bulma-social/

bulma bulma-social font-awesome social-buttons

Last synced: 15 days ago
JSON representation

🤳 Social Buttons and Colors for Bulma

• Host: GitHub
• URL: https://aldi.github.io/bulma-social/
• Owner: aldi
• License: mit
• Created: 2018-07-06T19:57:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T21:58:08.000Z (almost 2 years ago)
• Last Synced: 2024-05-20T03:14:56.478Z (6 months ago)
• Topics: bulma, bulma-social, font-awesome, social-buttons
• Language: CSS
• Homepage: https://aldi.github.io/bulma-social
• Size: 1.27 MB
• Stars: 256
• Watchers: 25
• Forks: 55
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bulma - bulma-social - 🤳 Social Sign-In Buttons based on Bulma and Font Awesome (Extensions / Courses)

README

        
# Bulma-Social

Social Buttons and Colors for [Bulma](http://bulma.io/)

[![npm](https://img.shields.io/npm/v/bulma-social.svg)](https://npmjs.com/package/bulma-social)

[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/bulma-social/badge)](https://www.jsdelivr.com/package/npm/bulma-social)

[![Awesome](https://awesome.re/badge-flat2.svg)](https://awesome.re)

[Check out the live demo!](http://aldi.github.io/bulma-social)

![bulma-social-image](docs/assets/images/bulma-social.png)

## Installation

### NPM

```sh

npm install bulma-social

```

or

### Yarn

```sh

yarn add bulma-social

```

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

Import all social providers:

```js

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

```

or import certain social providers:

```js

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

```

### CDN

[https://www.jsdelivr.com/package/npm/bulma-social](https://www.jsdelivr.com/package/npm/bulma-social)

Link all social providers:

```html

```

or link certain social providers:

```html

```

## Documentation

The documentation resides in the [docs](docs) directory.

Browse the [online documentation here.](https://aldi.github.io/bulma-social/index.html)

## 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-`

- `.has-text--light`

- `.has-text--dark`

## Available Background Color Styles

Replace <social-provider>

- `.has-background-`

- `.has-background--light`

- `.has-background--dark`

## Examples

```html



  

    

  

  Facebook





  

    

  

  Facebook





  

    

  

  Facebook





  

    

  





  

    

  





  

    

  





  

    

  



Hi Facebook

Hi Facebook Light

Hi Facebook Dark

Hi Facebook

Hi Facebook Light



  Hi Facebook Dark



```


## Licence 📜

Code released under [the MIT license](https://github.com/aldi/bulma-social/blob/master/LICENSE).