aldi / Bulma Social
Licence: mit
🤳 Social Buttons and Colors for Bulma
Stars: ✭ 114
Labels
Projects that are alternatives of or similar to Bulma Social
Minelab
GitLab inspired Sass theme for Redmine 2.5.x using Font Awesome, with support for Redmine CRM plugins.
Stars: ✭ 129 (+13.16%)
Mutual labels: font-awesome, sass
Devfolio
A simple, responsive, single-page portfolio and resume for developers built with Bulma, Sass, Font Awesome and Flickity.
Stars: ✭ 320 (+180.7%)
Mutual labels: sass, bulma
Aspnetcore Vue Typescript Template
Template AspNetCore with Vue, Vue router, Vuex, TypeScript, Bulma, Sass and Jest
Stars: ✭ 215 (+88.6%)
Mutual labels: sass, bulma
Ruby2 Rails4 Bootstrap Heroku
A starter application based on Ruby 2.4, Rails 4.2 and Bootstrap for Sass 3, deployable on Heroku
Stars: ✭ 181 (+58.77%)
Mutual labels: font-awesome, sass
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (+130.7%)
Mutual labels: sass, bulma
Es6 Webpack2 Starter
🚀 A template project for es6/7, webpack2/3, sass and postcss
Stars: ✭ 106 (-7.02%)
Mutual labels: sass
Plate
Plate: a super stripped-down WordPress starter theme for developers.
Stars: ✭ 110 (-3.51%)
Mutual labels: sass
Bootstrap 4 Utilities
Bootstrap 4 utility classes in LESS CSS for Bootstrap 3 or any other projects.
Stars: ✭ 105 (-7.89%)
Mutual labels: sass
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: ✭ 103 (-9.65%)
Mutual labels: sass
Tinseltown.js
A lightweight CSS/JS library for faux hacker-movie-style page loading effects
Stars: ✭ 113 (-0.88%)
Mutual labels: sass
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (-1.75%)
Mutual labels: sass
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (-3.51%)
Mutual labels: sass
Portfolio one Page Template
Free responsive one page portfolio template
Stars: ✭ 106 (-7.02%)
Mutual labels: sass
Mdl Ext
Material Design Lite Ext: Components built with Google Material Design Lite framework. http://leifoolsen.github.io/mdl-ext/
Stars: ✭ 112 (-1.75%)
Mutual labels: sass
Bitters
Bitters is maintained by the thoughtbot design team. It is funded by
thoughtbot, inc. and the names and logos for thoughtbot are
trademarks of thoughtbot, inc.
Stars: ✭ 1,398 (+1126.32%)
Mutual labels: sass
Kulfon
👹 🐸 JavaScript static site generator with Org Mode & Markdown support (α) 💥
Stars: ✭ 112 (-1.75%)
Mutual labels: sass
Bulma-Social
Social Buttons and Colors for Bulma
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/[email protected]/css/all.min.css" />
or link certain social providers:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/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-soundcloud.is-tumblr.is-twitter.is-vimeo.is-vk.is-yahoo.is-youtube
Available Styles
.is-outlined.is-inverted.is-light
Available States
-
.is-hoveredand:hover -
.is-focusedand:focus -
.is-activeand:active -
.is-disabledanddisabled .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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].