Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Topcoat – CSS for clean and fast web apps (topcoat.io)
318 points by instakill on May 28, 2013 | hide | past | favorite | 98 comments


I'm finding it hard to think up ways that this differentiates itself enough from Foundation or Bootstrap to be useful -- and your website isn't providing me any reason why as well.

Compare to http://twitter.github.io/bootstrap/ and http://foundation.zurb.com/, which list some benefits right on the page -- you need people to instantly understand why they should use your framework over another css framework.

Also, make sure your demo pages represent responsiveness well -- I resized my browser on your mobile demo page and the tab bar ended up becoming nothingness -- perhaps some min-widths are needed?


> and your website isn't providing me any reason why as well.

Looks like it's an Adobe project.


Check out the contribution license for a chuckle:

http://topcoat.io/dev/topcoat-cla.html


Why a chuckle? I like that they at least let you fill out the CLA online. The ASF still requires contributors to fax in a paper form (or they did last time I checked, which was when I did mine, which was, now that I think about it, some time ago, so maybe this long rambling comment is actually pointless after all...)

Anyway, the point is, having an online form to submit a CLA seems like a positive step to me, if you're going to require CLAs at all. And a CLA that simply grants a perpetual, worldwide, irrevockable license to the content, as opposed to asking for a transfer of copyright ownership, doesn't seem to onerous to me. And for an Open Source project with commercial backing it is pretty commonplace.

That said, we are an Open Source startup, and we don't (currently) plan to ask for a CLA from outside contributors, but just something basically saying "I license my contribution under the Apache License v2".


It's using bootstrap


This should speak volumes about how ready the framework really is..


Oh, OK. I thought the "chuckle" was something about the fact that they had a CLA at all, or the content of the CLA. :-)


The FSF also still requires fax or mail, as of when I did mine about 1.5 years (I think) ago.


Haha.

Checked the source, and yes, it's bootstrap. Believe in your own product and everything :D


Although Adobe is a commercial entity, that seems like pretty standard boilerplate (at least parts about making sure you're the sole owner and such). When I wanted to contribute to the android cyanogenmod project, they had a similar agreement online.


It's made with bootstrap css


Shouldn't make a difference really


this framework should be seen more as a lightweight alternative to jquerymobile. While making hybrid apps with phonegap/cordova, too many people are relying too heavily on large javascript libraries which hurts performance,a small css framework like topcoat or ratchet, and a js library for architecture like angularjs, backbone.js and emberjs is a more ideal approach for hybrid apps than just throwing all of bootstrap, foundation or the sometime buggy jquerymobile

I still think jquerymobile is a good approach for hybrid apps because it is easy to learn and a full-stack framework and works on a large range of devices, one can only hope that webkit renders faster in the future


One of topcoat's goals is to be highly performant CSS (especially on mobile, it's hard to deliver fast UI). To this end they're using the Chromium Telemetry project to benchmark the performance of their CSS continually. Basically CSS Performance Regression Testing.

See http://bench.topcoat.io/ and http://bench.topcoat.io/v2/view/results?date=30&; (metrics for time spent in recalc styles, layout, paint, composite layers)


See that's the kind of sentence that should be on the homepage!


exactly.

Knowing that there are more popular alternatives around, the question that everyone has is: why should i use this? This value prop is something that interests me greatly.


I realize we're all in our early 20s with 20/15 vision, but this trend of microscopic fonts is really unfriendly to the old guys who sometimes want to read things on the web.


Hell I'm 25 and struggled with some of those font sizes. I probably do need to get my prescription altered, however.


I'm 25 and I can read it fine but I agree it needs to be bigger. 14px is a good starting size IMO for fonts.


Firefox Users:

Options / Content / Fonts & Colors / Advanced ... / Minimal font size

(some pages don't like this)


I'm 22 and I have trouble reading the text. I don't even have glasses.


As I'm on a 12-inch thinkpad with fairly high res, meaning the PPI is pretty high, I have to zoom into websites all the time. This template handles zooming quite nice I think.

Longing for the day of viewport-sized units though.


I would personally like to see a CSS framework that has absolutely zero opinions about design. Meaning, radio buttons are actually the standard html5 radio buttons, but perhaps with titles handled in a unified way that works across all browsers. Form elements are given proper layout CSS that solves a lot of common issues across all browsers but no additional styling is added. Etc. I don't want my site to look like yet another bootstrap site (YABS) and overriding all of bootstrap/foundations/whatever's styles is a huge PITA. I usually just end up rolling everything from scratch for sites where I want full control over the design.

edit: I'll post this as an edit since there are multiple responses referring to http://www.getskeleton.com. Skeleton is similar to what I'm asking for but it seems to have stopped short. I would love to see unstyled carousels, alerts, modals, sticky headers, images with inline comments, etc. Basically, all the really nice stuff you get in Bootstrap and Foundation but without any of the styling.


I think this is exactly what Skeleton tries to be.

http://www.getskeleton.com/

I will say though that Foundation is much easier to customize styles for than Bootstrap, which is one of the primary reasons we now use Bootstrap for internal apps or side projects which we don't intend to implement a custom design, but Foundation for all sites which we plan on designing.


One thing to keep in mind is that Skeleton has not seen a single commit in the past year, so it's not clear if the framework is going to be supported long-term. It's probably better as a blueprint for one's own homebrew minimalistic CSS framework.


It doesn't need to change until flexbox is well supported. I've just used skeleton in a project without any problems.


https://github.com/dmur/Skeleton appears to be a more active fork.


So a framework needs to update every 6 months just because that would make you feel better about it?

Also, your statement is factually incorrect. There was a single commit in the past year. If you had said that next month, you might have been correct.

The author is on twitter...


1) Nitpick about 11 months vs 12 months. Are you adding any value to the conversation? 2) The author being on Twitter doesn't affect the 31 outstanding pull requests and the 52 issues filed against the GitHub repository. Again, I'm not clear what you're getting at.


Doesn't need to be updates for the sake of updates. There are open pull requests and issues.


I'm using Foundation on a project as well and I still find it a big pain to override the styles. I end up writing more CSS to override styles I don't want than I would if I just wrote everything from scratch.


Really? We've implemented completely custom designs on top of Foundation for several sites now and haven't had any problems. Then again, we work to get the layout the way we like it with Foundation before we start designing, maybe that's why.

For us, things like buttons required a ton of overriding with Bootstrap when we customized the button design, but Foundation didn't. We found this largely to be the case because Foundation makes less assumptions about how buttons are styled to begin with. For example, buttons are pretty basic with square corners. If you want rounded corners, you just add the "round" class. If you want buttons with a different radius, you just create your own new class with a specific border radius and add that. Different color? Create a new class with a background color and add that.

What in Foundation did you experience pain trying to override?


I'm surprised nobody has mentioned inuit css[0]. It's written by the highly knowledgeable Harry Roberts (aka CSS Wizardry) and it has exactly this goal. All you get is some boiler plate stuff. It's well designed (from a code perspective) and states "inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.". Though I guess it might be one step back from what you want, as you won't really find widgets, carousels or anything beyond very simple components in the framework.

[0] http://inuitcss.com/


I'm working on getting there with axis css. It pushed back the design opinions to a css level and makes them modular and easily customizable: http://roots.cx/axis/


Its early days for Topcoat (thus the lacking docs) but our reset is separated from aesthetic (and layout) so you can run an optimized build that gives you exactly what you describe.


> Basically, all the really nice stuff you get in Bootstrap and Foundation but without any of the styling

Step 1. Include bootstrap.js

Step 2. Don't include bootstrap.css


This doesn't make much sense - because if without bootstrap.css you don't get any of the alignment, grid, button sizing, etc.

I think the OP is referring to all of those things, without the design styling - not the literal styling.


I've used http://unsemantic.com (layout only) and http://www.getskeleton.com (layout and minimal design) with good results.


You might want to look at BEM, it's methodology that telling you how to structure your css/js/markup. http://bem.info/ (developed by Yandex)


Take a look at Nicolas Gallagher's (necolas) Suit toolkit:

https://github.com/necolas/suit


Have you checked out Skeleton? http://www.getskeleton.com/


So basically just a reset.css and a grid (possibly a responsive grid)? That is pretty simple to conjure up.


This looks like a great start, but there are some missing parts and serious issues with the typography. In many places the text size is just too small, while the typeface they're using here is too light for display. The link text under Michael Peterson is a good example of the problem: http://topcoat.io/topcoat/doc/mobile.html#m-well


We're working on it! Pls file issues http://github.com/topcoat/topcoat and we'll get on em. =)


If you type 'pls' because it's shorter than 'please', then I'll type 'no' because it's shorter than 'yes'


LULZ UR SO CLEVAR!


Agreed. The text in the desktop version is so tiny it makes it unusable. I'd consider using the 'mobile' version for the desktop too.


Legitimately wondering if you feel that OSX's default font size is too small. Are we at the cusp of a universal uptick in font-size? *updates single variable.


Your "slide switch", "toggle buttons", "tabs", etc all suffer from the same big problem: hard to tell which one is selected (especially if there's 1 "on", 1 "off").


Those don't seem to be implemented yet.


I like the idea of this project we do need more variety rather than bootstrap bootstrap bootstrap. However why is the font size so small its horrendously difficult to read.


What is this, a webapp for ants?!


It has to be at least three times as styled!


I've already picked this up for a side project of mine. So far, it's been a pleasure working with the UI toolkit. I'm seriously looking forward for 1.0 release of the Desktop flavor.


It looks very nice, but it doesn't bode well when the 'mobile' section has atrociously slow scroll speed and completely breaks.


This is a known/filed issue. Current work in progress to generate a new mobile friendly guide. There's a lot of components on that page for mobile.


Is it just me, or is the proliferation of CSS frameworks and JS frameworks/libs redundant now?


It's you. For example, today HN has a lightbox as one of its top links. People have been releasing those as their own microlibs for years now. How many lightbox implementations does the world need?

Competition with bootstrap is healthy. I consider bootstrap to be the Prototype of the css framework world, and I'm waiting for a jQuery to come around.


Came here to say it.

Just saw in the job posting for Amicus:

"Open source projects, including our own in house, soon to be open sourced, real time Model View Presenter javascript framework with bi-directional data binding"

Are the existing libs so bad everyone has to reinvent the wheel constantly?


Amicus engineer here. It's actually built on top of Backbone, in a similar vein as Airbnb's rendr. It allows our front-end to be pre-rendered on the server, and sent to the client as static html, as well as some other cool stuff. > Are the existing libs so bad everyone has to reinvent the wheel constantly?

To actually answer your question: yes. Existing libs for building large scale apps are in a transition period from server-side only apps to something more akin to native apps, and no one has come up with a great way to do it yet.

Honestly I hope people keep "reinventing the wheel". Web Development isn't in a place where we can just accept the state of the art and call it a day.


Yeah, it makes a lot of sense to never have any sort of stable, widely-accepted solution built over a long period of time. Let's just keep having a new artisanal web framework of the week.

Web developers are an utter fucking embarrassment and shit like this is exactly why.


You may want to read the HN guidelines: http://ycombinator.com/newsguidelines.html

In particular:

Be civil. Don't say things you wouldn't say in a face to face conversation.

When disagreeing, please reply to the argument instead of calling names. E.g. "That is an idiotic thing to say; 1 + 1 is 2, not 3" can be shortened to "1 + 1 is 2, not 3."


I didn't call anyone a name, and I wouldn't be ashamed to say it face-to-face because it is in fact what I think. I'm tired of the JS framework of the week being posted on here in some vague attempt to become the cool new thing on the block. What happened to Backbone? Not cool any more because it's remotely stable? No, of course not, because developers need to have their bespoke framework of the week.


Did you even read his response? This is built on Backbone, as was AirBnB's rendr. There's a valid debate to be had about how and when to start something new vs. customize or work with existing tools, but you're not having that debate. And the fact that you'd say it to their face doesn't mean it isn't name calling.


You called web developers and utter embarrassment, that is name calling, and if you said that face to face you might get punched.


They are an embarrassment and I strongly doubt that I'd be punched.


Please try to remember that this is not Reddit.


Well ... depends. The website stuff is awesome. The current "problem" is that people want to build what are in effect native apps using the browser as a runtime and presentation layer. So there is lots of things that need to be done for it to work.

In a sense we need our MFC for the web.


Not just you.


Yeah. The plague of javascript libraries and CSS frameworks is becoming rather tiresome.


I know all of you use Linux and OSX, but this renders horrible in Windows (IE and Chrome).


Worry not, it renders horribly on Linux too (the fonts for sure) (or maybe our taste and the author's are very different)


Can we maybe get a more useful title for this submission?


why this instead of bootstrap?


Wonderful.

If there is a thread about bootstrap, some one posts "why must everything be bootstrap?" Get a thread about a bootstrap alternative and...... bingo!!!!

(Not having a go at you personally, Im sure your question was genuine. Just making general observation of the irony)


yes it was a genuine question. i guess i should have phrased it differently. I just wanted to know the difference (or benefit of this over bootstrap). I mean if a wheel is being re-invented, there's gotta be a reason behind it. (I guess "because I can" could be an answer, but I was looking for some good answer)


Fair question, and I would suggest this:

I think a good enough reason is because some one could. No reason why some one cant just say; I can do that too, and I know lots of people say they would like an alternative, so lets just give it a go and see if any one likes it enough to use. And for me, that's good enough.

Giving it a go for no obvious reason is the blood of a "hacker", IMHO. Its the doing of it that is of value. One learns form the experience.


My problem with your question is the evergrowing lack of critical thinking on HN. I think even PG has eluded to it.

What's the difference from Bootstrap? Why don't you view its source? Read through the framework's documentation? For one the default styling is significantly different than Bootstrap.

The one thing I fondly miss about Slashdot is people would liberally tell you to RTFM when you asked something obvious that could have been answered by reading the article posted.


Then go back to slashdot and be rude there.


Suggesting someone to apply critical thinking is anything but. Your confrontational attitude is though. Another thing becoming of HN.


you are being rude in the first place. You could have framed your comment better. quit HN if this community is disturbing you so much.

I disagree with your original comment. Yes, we can read the source. Yes, we can analyze it ourselves. But time is limited to all of us. The product should state exactly how it is different with the competition and why we should pick it. This is similar to how pg asks startups to describe themselves in one simple sentence. You don't tell pg that he lacks critical thinking for not reading my website.

Stating how you are different gives the customers focus. If you state that you are different because of X then you can go into the code and look at X particularly.


Yes I do that when it's apparent that it's worth my time. When I come across a new technology which I don't really get the point of (like this one), I ask around first instead of wasting my time to go through viewing the source and stuff. That's what most people who respect their own time do.


I for one am really happy when someone decides to develop an alternative to a popular product.


You might want something with a more discrete look, such as Topcoat's.

Options are fantastic. Who loses? It's a win-win.


It might be better as a Bootstrap theme, so that people can easily switch between them.


Topcoat is targeting installed applications. Meaning desktop packaged apps and mobile applications using web standards. Bootstrap is AMAZING for web sites and browser based apps.


Aren't these guys positioning themselves as being more lightweight? Bootstrap can be pretty rough on mobile devices in certain situations.


This looks really nice! If I hadn't already got a designer for my current project (from http://analoghq.com/ mentioned here last week, no less!) I would definitely be using this.

EDIT: That's not to say this is a replacement for highly-skilled designers, more that it's an easy way to get a passable interface in the absence of any design skill :)


The buttons remind me of 90s operating systems.


One day the chiseled-3D look is going to come back as retro chic and make all our sites look like The New Yorker with smushed Skittles.


I find it kind of odd and off putting that Adobe makes you sign something to contribute to the project. I think the only proper way to do switches is by using checkboxes and CSS transformations [0] - their javascript solution is not desirable.

[0] http://www.larentis.eu/switch/


I find it kind of odd and off putting that Adobe makes you sign something to contribute to the project.

That's pretty common in larger projects, and/or projects that have a commercial entity backing them. And there are some very good reasons for it. It helps keep the provenance and legality of the code in more of a known state, and could be important in a SCO v. IBM type case. Also, if re-licensing ever becomes desirable down the road, it's a hell of a lot easier if at least one entity or person has permission to release the entire code base under an arbitrary license. Take the Linux kernel, where it would be effectively impossible to relicense even if Linus wanted to, since the copyright ownership is spread out among gosh knows how many people, some of who nobody knows how to contact, and some of whom might not even be alive for all we know.

The FSF, ASF and other big open source organizations also typically require a CLA or a copyright assignment of some sort as well. So at least this isn't Adobe just being evil or anything. That's not to say whether they are or aren't evil, just saying that the CLA thing, in and of itself, isn't necessarily a bad thing.


I really get frustrated when I land on a page, and I can't hit space bar to page down.


May be just my browser setting but the fonts rendered in Firefox (Win64) look really bad, thin and pixelized; looked like anit-alias has been turned off.


One question... Why? It's missing features Bootstrap as since version 1.0.

Adobe should focus on something like not trashing Fireworks.


Thanks a lot for creating this. We need some diversity and options in this realm!


Nice work. A clean, attractive look.


Looks very Asana-like




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: