bulma-social 2.0.0 → 3.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 - Aldi Duzha 
+Copyright (c) 2026 - github.com/aldi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,16 +1,36 @@
-# Bulma-Social
+<h1 align="center">Bulma-Social</h1>
 
-Social Buttons and Colors for [Bulma](http://bulma.io/)
+<p align="center">
+  <strong>Social Buttons and Colors for <a href="https://bulma.io/">Bulma</a></strong>
+</p>
 
-[![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)
+<p align="center">
+  <a href="https://npmjs.com/package/bulma-social"><img src="https://img.shields.io/npm/v/bulma-social.svg?style=flat-square&color=1877F2" alt="npm version"></a>
+  <a href="https://www.jsdelivr.com/package/npm/bulma-social"><img src="https://img.shields.io/jsdelivr/npm/hm/bulma-social?style=flat-square&color=00D1B2" alt="jsDelivr hits"></a>
+  <a href="https://npmjs.com/package/bulma-social"><img src="https://img.shields.io/npm/dm/bulma-social.svg?style=flat-square&color=EA4C89" alt="npm downloads"></a>
+  <a href="https://github.com/aldi/bulma-social/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/bulma-social.svg?style=flat-square&color=10b981" alt="MIT License"></a>
+  <a href="https://awesome.re"><img src="https://img.shields.io/badge/Awesome-Bulma-00D1B2?style=flat-square" alt="Awesome"></a>
+</p>
 
-[Check out the live demo!](http://aldi.github.io/bulma-social)
+<p align="center">
+  <a href="https://aldi.github.io/bulma-social"><strong>📖 View Documentation</strong></a> · 
+  <a href="https://aldi.github.io/bulma-social"><strong>🎨 Live Demo</strong></a> · 
+  <a href="https://github.com/aldi/bulma-social/issues"><strong>🐛 Report Bug</strong></a>
+</p>
 
-![bulma-social-image](docs/assets/images/bulma-social.png)
+![bulma-social-preview](media/preview.webp)
 
-## Installation
+## ✨ 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
 
@@ -18,164 +38,203 @@ Social Buttons and Colors for [Bulma](http://bulma.io/)
 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:
+### pnpm
 
 ```sh
-@import 'bulma-social/css/all.min.css';
+pnpm add bulma-social
 ```
 
-or import certain social providers:
+After installation, import the CSS in your project:
 
-```sh
-@import 'bulma-social/css/single/apple/apple.min.css'
+```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
 
-[https://www.jsdelivr.com/package/npm/bulma-social](https://www.jsdelivr.com/package/npm/bulma-social)
-
-Link all social providers:
+Use via [jsDelivr](https://www.jsdelivr.com/package/npm/bulma-social) — no installation required:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@2/css/all.min.css" />
-```
-
-or link certain social providers:
+<!-- All social providers (~8KB minified) -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bulma-social@3/css/all.min.css"
+/>
 
-```html
+<!-- Or load specific providers -->
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bulma-social@2/css/single/apple/apple.min.css"
+  href="https://cdn.jsdelivr.net/npm/bulma-social@3/css/single/facebook/facebook.min.css"
 />
 ```
 
-## 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-soundcloud`
-- `.is-tumblr`
-- `.is-twitter`
-- `.is-vimeo`
-- `.is-vk`
-- `.is-yahoo`
-- `.is-youtube`
-
-## Available Styles
-
-- `.is-outlined`
-- `.is-inverted`
-- `.is-light`
+---
+
+## 🎨 Supported Social Providers
+
+<table>
+  <tr>
+    <td><code>.is-apple</code></td>
+    <td><code>.is-discord</code></td>
+    <td><code>.is-facebook</code></td>
+    <td><code>.is-github</code></td>
+  </tr>
+  <tr>
+    <td><code>.is-gitlab</code></td>
+    <td><code>.is-instagram</code></td>
+    <td><code>.is-linkedin</code></td>
+    <td><code>.is-microsoft</code></td>
+  </tr>
+  <tr>
+    <td><code>.is-pinterest</code></td>
+    <td><code>.is-reddit</code></td>
+    <td><code>.is-slack</code></td>
+    <td><code>.is-twitter</code></td>
+  </tr>
+  <tr>
+    <td><code>.is-youtube</code></td>
+    <td><code>.is-vimeo</code></td>
+    <td><code>.is-dropbox</code></td>
+    <td><code>.is-bitbucket</code></td>
+  </tr>
+  <tr>
+    <td><code>.is-flickr</code></td>
+    <td><code>.is-foursquare</code></td>
+    <td><code>.is-odnoklassniki</code></td>
+    <td><code>.is-openid</code></td>
+  </tr>
+  <tr>
+    <td><code>.is-soundcloud</code></td>
+    <td><code>.is-tumblr</code></td>
+    <td><code>.is-vk</code></td>
+    <td><code>.is-yahoo</code></td>
+  </tr>
+</table>
+
+---
+
+## 🎭 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
 
-## Available States
-
-- `.is-hovered` and `:hover`
-- `.is-focused` and `:focus`
-- `.is-active` and `:active`
-- `.is-disabled` and `disabled`
-- `.is-static`
-
-## Available Text Color Styles
+```html
+<span class="has-text-facebook">Facebook Blue</span>
+<span class="has-text-facebook-light">Facebook Light</span>
+<span class="has-text-facebook-dark">Facebook Dark</span>
+```
 
-Replace &lt;social-provider&gt;
+### Background Colors
 
-- `.has-text-<social-provider>`
-- `.has-text-<social-provider>-light`
-- `.has-text-<social-provider>-dark`
+```html
+<div class="has-background-facebook">Facebook Background</div>
+<div class="has-background-facebook-light">Light Variant</div>
+<div class="has-background-facebook-dark">Dark Variant</div>
+```
 
-## Available Background Color Styles
+> 💡 Replace `facebook` with any supported provider name.
 
-Replace &lt;social-provider&gt;
+---
 
-- `.has-background-<social-provider>`
-- `.has-background-<social-provider>-light`
-- `.has-background-<social-provider>-dark`
+## 💡 Usage Examples
 
-## Examples
+### Buttons with Text
 
 ```html
-<!-- Buttons with text -->
-<a class="button is-medium is-facebook">
+<a class="button is-facebook">
   <span class="icon">
-    <i class="fab fa-facebook"></i>
+    <i class="fa-brands fa-facebook"></i>
   </span>
-  <span>Facebook</span>
+  <span>Sign in with 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">
+
+<a class="button is-github is-outlined">
   <span class="icon">
-    <i class="fab fa-facebook"></i>
+    <i class="fa-brands fa-github"></i>
   </span>
-  <span>Facebook</span>
+  <span>Continue with GitHub</span>
 </a>
 
-<!-- Icon Buttons -->
-<a class="button is-medium is-facebook">
+<a class="button is-google is-light">
   <span class="icon">
-    <i class="fab fa-facebook fa-lg"></i>
+    <i class="fa-brands fa-google"></i>
   </span>
+  <span>Sign in with Google</span>
 </a>
-<a class="button is-medium is-facebook is-outlined">
-  <span class="icon">
-    <i class="fab fa-facebook fa-lg"></i>
-  </span>
+```
+
+### Icon-Only Buttons
+
+```html
+<a class="button is-facebook">
+  <span class="icon"><i class="fa-brands 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 class="button is-twitter is-outlined">
+  <span class="icon"><i class="fa-brands fa-twitter 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 class="button is-instagram is-inverted">
+  <span class="icon"><i class="fa-brands fa-instagram 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>
-```
+## 📖 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
 
-## Licence 📜
+Released under the [MIT License](LICENSE).
 
-Code released under [the MIT license](https://github.com/aldi/bulma-social/blob/master/LICENSE).
+---