
Toolkit - prostoalex
http://titon.io/en/toolkit
======
n8m
It's good to see something else than Bootstrap. If you like this, have a look
at: [http://www.semantic-ui.com/](http://www.semantic-ui.com/) \- I love using
this as every component can be downloaded separately.

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

------
cnbuff410
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](https://github.com/google/web-
starter-kit)

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

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

~~~
LukeB_UK
The SASS team are writing one in JavaScript so they must feel there's a need:
[https://github.com/sass/node-sass](https://github.com/sass/node-sass)

~~~
omegavesko
Node-sass isn't a JavaScript port of SASS, it's a Node.JS binding for libsass,
the native (C) SASS compiler. The first paragraph of the readme tells you as
much.

------
alixander
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](http://imgur.com/qqwqiA8)

~~~
nsgf
It renders fine if you disable Adblock.

~~~
flippant
It looks fine with NoScript too.

------
jakejake
I might be dense but it took me a bit of hunting to locate the online demo at
[http://demo.titon.io/](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.

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

------
nerdy
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](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.

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

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

~~~
adrianmsmith
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](http://demo.titon.io/?input&rtl=0)

------
girvo
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](https://github.com/titon/framework)

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

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

------
BinaryIdiot
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 :)

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

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

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

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

------
smrtinsert
I'm really in materializecss.com lately.

~~~
SkyMarshal
Let me link that for you:
[http://materializecss.com](http://materializecss.com)

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

