
Ink – Interface Kit - rcarmo
http://ink.sapo.pt/
======
bstar77
I like the idea of having interface "skins", but I honestly could not tell
this one apart from Bootstrap. I would love to see more varying interface
styles, not another bootstrap clone.

~~~
windsurfer
I thought this was built on top of bootstrap.

~~~
ditados
It's not. It's a completely different codebase.

------
desireco42
I welcome the intent which I understand is to provide another point of view on
css frameworks. Honestly like others, I am a little overwhelmed with multitude
of css frameworks. I think the point was to have a framework to provide
aggregation and organization of multiple tools you used previously.

For me Bootstrap, Zurb are currently only really interesting in a sense I
would use them in projects. For a while I used Skeleton, I think it lost pace
a little and I get same benefits with Zurb.

Again, I welcome your vision of organized front-end, would appreciate a page
that would outline differences and specific benefits.

------
gregorkas
How is this different from Bootstrap
([http://twitter.github.io/bootstrap/](http://twitter.github.io/bootstrap/))?

~~~
rfnslyr
Literally JUST a skin. No idea how this crap gets voted up.

~~~
JohnDotAwesome
Is it _literally_ just a skin? Looks like a mostly different codebase.

Compare mixins.less
[https://github.com/sapo/Ink/blob/develop/less/modules/mixins...](https://github.com/sapo/Ink/blob/develop/less/modules/mixins.less)
[https://github.com/twbs/bootstrap/blob/master/less/mixins.le...](https://github.com/twbs/bootstrap/blob/master/less/mixins.less)

Personally, I like it. It's nice to have competition :)

------
mmatants
Can we _please_ come up with a better markup for form element grouping than
"div.control-group"?

Specifically, HTML has always allowed nesting an <input> inside <label> \- and
that's more than enough to create either a horizontal or stacked layout. No
<div>s needed. And no "for" attribute needed with an unnecessary input ID.

~~~
lewisflude
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.

~~~
mmatants
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 to write CSS for fairly complex forms using just standard tag
selectors, with just one class on the root form container to separate multiple
form styles.

~~~
tracker1
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/](https://www.roadreadycertified.com/order/begin/)

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

~~~
mmatants
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.

~~~
tracker1
I don't really consider that cleaner markup... Now you have a single element
containing a text now and another element that can not be transverse
independently... As opposed to an e extra tag. You could do the label with a
span and the input y though, and then mark your CSS that way as a
convention... But then you aren't using a bad framework meant to have broader
interoperability in mind.

------
pedroscs
If everyone's wondering how Ink is different from Bootstrap, the answer is:
mainly in how Ink builds layouts. Instead of the column span philosophy, Ink
uses percentage based blocks. That alone is a big difference.

~~~
pedrocorreia
Don't forget to mention that although we as a default support 3 screen sizes,
our grid system is configurable, so you can add or remove as many breakpoints
for as many screens as necessary. All with a couple of lines of code.

------
joeblau
It looks good; You should add your framework to:
[http://usablica.github.io/front-end-
frameworks/compare.html](http://usablica.github.io/front-end-
frameworks/compare.html)

------
joshuacc
One thing I like about this is that most of the class names are namespaced (as
"ink-something"), unlike most of the other ui frameworks I've looked at. This
makes it a lot simpler to integrate into an existing site without accidentally
dealing with conflicting class names.

~~~
rcarmo
Yeah, that was one of the goals. Ink is supposed to co-exist with existing
layouts when you have a legacy to maintain.

------
davidroetzel
We desperately need something like todomvc for ui kits.

------
bbayer
I like the colors and type of default theme of framework. It really looks
neat. On the other hand, used markup looks less than Bootstrap. It definitely
could be a selling point. Large screen concept and flexible columns also looks
very good. I can give them a try.

~~~
rcarmo
Please do, and feel free to file issues on Github:
[https://github.com/sapo/Ink](https://github.com/sapo/Ink)

------
ajsharma
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](http://ink.sapo.pt/glossary)

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

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

------
BSousa
First of all congratulations or Parabens :)

Nice to see some portuguese projects here.

On a unrelated note, how did this end up on as the musicbox website framework?
I worked in this project a while ago (backend and frontend clients only) and
had no idea who did the musicbox.sapo.pt frontend.

~~~
rcarmo
Well, IIRC Ink came about due to the need to quickly build out sites like that
(you'll notice SAPO is involved in a bunch of other services like that), and
things dovetailed together when the site was revised recently.

------
rokusho
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.

~~~
rcarmo
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.

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

------
pedalpete
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 div within the
'.row'

~~~
suskind
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](http://ink.sapo.pt/layout)

------
bdcravens
At first I thought the filepicker.io folks, who recently rebranded as Ink, had
released a UI kit.

Of course they don't own those 3 letters which have a wide array of meaning,
similar to words like "bootstrap", "ember", "buffer", or "backbone". I'd be
hesitant to use those words in a product, open source or otherwise, however.

------
orky56
As someone who hasn't integrated Bootstrapped before, I have a clean slate to
evaluate and use any interface kit that comes along. As long as it's more
comprehensive that what's currently out there, it doesn't matter so much to me
how much more of an improvement this latest project is over the prior
standard.

------
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.

------
film42
I think this is cool, so I say good job on that front. But I kind of feel like
you're trying to introduce yet another low end sedan. There's already
hundreds, and I've already purchased one. It's gonna take at least a few more
years for me to be ready to shop for a new one.

~~~
rcarmo
Well, we're not actually selling, but rather giving it away :)

Seriously now, it's been in internal use for a good while because it solved
problems that Bootstrap didn't address (like the particular grid flavour and
some corner cases in responsive layouts), and the best way gather feedback and
improve it is, of course, making it public.

~~~
film42
It's a technical debt metaphor. Myself and the company I work for have all
learned the caveats of bootstrap and how to hack through them. Now it's
happily sitting in most, if not all, of our projects. It just doesn't make
sense for us to change at this point.

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

------
ChrisClark
[http://ink.sapo.pt/icons#nav-textedit](http://ink.sapo.pt/icons#nav-textedit)
The link for Text Editor Icons is broken because the id for that section is
set to nav-web. A copy-paste error most likely.

~~~
rcarmo
Thanks for the heads-up!

------
rithi
I have only tried out YUI pure and went back to bootstrap almost immediately.
This feels more complete - I particularly like the icon collection.

~~~
JelteF
The icon collection is worth a look for any web project. It's an icon font, so
colours and scaling can just be done with css. Very easily integrable with
Bootstrap as well, just include the css after the Bootstrap css and it works.
(All you might have to test is icons that are a different colour now since
they just use the font colour) [http://fortawesome.github.io/Font-
Awesome/examples/](http://fortawesome.github.io/Font-Awesome/examples/)

------
philip1209
Random, but I think the site could benefit from font pairing. Ubuntu is pretty
for the titles, but the body could use something less ornate.

------
MattStopa
I personally think this looks great. I was kinda of burnt out of Bootstrap.
I'm gonna give it a shot!

------
chuckd1356
Yet another! Foundation, Bootstrap, 960, unsemantic, etc.

~~~
pedroscs
Hooray for variety. Or do you prefer monopolies?

