10 ms·
Topcoat – CSS for clean and fast web apps
- jstanley 13y agoThis looks really nice! If I hadn't already got a designer for my current project (from http://analoghq.com/ 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 :)
- Fauntleroy 13y agoThis 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 http://topcoat.io/topcoat/doc/mobile.html#m-well
- brianleroux 13y agoWe're working on it! Pls file issues http://github.com/topcoat/topcoat http://github.com/topcoat/topcoat and we'll get on em. =)
- packetslave 13y agoIf you type 'pls' because it's shorter than 'please', then I'll type 'no' because it's shorter than 'yes'
- brianleroux 13y agoLULZ UR SO CLEVAR!
- ricardobeat 13y agoAgreed. The text in the desktop version is so tiny it makes it unusable. I'd consider using the 'mobile' version for the desktop too.
- ___dam___ 13y agoLegitimately 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.
- volaski 13y agowhy this instead of bootstrap?
- swalsh 13y agoI for one am really happy when someone decides to develop an alternative to a popular product.
- sergiotapia 13y agoYou might want something with a more discrete look, such as Topcoat's. Options are fantastic. Who loses? It's a win-win.
- simonbrown 13y agoIt might be better as a Bootstrap theme, so that people can easily switch between them.
- alan_cx 13y agoWonderful. 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)
- volaski 13y agoyes 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)
- JoeKM 13y agoMy 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.
- effectivestack 13y agoI'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.
- eggbrain 13y agoI'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/ http://twitter.github.io/bootstrap/ and http://foundation.zurb.com/ 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?
- patrickaljord 13y ago> and your website isn't providing me any reason why as well. Looks like it's an Adobe project.
- toomuchtodo 13y agoCheck out the contribution license for a chuckle: http://topcoat.io/dev/topcoat-cla.html http://topcoat.io/dev/topcoat-cla.html
- yareally 13y agoAlthough 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.
- Hovertruck 13y agoCan we maybe get a more useful title for this submission?
- macspoofing 13y agoIt looks very nice, but it doesn't bode well when the 'mobile' section has atrociously slow scroll speed and completely breaks.
- dwabyick 13y agoThis 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.
- philfreo 13y agoYour "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").
- xixixao 13y agoThose don't seem to be implemented yet.
- Ixiaus 13y agoIs it just me, or is the proliferation of CSS frameworks and JS frameworks/libs redundant now?
- leetrout 13y agoCame 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?
- venomsnake 13y agoWell ... 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.
- coderzach 13y agoAmicus 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.
- cuttooth 13y agoYeah, 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.
- zallarak 13y agoThanks a lot for creating this. We need some diversity and options in this realm!
- mikehc 13y agoI know all of you use Linux and OSX, but this renders horrible in Windows (IE and Chrome).
- riquito 13y agoWorry not, it renders horribly on Linux too (the fonts for sure) (or maybe our taste and the author's are very different)
- vvpan 13y agoThe buttons remind me of 90s operating systems.
- marshray 13y agoOne 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.
- marknutter 13y agoI 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 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.
- websirnik 13y agoYou might want to look at BEM, it's methodology that telling you how to structure your css/js/markup. http://bem.info/ http://bem.info/ (developed by Yandex)
- ninjay 13y agoHave you checked out Skeleton? http://www.getskeleton.com/ http://www.getskeleton.com/
- blainsmith 13y agoI've used http://unsemantic.com http://unsemantic.com (layout only) and http://www.getskeleton.com http://www.getskeleton.com (layout and minimal design) with good results.
- JangoSteve 13y agoI think this is exactly what Skeleton tries to be. http://www.getskeleton.com/ 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.
- modarts 13y agoLooks very Asana-like
- mratzloff 13y agoI 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.
- robotmay 13y agoHell I'm 25 and struggled with some of those font sizes. I probably do need to get my prescription altered, however.
- skcin7 13y agoI'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.
- ExpiredLink 13y agoFirefox Users: Options / Content / Fonts & Colors / Advanced ... / Minimal font size (some pages don't like this)
- TannerLD 13y agoI'm 22 and I have trouble reading the text. I don't even have glasses.
- alipang 13y agoAs 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.
- dgreensp 13y agoNice work. A clean, attractive look.
- rmrfrmrf 13y agoWhat is this, a webapp for ants?!
- KingMob 13y agoIt has to be at least three times as styled!
- ww520 13y agoMay 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.
- napolux 13y agoOne question... Why? It's missing features Bootstrap as since version 1.0. Adobe should focus on something like not trashing Fireworks.
- joshcrowder 13y agoI 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.
- paulirish 13y agoOne 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/ http://bench.topcoat.io/ and http://bench.topcoat.io/v2/view/results?date=30& http://bench.topcoat.io/v2/view/results?date=30& (metrics for time spent in recalc styles, layout, paint, composite layers)
- notjustanymike 13y agoSee that's the kind of sentence that should be on the homepage!
- seferphier 13y agoexactly. 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.
- jamesbrennan 13y agoI 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/ http://www.larentis.eu/switch/
- mindcrime 13y agoI 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.
- milos_cohagen 13y agoI really get frustrated when I land on a page, and I can't hit space bar to page down.
- Nodex 13y agoSorry to say but the majority of that is ugly