Bulma-Social

Social Buttons and Colors for Bulma

![bulma-social-preview](media/preview.webp) ## ✨ 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 Bulma-Social is an add-on stylesheet for Bulma, so **Bulma is required** (peer dependency: `bulma >= 1.0.0`). Make sure Bulma’s CSS is loaded **before** Bulma-Social. ### 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 // Bulma (required) import "bulma/css/bulma.min.css"; // 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 Continue with GitHub Sign in with Google ``` ### Icon-Only Buttons ```html ``` --- ## 📖 Documentation Full documentation with interactive examples is available at: **👉 [aldi.github.io/bulma-social](https://aldi.github.io/bulma-social)** Upgrading from an older version? **👉 [Migration Guide](https://aldi.github.io/bulma-social/docs/migration)** --- ## 🤝 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). ---