alexwolfe / buttons Goto Github PK
View Code? Open in Web Editor NEWA CSS button library built using Sass and Compass
Home Page: http://unicorn-ui.com/buttons/builder/
License: Other
A CSS button library built using Sass and Compass
Home Page: http://unicorn-ui.com/buttons/builder/
License: Other
I want to convert to rails-assets so I can use it in my rails app, but it is missing versions.
Thanks.
Hi Alex,
thanks a lot for awesome buttons, I appreciate your work.
Rafał
Your implementation of the menu buttons requires an exclusive click to dismiss the menu. So if the user intended to click elsewhere, it would take 2 clicks. I noticed that the menu actually hijacks all of the web page interaction by adding an overlay on top. This doesn't help with the user experience. An easy way to test this in your demo is to click across multiple menu buttons and see how it takes 2 clicks every time you want to click the next item.
If you try the bootstrap demo below (and other frameworks, e.g. ExtJS), you'll see that you only need to click once to jump to the next menu or to click on a different component: http://getbootstrap.com/components/#btn-dropdowns
Another example is GitHub. Click "This repository" to reveal the search options, then click the search field next to it. It takes just a click to switch.
I was trying to compile the sass files with gulp-autoprefixer.
However the autoprefixer shows error:
"Gradient has outdated direction syntax. New syntax is like "to left" instead of "right"."
$ubtn-use-compass is set to false
The correct command to install your library is bower install Buttons
(capital B)
If you go to the Button Sizes section of the builder page, and increase the "normal" sized button by 2px (up to 16px) the button looked correct in relation to the small and large buttons.
With Sass 3.3.4 (Maptastic Maple)
Am getting a lot of noisy warnings along the lines of
DEPRECATION WARNING on line 17 of sass/base/buttons/_buttons.scss:
Assigning to global variable "$unicorn-btn-tinyfs" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$unicorn-btn-tinyfs: $unicorn-btn-font-size - 2 !global" instead.
Note that this will be incompatible with Sass 3.2.
the buttons library also seems to add a lot to compile time
is that normal?
Upshot being I'm thinking there is more to this than noise - ie just adding :quiet isn't going to resolve that.
How would you feel about updating to the new global variable approach?
how can i extend from your library?
for example i want my all buttons have a style as
class='button button-rounded button-flat-primary'
I could not find what to extend in my scss...
thanks
Just like the title says
when I use it with bootstrap, and when I use <a></a>
, the button goes ugly!
Because the <a>
in bootstrap will override the button while there's no CSS that like a.button
.
hello!
Great work you are sharing here. Thank you!
Is there somewhere a list of supported browsers?
Change text on buttons not only press me
Hi
does exist a way to change the button color ? if not, can it be possible to override the gradient via the provided class .button ?
thanks
In the homepage http://unicorn-ui.com/buttons/ displayed by IE11, in the third button group (Royal / Raised), an aliasing effect affect the 1st- and 3rd-button borders, varying at window resize.
Therefore the buttons seem to be in different states.
I couldn't reproduce this issue with Firefox or Chrome so maybe it's an IE bug.
Add :focus styles to help keyboard users indicate when a button is in focus, remove outline:none
I'm not sure why our unicorn-ui github doesn't have an issues cc / @alexwolfe .. but I'm about to fix something for Mavenlink where we need to convert anchor's without href's to buttons that "look like links" e.g. a typical grey Cancel button link thingy :) I noticed bootstrap has a btn-link and I'm going to do something like that for Mavenlink. But we probably ought to add that to this library when we can and I'm just capturing that here. See http://getbootstrap.com/css/#buttons-options
By looking at the code, I can say there is something going wrong here: https://github.com/alexwolfe/Buttons/blob/master/scss/_base.scss#L91.
It should be @else
, not else
.
weird
Hi
does exist a list for icons usage ? because it seem to be different than bootsrap ones.
because i would to use ones for facebook or twitter like:
<i class="fa fa-facebook-square"></i>
thanks
Any reason you don't use Sass maps here: https://github.com/alexwolfe/Buttons/blob/master/scss/_options.scss#L46?
I need buttons that have boolean state (on|off). After doing research the :active
state is unsuitable for this http://stackoverflow.com/questions/12960068/keep-css-active-state-after-click-with-jquery more preferable is to add an .active
class. Then in jquery you can do $('button').toggleClass('active')
upon click. I just tried this out on my local build, all I had to do in the css is to replace every instance of :active
to .active
. I propose this library drop support for :active
and switch over to using a class.
Are you guys going to add more flat button designs?
Hello,
When i am running npm run dev it shows warning like this
sass/buttons/buttons.scss:1004:3: Gradient has outdated direction syntax. New syntax is like
to leftinstead of
right.
please fix it
I see at the very bottom of http://alexwolfe.github.io/Buttons/ it is Apache 2 license. Consider adding a LICENSE file to master branch. Nice work!
Hi,
I wanted to change the properties set in _options.scss
, but as the properties are not flagged with !default
, I could not do it without editing the file itself... so I had to add the Buttons library into git and edit the file. But I would prefer to avoid this solution, in order to keep a better overview on the overrides I perform...
Feel free to confirm here.
You can also check on the Google Chrome audits, under accessibility.
When clicking the buttons within Firefox it shows a dotted outline. This outline can be removed from anchor tags with this:
a:focus {
outline: none;
}
If you are working with button tags, which I don't think you are, you can use this:
button::-moz-focus-inner {
border: 0;
}
Showcase demo provided in documentation is currently not working, seems like some sort of hosting problem - see http://unicorn-ui.com/buttons/
Redirects to generic Account Suspended page
This Account has been suspended.
Contact your hosting provider for more information.
Hi there,
A simple question,how can I go to the link when I remplace the ?
When I click on buttons I cannot go to the link that I use.
Thanks
any where good job for this design buttons
Any reason you still use an old version of the micro-clearfix: https://github.com/alexwolfe/Buttons/blob/master/scss/_mixins.scss#L39-L53?
You could switch to:
.clearfix::after {
content: '';
display: table;
clear: both;
}
Drop down menu not working when clicking exactly over the icon "fa fa-caret-down"
<div class="button-group">
<button type="button" class="button button-primary button-small"><i class="fa fa-edit"></i></button>
<span class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
<a href="#" class="button button-primary button-small"><i class="fa fa-caret-down"></i></a>
<ul class="button-dropdown-list is-below">
<li class="button-dropdown-divider"><a href="#">Duplicate</a></li>
<li class="button-dropdown-divider"><a href="#">Delete</a></li>
</ul>
</span>
</div>
Is there anyone who knows how to implement this library with Laravel 5.1?
I find it difficult to integrate using elixir.
thanks.
Hi there, just found this project and great work. Attempting to integrate it into a project I am working on.
I am running Sass 3.3.8 and getting a lot of deprecation warning when compiling.
DEPRECATION WARNING on line 18 of /....../_buttons.scss:
Assigning to global variable "$unicorn-btn-smallfs" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$unicorn-btn-smallfs: $unicorn-btn-font-size + 1 !global" instead.
Note that this will be incompatible with Sass 3.2.
Is this a known issue or being addressed?
Thank you
HI guys,
love your buttons. I just wanted to use a few in existing project, so maybe i forgot to copy from your files. but getting this Undefined mixin 'box-shadow'. I can not see where in your files you define it. thanks
[21:33:42] gulp-notify: [Error running Gulp] styles failed, check the logs..
[21:33:42] styles error: Error in plugin 'gulp-sass'
Message:
bower_components/Buttons/scss/types/_longshadow.scss
21:16 error parsing interpolated value
Details:
column: 16
line: 21
file: /Users/rolle/Projects/dudetest/bower_components/Buttons/scss/types/_longshadow.scss
status: 1
messageFormatted: bower_components/Buttons/scss/types/_longshadow.scss
21:16 error parsing interpolated value
What I'm using:
"bower": "^1.4.1",
"browser-sync": "~2.7.12",
"gulp": "^3.9.0",
"gulp-autoprefixer": "2.3.1",
"gulp-cache": "0.2.10",
"gulp-changed": "^1.2.1",
"gulp-concat": "2.5.2",
"gulp-css-globbing": "^0.1.8",
"gulp-header": "1.2.2",
"gulp-imagemin": "^2.2.1",
"gulp-minify-css": "1.1.6",
"gulp-notify": "^2.2.0",
"gulp-pixrem": "^0.2.3",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "1.2.0",
"gulp-util": "^3.0.5",
It works when if I disable Long Shadow Function all together.
@alexwolfe Trever showed me a that currentColor is a bonafide CSS value that will keep these in sync. It's not a big deal but a nicety that if you change one color the other just automatically changes. I think Trever's gonna take this one.
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.