Buttons – A button library built with Sass and Compass | Hacker News Reader

Buttons – A button library built with Sass and Compass

alexwolfe.github.io

119 pointsdjug30 comments

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!

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.

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.

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.

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.

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

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) and pull other elements from other places (e.g. grid from Susy (http://susy.oddbird.net/), which has now been rewritten to not depend on compass anymore).

Bourbon has Neat (http://neat.bourbon.io/) now, which is a lightweight responsive grid framework. No compass anymore!

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.

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

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'?

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.

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

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 :)

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

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 :)

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

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?

Ah, ya, I guess the examples didn't get updated.

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

i only ask for slightly shorter class names

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

totally valid too :)

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.

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.

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.

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

And another analogy I'd point out is if you're in Photoshop (or in browser), and you use something like icomoon app to make a nice set of font icons and then style some texture/shapes/etc. behind it for something pretty nice. I feel like that would be a completely valid and workable approach...that said, sometimes you'd want to make the artwork from scratch yourself and that would be valid too

I agree to an extent. In corporates etc. you're going to be building from scratch because these things won't fit in with guidelines and it's easier to build from scratch. However, it's good for quickness when working on personal projects. That being said I do find this one a little overkill and more than what you'd probably want without creating custom builds etc. also some of the behaviour and styling doesn't work as I'd assume. For example, drop down isn't drop down, it's more like drop on.

I agree with part of your point - I probably won't be plugging it into a project and using it as-is, but I can appreciate the source being out there. I often check the source for projects I respect to see how they accomplished similar things to what I'm trying to accomplish. For those learning advanced CSS and hoping to roll their own button styles, this could be a useful resource.

Reply on news.ycombinator.com