Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap 4 Support #123

Open
niftylettuce opened this issue Aug 10, 2016 · 13 comments
Open

Bootstrap 4 Support #123

niftylettuce opened this issue Aug 10, 2016 · 13 comments

Comments

@niftylettuce
Copy link

Per my findings here twbs/bootstrap#19877 and here #91, there are a few missing variables.

// bootstrap-social
$line-height-computed: floor(($font-size-base * $line-height-base));
$padding-base-vertical: $btn-padding-y;
$padding-base-horizontal: $btn-padding-x;
$font-size-large: $font-size-lg;
$padding-large-vertical: $btn-padding-y-lg;
$padding-large-horizontal: $btn-padding-x-lg;
$font-size-small: $font-size-sm;
$padding-small-vertical: $btn-padding-y-sm;
$padding-small-horizontal: $btn-padding-y-sm;

@import '../../../node_modules/bootstrap-social/bootstrap-social.scss';

However I noted that the sizing of the buttons seems to be off still with V4, so if I use this package, and the above code, but exclude the class btn-social, it at least sets the colors for me.

@niftylettuce
Copy link
Author

I am using this in CrocodileJS at https://github.com/crocodilejs/crocodile-node-mvc-framework (release v1.0.0 will be out soon with this included).

screen shot 2016-08-10 at 12 49 26 pm

@lipis
Copy link
Owner

lipis commented Sep 6, 2016

Soon I'll have to check what is going to happen with BS4 :)

@gitviola
Copy link

+1

1 similar comment
@anysomewhere
Copy link

+1

@vvzen
Copy link

vvzen commented Feb 14, 2017

+1 !

EDIT: It seems to be working fine..
Here's what happens when I tried it :

bootstrap-social-issue-2

@niftylettuce
Copy link
Author

niftylettuce commented Sep 18, 2017

Update: Bootstrap 4 Beta's button-variant mixin has changed per twbs/bootstrap@597e9f8#diff-edb9cd89b66120ef946a81de31f6bb06R6.

You need to modify bootstrap-social to use a different approach. Bootstrap 4 Beta has a mixin called color-yiq that automatically calculates the best font color for a button depending the background-color, so we don't need to explicitly pass a font color.

You can use my fork if interested until my pull request for BS 4 support at #162 is accepted and released:

npm install niftylettuce/bootstrap-social#gh-pages

or if you're using yarn:

yarn add niftylettuce/bootstrap-social#gh-pages

I've opened a pull request for adding Bootstrap 4 support.

@niftylettuce
Copy link
Author

niftylettuce commented Sep 18, 2017

Hi folks, see http://niftylettuce.com/bootstrap-social/ for documentation for Bootstrap 4 Beta until my pull request is accepted. Thanks! Make sure you yarn add niftylettuce/bootstrap-social#gh-pages. Otherwise see my fork at https://github.com/niftylettuce/bootstrap-social for the latest assets.

@niftylettuce
Copy link
Author

PR added #162

@ivanmaxlogiudice
Copy link

@niftylettuce u need update the live demo link in ur fork

@niftylettuce
Copy link
Author

@Sylvert0 done, thx

@mallardduck
Copy link

Hey, just wanted to bump this PR to see if it can be merged into a major release soon?
Would love to start using this but my project is already using bootstrap 4.0.

@zgoda
Copy link

zgoda commented May 30, 2018

B4 left beta in January 2018, now it's at 4.1.

@Woodehh
Copy link

Woodehh commented Jun 14, 2018

I've created a solution myself:
https://github.com/Woodehh/social-buttons

It doesn't depend on Bootstrap in any way, so future proof! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants