Bulma-Social v2.1.0

Social Buttons and Colors for Bulma

View on GitHub Download

Customize

Compile your prefered collection of social providers in a single CSS file

The social-providers/all.sass file is where the magic happens.

In this page, we are going to see how we can create our own custom CSS file.


Steps to follow:

  1. Download or clone Bulma-Social from Github
  2. Open the Bulma-Social folder in your favourite Code Editor
  3. Open the all.sass that is located in sass/social-providers folder
  4. Scroll throught the bottom of the file and find the $socialProvidersList variable
  5. Delete the social providers variables (colored in blue) that you don't need (e.g. $discordColours):
  6. // Remove the social providers you don't need and then run "npm run build"
    // Merge social provider maps to a single variable
    $socialProvidersList: combineSocialProviders($appleColours, $bitbucketColours, $discordColours, $dropboxColours, $facebookColours, $flickrColours, $foursquareColours, $githubColours, $gitlabColours, $instagramColours, $linkedinColours, $microsoftColours,$odnoklassnikiColours, $openidColours, $pinterestColours, $redditColours, $slackColours, $soundcloudColours, $tumblrColours, $twitterColours, $vimeoColours, $vkColours, $yahooColours, $youtubeColours)
    
  7. Save the file
  8. Open your console and run npm run build
  9. Done! Your files are ready for use in the CSS folder.