https://github.com/aldi/bulma-social
🤳 Social Buttons and Colors for Bulma
https://github.com/aldi/bulma-social
bulma bulma-social font-awesome social-buttons
Last synced: 2 months ago
JSON representation
🤳 Social Buttons and Colors for Bulma
- Host: GitHub
- URL: https://github.com/aldi/bulma-social
- Owner: aldi
- License: mit
- Created: 2018-07-06T19:57:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2026-01-13T22:00:38.000Z (2 months ago)
- Last Synced: 2026-01-13T23:59:48.945Z (2 months ago)
- Topics: bulma, bulma-social, font-awesome, social-buttons
- Language: CSS
- Homepage: https://aldi.github.io/bulma-social
- Size: 2.42 MB
- Stars: 253
- Watchers: 24
- 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 - aldi/bulma-social - 🤳 Social Buttons and Colors for Bulma (CSS)
README
Bulma-Social
Social Buttons and Colors for Bulma
📖 View Documentation ·
🎨 Live Demo ·
🐛 Report Bug
## ✨ Features
- 🎨 **24 Providers** — All major social platforms included
- 🧩 **Bulma Native** — Seamlessly integrates with Bulma's class naming conventions
- 📦 **Modular Imports** — Import only what you need, keep your bundle minimal
- 🌙 **Dark Mode Ready** — Fully optimized for light and dark themes
- 🔧 **Framework Agnostic** — Works with React, Vue, Angular, Svelte, or plain HTML
- 🎯 **Any Icon Library** — Compatible with Font Awesome, Material Icons, Ionicons, and more
## 📦 Installation
### NPM
```sh
npm install bulma-social
```
### Yarn
```sh
yarn add bulma-social
```
### pnpm
```sh
pnpm add bulma-social
```
After installation, import the CSS in your project:
```js
// Import all social providers
import "bulma-social/css/all.min.css";
// Or import specific providers for smaller bundle size
import "bulma-social/css/single/facebook/facebook.min.css";
import "bulma-social/css/single/github/github.min.css";
```
### CDN
Use via [jsDelivr](https://www.jsdelivr.com/package/npm/bulma-social) — no installation required:
```html
```
---
## 🎨 Supported Social Providers
.is-apple
.is-discord
.is-facebook
.is-github
.is-gitlab
.is-instagram
.is-linkedin
.is-microsoft
.is-pinterest
.is-reddit
.is-slack
.is-twitter
.is-youtube
.is-vimeo
.is-dropbox
.is-bitbucket
.is-flickr
.is-foursquare
.is-odnoklassniki
.is-openid
.is-soundcloud
.is-tumblr
.is-vk
.is-yahoo
---
## 🎭 Button Styles & States
### Styles
| Class | Description |
| -------------- | ---------------------------------- |
| `.is-outlined` | Transparent background with border |
| `.is-inverted` | Inverted colors |
| `.is-light` | Light background variant |
| `.is-dark` | Dark background variant |
### States
| Class / Attribute | Description |
| ----------------- | -------------- |
| `.is-hovered` | Hover state |
| `.is-focused` | Focus state |
| `.is-active` | Active state |
| `.is-disabled` | Disabled state |
---
## 🖌️ Color Utilities
### Text Colors
```html
Facebook Blue
Facebook Light
Facebook Dark
```
### Background Colors
```html
Facebook Background
Light Variant
Dark Variant
```
> 💡 Replace `facebook` with any supported provider name.
---
## 💡 Usage Examples
### Buttons with Text
```html
Sign in with Facebook
### Icon-Only Buttons
---
## 📖 Documentation
Full documentation with interactive examples is available at:
**👉 [aldi.github.io/bulma-social](https://aldi.github.io/bulma-social)**
---
## 🤝 Contributing
Contributions are welcome! Please read our [Contributing Guide](.github/CONTRIBUTING.md) before submitting a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b new-provider`)
3. Commit your changes (`git commit -m 'Add new provider'`)
4. Push to the branch (`git push origin new-provider`)
5. Open a Pull Request
---
## 📄 License
Released under the [MIT License](LICENSE).
---