lipis / bootstrap-social Goto Github PK
View Code? Open in Web Editor NEW:couple: Social Sign-In Buttons for Bootstrap
Home Page: https://lipis.github.io/bootstrap-social/
License: MIT License
:couple: Social Sign-In Buttons for Bootstrap
Home Page: https://lipis.github.io/bootstrap-social/
License: MIT License
Chrome's 'Reduce data usage' option breaks the CSS of bootstrap-social. Chrome is removing a space from .btn-social-icon :first-child
selector, checkout this SO issue.
I've fixed it by adding a child selector everywhere where :first-child
is used, it became
> :first-child
Maybe it would make sense to make this change in the main lib itself? I think, it would make bootstrap-social more stable.
Not so much the sign in, but a button that matches the theme of the others would be nice for linking my steam profile on my website :D
Any chance of having this standalone w/o needing to include bootstrap? Thanks!
I was able to convert bootstrap-social from LESS to SCSS without too much pain. It's exactly the same number of LoC.
Would you like me to send a PR or are you planning to keep it css and LESS only?
Running bootstrap-social through csslint fails on
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.2);
There is no fallback for rgba. S/B
border-right: 1px solid rgb(0, 0, 0);
border-right: 1px solid rgba(0, 0, 0, 0.2);
Hi, Here is the css to add the button youtube, convert it into less ;)
.btn-youtube{color:#fff;background-color:#DC2725;border-color:rgba(0,0,0,0.2)}.btn-youtube:hover,.btn-youtube:focus,.btn-youtube:active,.btn-youtube.active,.open>.dropdown-toggle.btn-youtube{color:#fff;background-color:#B21E1C;border-color:rgba(0,0,0,0.2)}
.btn-youtube:active,.btn-youtube.active,.open>.dropdown-toggle.btn-youtube{background-image:none}
.btn-youtube.disabled,.btn-youtube[disabled],fieldset[disabled] .btn-youtube,.btn-youtube.disabled:hover,.btn-youtube[disabled]:hover,fieldset[disabled] .btn-youtube:hover,.btn-youtube.disabled:focus,.btn-youtube[disabled]:focus,fieldset[disabled] .btn-youtube:focus,.btn-youtube.disabled:active,.btn-youtube[disabled]:active,fieldset[disabled] .btn-youtube:active,.btn-youtube.disabled.active,.btn-youtube[disabled].active,fieldset[disabled] .btn-youtube.active{background-color:#DC2725;border-color:rgba(0,0,0,0.2)}
.btn-youtube .badge{color:#DC2725;background-color:#fff}
For less
.btn-youtube { .btn-social(#DC2725); }
Please add a Youtube button with the fa-youtube icon or (alternatively fa-youtube-play)
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library lipis/bootstrap-social
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "lipis/bootstrap-social",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Brilliant work!
Any chance of a lanyrd (http://lanyrd.com/) icon? It's the one that's always missing from a font kit/ web font.
Shadows and background images cause UI problems in Bootstrap 3.
You can add the line to get the desired appearance:
.btn{text-shadow:none;background-image:none;-webkit-box-shadow:none;box-shadow:none}
Looking for a pinterest button :)
I'd like to suggest you bundle Bootstrap Social as a package for Composer & submit it to Packagist.
The process is as simple as creating a composer.json
file & submitting the GitHub URL on Packagist. If you also authorise Packagist in the GitHub project settings then your updates to Bootstrap Social automagically go to Packagist.
An example of a web assets package bundled like this is metisMenu, & on Packagist.
With Bootstrap Social bundled like this, any developer who declares it as a dependancy has it updated any time they run composer update
on their project.
That would be a great addition to a awesome library.
Hello!
I am trying to use your library for angular-fullstack/generator-angular-fullstack#640
but I cannot find any sass version. Is there any sass fork?
Thank you for your help!
Best regards,
Andrej
Hi!
very nice job can you add also login with Amazon button?
Thanks.
L.
I've added the less file file to my project but I'm having issues compiling:
SyntaxError: .button-variant is undefined in client_src\css_core\social-buttons.less on line 94, column 22:
Any suggestions?
I get this error in Codekit, I import bootstrap-social after bootstrap in my main scss file.
Please host on CDN if possible
If put some spin icon instead of social icon (e.g. after button is clicked), right border of icon is rotating with the icon.
[a class="btn btn-block btn-social btn-facebook"]
[i class="fa fa-spinner fa-spin"][/i] Sign in with Facebook
[/a]
Hello,
There's a npm repository in the npmjs.org
https://www.npmjs.com/package/bootstrap-social
I don't know if this is official and maintained by you or not, but if it is official, could you please take time to update this? If not, are there any plans to add this to npm as official repository?
Thanks in advance,
Hi, I've added bootstrap and font awesome, and added bootstrap-social.css from the root of the repo. I then added the example HTML, and got this:
Am I using the wrong .css file? I didn't see a /css folder as instructed in step 2 of http://lipis.github.io/bootstrap-social/
Using the split button drop down example provided by bootstrap:
http://getbootstrap.com/components/#btn-dropdowns-split
split portion of drop down is not displayed properly when setting the class of both buttons in the bootstrap example to:
"btn btn-block btn-social btn-facebook".
or other combinations of css classes with the two buttons. I did not see any css for btn-group within your bootstrap-social.css.
this would be great if your project was fully usable with bootstrap.
Thanks for keeping up this cool project.
Please add a SoundCloud button with the new fa-soundcloud icon introduced in Font Awesome 4.1.0
font-awesome already has a Spotify icon, you just need to add the color: #6ab233
Button color from: https://developer.spotify.com/download/guidelines/ux-with-other-brands.pdf
(You'll have to convert the green to HEX to verify)
Styling of the buttons are not shown when used along with Bootstrap Material. It just shows a plain button without any styles.
It would be awesome to have RSS aggregator logins such as feedly, goodreader, minimalreader, etc.
A StackExchange login button would be great!
Perhaps you can add it?
The fa-adn icon already exists. Only the button missing! I really appreciate this project :)
EDIT: And sorry, it should obviously be btn-adn in the title..
As FontAwsome now has Slideshare, it might be nice to add it to this collection.
Is there any quick way of putting these is a group and making it spread evenly across a div?
Can !important be added to all of the color and background-color attributes? I place the social buttons into navbar dropdowns and the colors are getting overridden by the Bootstrap CSS, but adding !important seems to fix the issue.
Probably not a bootstrap-social issue, but...
When I test locally, I have no issue.
After deploying (to gh-pages), social icons are not rendered because fontawesome web fonts were not uploaded...
Any hint about the grunt config for this small issue?
Just for info:
unfourtunately, Adblock filters bootstrap-social:
https://easylist-downloads.adblockplus.org/fanboy-social.txt
Is there a way to prevent this?
Best, Thomas
URL: https://angel.co
Angel list offers Auth Api: https://angel.co/api
i propose using the adding google class to the css.
Just the same as google-plus but with other nbame because mostly google is set as the provider and not google plus.
In bootstrap3 doesn't exists the mixin .btn-pseudo-states() (line 20 on bootstrap-social-3.less) that's why the console throws an error to at moment to compile the file bootstrap-social-3.less, so it seems to me that it right to use .button-variant() instead of .btn-pseudo-states().
good library (y) !
I can see commit with added Pinterest button, but it's not tagged yet, so bower install
command downloads package without this button.
I got this error message at line 10.
It used to be here:
http://lipis.github.io/bootstrap-social/bootstrap-social.css
but no more...
Hello,
We have just add Bootstrap-social to twittstrap resources list
http://www.twittstrap.com/resources/details/bootstrap-social
Under : Components
Regards
Please add a Vimeo button with the fa-vimeo-square icon
Currently you have font-awesome as a requirement when installing bootstrap-social using bower. However bootstrap-social will also work nicely with any other icon set like Socicon or Elusive icons.
Please put font-awesome in the devDependencies section intead.
The logo and colors of Foursquare were changed.
Their mobile applications are already updated.
https://ru.foursquare.com/about/logos
Foursquare Brand Guide PDF — https://playfoursquare.s3.amazonaws.com/press/foursquare-brandguide.pdf
Primary colors (order preserved as it is in pdf):
FS Watermelon — #F94877
FS Navy — #0732A2
FS Blue — #2D5BE3
Logo EPS:
https://playfoursquare.s3.amazonaws.com/press/2014/foursquare-logomark.eps
https://playfoursquare.s3.amazonaws.com/press/2014/foursquare-logomark-white.eps
As I understood from the PDF, you should use either FS Watermelon (#F94877) backround and white logo, or white/light gray backround and FS Watermelon (#F94877) logo.
See FortAwesome/Font-Awesome#4077 for the new logo request.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.