Toolkit

http://titon.io/en/toolkit

by prostoalex • 11 years ago

202 41 11 years ago

titon.io

cobalt• 11 years ago

One quick observation, i would make the checkboxes and radio buttons more obviously clicked. (Also better :focus)

adrianmsmith• 11 years ago

Agreed, if you only had two radio buttons and one was checked you'd have no idea which the checked one was.

http://demo.titon.io/?input&rtl=0

BinaryIdiot• 11 years ago

This looks interesting. Projects that roll up multiple technologies are always great for getting a prototype going. I'm a bit too old fashioned with using something like this for a long term project but that's my issue.

I would love to see web components used in projects like these :)

jakejake• 11 years ago

I might be dense but it took me a bit of hunting to locate the online demo at http://demo.titon.io/

Possibly because on iOS when I scroll to the bottom of the page with a quick flick, the site navigation goes kinda wonky and covers some of the page content.

cnbuff410• 11 years ago

I hate heavy and opinionated frontend framework like bootstrap. I have been using Pure css and plain css/js/html to do some prototype and really enjoyed the process, and the only concern is I'm not great at design, so all the prototypes I did don't feel like modern and slick.

I started trying Web Starter Kit[1] recently and really like it, it's light with principle of "don't get in your way", it has very fine default design feeling yet still allow you to easily customize the look and feel.

Toolkit looks like it's even lightweight and share the similar "minimal" principle, I will give it a try and see if it provides enough out of box, and I hope to see more of this kind of light yet modern frontend framework.

[1] https://github.com/google/web-starter-kit

tracker1• 11 years ago

If you use Bootstrap from the source, it's actually pretty modular. I bring it in with npm, then copy the bootstrap.less and variables.less into my own project (updating the references to those in the node_modules path)... this lets me do quite a bit in terms of not loading the kitchen sink, while still being flexible.

As an aside, I'm not quite sure why less hasn't won over sass... By nature of less being JS driven it is much closer to best in breed tools you need anyway for web development (npm) in my opinion. It kind of bugs me that to do modern web development, you are likely to want/need to have Node (or io.js), Python and Ruby installed. I tend to stick to Node based tools (there is sass for node, but it brings in a binary module). This isn't to be expressly negative, just that I'm surprised there's still broad support for both less and sass... with sass having a bit of an edge in the greater community, it would seem.

woah• 11 years ago

Sass is more powerful

omegavesko2• 11 years ago

Do developers really care whether a tool is written in JS rather than Ruby, or vice-versa? If you're running *nix it's pretty likely you have Ruby installed out of the box anyway.

There's nothing inherently tying you to Ruby anyhow, anyone could write a SASS parser in JavaScript. It's just that nobody has because there is no need for it.

jbergknoff• 11 years ago

If you have docker installed, you can use this 9 MB sass image instead of installing ruby or compiling node-sass: https://registry.hub.docker.com/u/jbergknoff/sass/

skeuomorf• 11 years ago

You might also enjoy Skeleton.[0] It's a very lightweight responsive boilerplate "file".

Check the examples section (currently only one). [1]

[0] http://getskeleton.com/

[1] http://getskeleton.com/#examples

Numberwang• 11 years ago

I agree with you about purecss and I also like Skeleton. I had a look at the Web-starter-kit page and have never been more confused about a sites design. I checked twice I had not zoomed in to 200%, and I could not follow the page structure at all.

I do hate the look of Material Design as well, so maybe it's just me and Google that need to learn how to communicate.

sam1r• 11 years ago

This is awesome!

Just checked the docs, and thankfully there is a jQuery-free version coming soon!

Perfect for those who develop for mobile-optimized frameworks or those who follow angular best practices.

thomasfoster96• 11 years ago

Good to see the support for ARIA roles and attributes on elements. I wonder if a framework in the future will start using attribute selectors to use ARIA roles instead of classes to style things like tabs.

On the subject of tabs, I'm surprised that no one has removed the JavaScript dependency for simple components like tabs. Pure CSS tabs are possible in pretty much all modern browsers (>= IE9).

xjia• 11 years ago

I'd love to see a "related work" section on the homepage.

obisw4n• 11 years ago

I actually got really confused on the examples page, it took me a moment to realize there was a dropdown box with all the features.. I think displaying them all in a column on the left/right like bootstrap docs do, would make it easier to know whats going on.

alixander• 11 years ago

Normally I wouldn't be picky about a web design flaw, but seeing as this is a project aimed at helping web design: http://imgur.com/qqwqiA8

nsgf• 11 years ago

It renders fine if you disable Adblock.

flippant• 11 years ago

It looks fine with NoScript too.

baby• 11 years ago

I was using Foundation and Bootstrap for years and I recently switched to the amazing semantic-ui. This seems like a clone of semantic-ui (kind of) and I don't really understand what's the difference.

jitl• 11 years ago

How is this different from Bootstrap or Foundation? Is this just another CSS framework? I wish they had a "what's good about Toolkit" section describing the advantages of this package over Bootstrap et al.

n8m• 11 years ago

It's good to see something else than Bootstrap. If you like this, have a look at: http://www.semantic-ui.com/ - I love using this as every component can be downloaded separately.

yc1010• 11 years ago

Wow as heavy bootstrap user for years this Semantic UI one is quite a find, thanks!

florianletsch• 11 years ago

If you're looking for something modular and customizable, be sure to checkout http://getuikit.com/ as well.

fiatjaf• 11 years ago

This is not even a little "semantic", you know.

sebslomski• 11 years ago

Apparently I have to agree. Is there a ui framework that uses BEM?

im_dario• 11 years ago

I tried to use Semantic UI and I didn't grasp it properly. Don't get it as negative criticism but I found there is a simple tutorial and its grid is kind of unusable even looking examples.

In my last project ended using Zurb Foundation although I had Semantic UI as first option. Any pointer will be useful.

desireco42• 11 years ago

I got lost too, they do present it nicely, but using it is not as easy as I expected. So I had to abandon it. I like Bourbon quite a bit.

lemieux• 11 years ago

I find Semantic UI to be very very interesting, but I have yet to figure out how to integrate it in my projects. I don't know if it's just me but it feels like they are forcing you to write your own styling in a separate repo, then generate the CSS and use it on your project, which to me, makes no sense.

I probably missed something.

ninebrows• 11 years ago

Looks very good. Seems like it doesnt support IE8. Any fix for this?

renke1• 11 years ago

I also use semantic-ui and can only say good things about it expect for those situation where I search for a particular "widget" such as a split button and cannot quickly find good results.

girvo• 11 years ago

What I think is far more interesting that the CSS/JS framework, is their framework for Hack, Facebook's statically typed PHP derivative: https://github.com/titon/framework

andrea_sdl• 11 years ago

Am I the only one thinking that the "flat" design of buttons has room for improvement?

Almost every available framework now uses flat buttons, but they are not as clear as the old style button (although they are obviously more stylish).

Titon seems to have improved a bit (by adding some bordering to help the user undestand that the button is a button an not just some kind of alert), but I guess there's still work to be done.

smrtinsert• 11 years ago

I'm really in materializecss.com lately.

SkyMarshal• 11 years ago

Let me link that for you: http://materializecss.com

nawitus• 11 years ago

I prefer a more modular approach to UI components. After using Bootstrap for a while I find myself often choosing a standalone component over the one provided by Bootstrap, since I can choose the component that best fits to the rquirements.

nerdy• 11 years ago

In less than two minutes I noticed a few issues. Some examples:

- In FF37 the left hand navigation to components overflows into the footer: http://titon.io/en/toolkit/2.1.1/components

- On the main page toward the bottom where components are listed, the tooltips always appear above the element in question, even if the element is at the top of the window. This means the tooltip is above the top of the viewport and cut off or entirely not visible.

burger_moon• 11 years ago

Not sure if it's designed to be this way, but when scrolling the sidebar gets locked into position until you reach the bottom of the selected component example. If I hover over the sidebar I should be able to scroll the sidebar separate from the example.

Toolkit

Related Stories