Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ink – Interface Kit

ink.sapo.pt

Post reply on HN
Print view View original

61–70 of 73 posts

Re: Ink – Interface Kit

#61

Post by tracker1 »

mmatants wrote: post #26
lewisflude wrote: post #24

Earlier quoted context omitted.

Sometimes introducing more markup can be better architecturally. I agree, .control-group isn't the nicest way of doing things but I don't think nesting an input inside a label is any better.

I do not see any disadvantages to nesting inputs inside labels - and it's actually quite semantic and maintainable (in part because inputs no longer need auto-generated IDs). This approach has been part of the HTML standard pretty much always, as well. It doesn't matter much if forms are generated using a builder like Formtastic, etc. But even then less custom CSS classes is usually better. This way I have been able…

When you put a label with text and the input inside, how would you get the text to take up 150px and the input to be to the right of that consistently across a large form? Such as here: https://www.roadreadycertified.com/order/begin/

Note: It's just an example, not promoting the site.

Re: Ink – Interface Kit

#62

Post by suskind »

pedalpete wrote: post #60

I may give this a shot. The way they manage columns without needing to specify the number of columns in a div seems nice. For instance, if I want a two column layout, I put two divs inside the '.column-group' container. Now (theoretically) if I were to dynamically add a third column, it seems that Ink would automatically adjust the other two columns to fit. With bootstrap, I would need to change the '.spanx' of each…

Using Ink you just need to use math.

Using "large/medium/small" prefixes and specifying the percentage of each column (large-50 medium-50 small-100)

Take a look at http://ink.sapo.pt/layout

Re: Ink – Interface Kit

#63

Post by ajsharma »

rcarmo wrote: post #46
ajsharma wrote: post #27

Came across this UI kit a while back. I like their solution of a glossary page to show all classes in use: http://ink.sapo.pt/glossary

You've just made one of our design leads very happy - we're very proud of that page.

You should be, I'm probably going to steal the idea for all my front-end teams :)

Re: Ink – Interface Kit

#64

Post by ChikkaChiChi »

I dig the way this handles multiple screen sizes instead of responsiveness, but my lifelong question continues to go unanswered:

Why does the W3C and every CSS framework avoid making 'center' a thing? Yes, I know how to do it myself...I'm just saying that it has its place.

Doesn't it?

Re: Ink – Interface Kit

#66

Post by chrischen »

rcarmo wrote: post #44
windsurfer wrote: post #35

Earlier quoted context omitted.

IE7 was last updated over 3 years ago and doesn't even pass Acid2. Only 1.5% of internet users use IE7, and most of those are probably stuck there due to corporate governance rather than choice.

Like the other guy said, IE7 isn't that rare in Portugal. it's a sensible baseline for SAPO, which, incidentally, runs the biggest web portal in PT (I work there). And yes, corporate governance regarding browsers does weigh in heavily in mass-market sites here, so we have to make sure the layouts don't break - Ink enables delivering a predictable, working layout that degrades gracefully down to IE7 for that reason.

It's also not rare in China either. In fact, IE 6 isn't even rare in China.

Re: Ink – Interface Kit

#67

Post by engleek »

Although it looks a lot like Bootstrap, the code is very different. For one thing they really do use LESS. The code is full of variables and mixins, much more than Bootstrap. The custom Javascript Core is interesting too.

Now just hesitating because of the end CSS size. 160KB minified is nearly twice the size of Bootstrap.

Re: Ink – Interface Kit

#68

Post by lamnk »

chrischen wrote: post #54
ceejayoz wrote: post #34

Earlier quoted context omitted.

I'm at risk of losing out if I have to go through 20 pages of documentation and compare line-for-line against Bootstrap rather than the creator going "we decided not to just re-skin Bootstrap primarily for reasons A, B, and C".

I'm going to reveal a big secret. I actually managed to find out the tidbit about IE 7 without reading it line by line. Their primary job is not marketing. Their primary job is to build the framework. Why do you think things like Y Combinator exists? They do some work others aren't willing to and others lose out because of it. It's to the developer's benefit to tell you why his product is good, but it's not their dut…

The immediate question that popped up when I first see their project's homepage is "How is it different from Bootstrap? Why should I use it?" I looked around and they don't offer an explanation, so I left and continue to use what I'm using.

The developers put reasonable efforts in building the website, introducing the project so that people will adopt it, so I think an article comparing their project with Bootstrap definitely helps with adoption.

Re: Ink – Interface Kit

#69

Post by MattStopa »

rcarmo wrote: post #51
rokusho wrote: post #9

It feels to close to Bootstrap without bringing enough new stuff to the table to be worth it. It's nice to see people making alternatives, but it needs to be a lot more developed.

Well, like I said above, it addresses some internal issues my colleagues had. It also tries to make a lot of things simpler for web designers (especially regarding the grid system) without tying you down too much.

No it's awesome! Don't listen to the downers. It is a lot easier to use than Bootstrap. Fewer elements, etc

Re: Ink – Interface Kit

#70

Post by mmatants »

tracker1 wrote: post #61
mmatants wrote: post #26

Earlier quoted context omitted.

I do not see any disadvantages to nesting inputs inside labels - and it's actually quite semantic and maintainable (in part because inputs no longer need auto-generated IDs). This approach has been part of the HTML standard pretty much always, as well. It doesn't matter much if forms are generated using a builder like Formtastic, etc. But even then less custom CSS classes is usually better. This way I have been able…

When you put a label with text and the input inside, how would you get the text to take up 150px and the input to be to the right of that consistently across a large form? Such as here: https://www.roadreadycertified.com/order/begin/ Note: It's just an example, not promoting the site.

It's possible to do by adding a padding-right as well as position:relative on the label, and then position:absolute on the input to place it over the padded area.

Not the easiest CSS to write, but I strongly prefer clean markup (at a cost of hackish CSS) to hackish markup.

Post reply on HN