7 ms·

Buttons – A button library built with Sass and Compass

119 points by djug 12y ago

audiodude 12y ago
This is amazing, very well done, perfect for what I needed! I was scouring the web for simple buttons all morning and couldn't quite find anything I liked. I was getting ready to include a "custom" Boostrap with just the buttons, but this is much better. Thanks!
liquidise 12y ago
For those who, like me, were unsure what Compass was, and realized simply googling for it would be less successful than other library names. Compass: http://compass-style.org http://compass-style.org
- antihero 12y ago
  Not sure what it's like now, but a fair few of the frontend people I've worked with were complaining about it a few months ago because the mixins it provides were unreliable.
- te_chris 12y ago
  Compass isn't very well maintained and someone I work with even said it may be discontinued. I'd look at a lighter mixin lib like bourbon (http://bourbon.io http://bourbon.io) and pull other elements from other places (e.g. grid from Susy (http://susy.oddbird.net/ http://susy.oddbird.net/), which has now been rewritten to not depend on compass anymore).
  - alex_doom 12y ago
    Bourbon has Neat (http://neat.bourbon.io/ http://neat.bourbon.io/) now, which is a lightweight responsive grid framework. No compass anymore!
ttty 12y ago
I still prefer to make my own simple and flat design (:
- roblevintennis 12y ago
  totally valid too :)
h1fra 12y ago
I don't want to be that guy but.. What's the point? Unless you are the most lazy ass on earth you still want to modify the style. And by style I mean, everything, to fit your design.
- wuliwong 12y ago
  I'm not sure I understand your point? From my perspective, modifying is easier than making from scratch. The only time I've created buttons "from scratch" is when I was working with a graphic designer. As a developer, I always pull in things like this to speed up the process. It is undoubtably slower and would result in a worse final product if I attempt to learn all the details of what this person provides for free as a starting point.
- scottydelta 12y ago
  I totally agree with wuliwong, infact I have never edited any design and have always used available ones(bootstrap) out of the box to save time as my motive as a developer is a clean working app than a beautiful app.
  - roblevintennis 12y ago
    Guys, I sit somewhere in the middle on this. In fact, I'd say the ever hated "it depends"...are you in the prototyping phase? Have you toggled off the Buttons you don't want in the Builder page? If you're really into customizing, have you just considered stealing some of the raw ideas and/or scss? Really, we wouldn't mind :) Here's another approach...say you just want the pills and like the general direction but want to tweak it: Go to the builder page, remove all but pills Go in to the _options.scss partial and tweak some more Optionally take all of what's left and then refactor to your liking I'd claim you save some time with above and still get a fully customized button. Regarding using something like Bootstrap "out of the box" is not something I'd personally want to do once getting my project into production...but again, I'm fine using for just prototyping and then tweaking the styles later. That said, to each is own
    - roblevintennis 12y ago
scottydelta 12y ago
I have been using bootstrap as it is easy to integrate as a backend developer but now starting to hate it, It seems so ugly now after using it for a while. will use this soon :)
scottydelta 12y ago
What is the UI framework that you are using on the webpage?
- roblevintennis 12y ago
  Hrm, no real UI framework. I think a bit of backbone and some jquery libs like scrollto and pretty-something for the code samples (it's all in the view source hehe)...anyway, the real magic of how this works for those inclined is it's a gh-pages branch for the site, which makes jsonp requests to heroku where the buttons are compiled per the options you've selected, and then finally archived and returned to user. It was a fun constraint to work out but turned out to be doable and fun...but guys, pretty please don't DOS it :)
jneal 12y ago
Pretty nice. I saw the 3D buttons, and my initial reaction was they looked a little bland. Then I clicked and saw it press in and immediately my opinion changed because it looked very cool.
- harlanlewis 12y ago
  They definitely look cool, but also made me think I need to keep my trackpad pressed against my desk until the button had been fully depressed before any action would occur. Trained by too many 'slide from here to there to confirm' interactions, I suppose.
  - darushimo 12y ago
    I'd actually say this is a usability problem. If i just tap my touchpad (on MBP), there's a click event registered, but it's very, very short. the response from the button depends on the duration of the click event. If I click and hold down the touchpad, i see the whole animation, but if i don't and just tap, i see either a quick flash or no animation at all. This could be really confusing, especially with the skeumorphic buttons that look like they would react in they were clicked ("I clicked it, but did the click register?") This could be fixed by adding a minimum click length for the current animation to occur. If the click length is lower, the full (or a partial) animation could just automatically occur at a fixed (fast) rate.
    - alexwolfe 12y ago
      Nice point, make a pull request and I'll merge, or you could file an issue and I'll fix it when I have some time.
Edd314159 12y ago
Why do the "flat" buttons suddenly turn 3D while active (pressed)? That's a mixed metaphor if I've ever seen one.
- nilliams 12y ago
  Why? They're flat and simple because (if you buy into the flat movement's sentiment) we don't need skeumorphism to distinguish a button anymore, but when you press it it does something 'because feedback'. It doesn't really matter what it does, we just need to know we pressed it, so why shouldn't the thing it does be 'go a bit 3d'?
- fibbery 12y ago
  I noticed that as well... it's pretty visually awkward, going from no button-like affordances to suddenly having them appear during the click event.
manishsharan 12y ago
This so much nicer than SASSY buttons , which is what I have been using. https://github.com/jhardy/Sassy-Buttons https://github.com/jhardy/Sassy-Buttons
douglee650 12y ago
i only ask for slightly shorter class names
mwalsh 12y ago
Frankly, it's inexcusable for a style library/framework intended for mass consumption to forget the :focus state on form elements.
- roblevintennis 12y ago
  But didn't that get merged in to the last github on [master]? I believe so. Are you not seeing those come through from the Builder page or something?
  - mwalsh 12y ago
    Ah, ya, I guess the examples didn't get updated.
SimeVidas 12y ago
Look at all those butt… I mean, links :P

119 points by djug 12y ago

This is amazing, very well done, perfect for what I needed! I was scouring the web for simple buttons all morning and couldn't quite find anything I liked. I was getting ready to include a "custom" Boostrap with just the buttons, but this is much better. Thanks!

liquidise 12y ago

For those who, like me, were unsure what Compass was, and realized simply googling for it would be less successful than other library names. Compass: http://compass-style.org http://compass-style.org

antihero 12y ago
Not sure what it's like now, but a fair few of the frontend people I've worked with were complaining about it a few months ago because the mixins it provides were unreliable.
te_chris 12y ago
Compass isn't very well maintained and someone I work with even said it may be discontinued. I'd look at a lighter mixin lib like bourbon (http://bourbon.io http://bourbon.io) and pull other elements from other places (e.g. grid from Susy (http://susy.oddbird.net/ http://susy.oddbird.net/), which has now been rewritten to not depend on compass anymore).
- alex_doom 12y ago
  Bourbon has Neat (http://neat.bourbon.io/ http://neat.bourbon.io/) now, which is a lightweight responsive grid framework. No compass anymore!

ttty 12y ago

I still prefer to make my own simple and flat design (:

roblevintennis 12y ago
totally valid too :)

h1fra 12y ago

I don't want to be that guy but.. What's the point? Unless you are the most lazy ass on earth you still want to modify the style. And by style I mean, everything, to fit your design.

wuliwong 12y ago
I'm not sure I understand your point? From my perspective, modifying is easier than making from scratch. The only time I've created buttons "from scratch" is when I was working with a graphic designer. As a developer, I always pull in things like this to speed up the process. It is undoubtably slower and would result in a worse final product if I attempt to learn all the details of what this person provides for free as a starting point.
scottydelta 12y ago
I totally agree with wuliwong, infact I have never edited any design and have always used available ones(bootstrap) out of the box to save time as my motive as a developer is a clean working app than a beautiful app.
- roblevintennis 12y ago
  Guys, I sit somewhere in the middle on this. In fact, I'd say the ever hated "it depends"...are you in the prototyping phase? Have you toggled off the Buttons you don't want in the Builder page? If you're really into customizing, have you just considered stealing some of the raw ideas and/or scss? Really, we wouldn't mind :) Here's another approach...say you just want the pills and like the general direction but want to tweak it: Go to the builder page, remove all but pills Go in to the _options.scss partial and tweak some more Optionally take all of what's left and then refactor to your liking I'd claim you save some time with above and still get a fully customized button. Regarding using something like Bootstrap "out of the box" is not something I'd personally want to do once getting my project into production...but again, I'm fine using for just prototyping and then tweaking the styles later. That said, to each is own
  - roblevintennis 12y ago

scottydelta 12y ago

I have been using bootstrap as it is easy to integrate as a backend developer but now starting to hate it, It seems so ugly now after using it for a while. will use this soon :)

scottydelta 12y ago

What is the UI framework that you are using on the webpage?

roblevintennis 12y ago
Hrm, no real UI framework. I think a bit of backbone and some jquery libs like scrollto and pretty-something for the code samples (it's all in the view source hehe)...anyway, the real magic of how this works for those inclined is it's a gh-pages branch for the site, which makes jsonp requests to heroku where the buttons are compiled per the options you've selected, and then finally archived and returned to user. It was a fun constraint to work out but turned out to be doable and fun...but guys, pretty please don't DOS it :)

jneal 12y ago

Pretty nice. I saw the 3D buttons, and my initial reaction was they looked a little bland. Then I clicked and saw it press in and immediately my opinion changed because it looked very cool.

harlanlewis 12y ago
They definitely look cool, but also made me think I need to keep my trackpad pressed against my desk until the button had been fully depressed before any action would occur. Trained by too many 'slide from here to there to confirm' interactions, I suppose.
- darushimo 12y ago
  I'd actually say this is a usability problem. If i just tap my touchpad (on MBP), there's a click event registered, but it's very, very short. the response from the button depends on the duration of the click event. If I click and hold down the touchpad, i see the whole animation, but if i don't and just tap, i see either a quick flash or no animation at all. This could be really confusing, especially with the skeumorphic buttons that look like they would react in they were clicked ("I clicked it, but did the click register?") This could be fixed by adding a minimum click length for the current animation to occur. If the click length is lower, the full (or a partial) animation could just automatically occur at a fixed (fast) rate.
  - alexwolfe 12y ago
    Nice point, make a pull request and I'll merge, or you could file an issue and I'll fix it when I have some time.

Edd314159 12y ago

Why do the "flat" buttons suddenly turn 3D while active (pressed)? That's a mixed metaphor if I've ever seen one.

nilliams 12y ago
Why? They're flat and simple because (if you buy into the flat movement's sentiment) we don't need skeumorphism to distinguish a button anymore, but when you press it it does something 'because feedback'. It doesn't really matter what it does, we just need to know we pressed it, so why shouldn't the thing it does be 'go a bit 3d'?
fibbery 12y ago
I noticed that as well... it's pretty visually awkward, going from no button-like affordances to suddenly having them appear during the click event.

manishsharan 12y ago

This so much nicer than SASSY buttons , which is what I have been using. https://github.com/jhardy/Sassy-Buttons https://github.com/jhardy/Sassy-Buttons

douglee650 12y ago

i only ask for slightly shorter class names

mwalsh 12y ago

Frankly, it's inexcusable for a style library/framework intended for mass consumption to forget the :focus state on form elements.

roblevintennis 12y ago
But didn't that get merged in to the last github on [master]? I believe so. Are you not seeing those come through from the Builder page or something?
- mwalsh 12y ago
  Ah, ya, I guess the examples didn't get updated.

SimeVidas 12y ago

Look at all those butt… I mean, links :P