Toolkit(titon.io)
titon.io
Toolkit
http://titon.io/en/toolkit
45 comments
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.
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.
I probably missed something.
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.
In my last project ended using Zurb Foundation although I had Semantic UI as first option. Any pointer will be useful.
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.
Wow as heavy bootstrap user for years this Semantic UI one is quite a find, thanks!
If you're looking for something modular and customizable, be sure to checkout http://getuikit.com/ as well.
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.
This is not even a little "semantic", you know.
Apparently I have to agree.
Is there a ui framework that uses BEM?
Inuit https://github.com/csswizardry/inuit.css uses BEM and the most pedantically correct CSS framework out there. It is a bit more work to get into it as it doesn't provide design off the go--you'll have to add colours, shadows, bevels or whatever else you want. However, that's probably a good thing as it forces you to assimilate the architecture which is a transferrable skill.
Looks very good. Seems like it doesnt support IE8. Any fix for this?
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
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
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.
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.
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/
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.
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.
It's more convenient to be able to handle all dependencies through the same package manager.
Personally I prefer Scala and thus use SBT for most dependencies, requiring the user to use Bundler or NPM as well for just one dependency can get a bit annoying. In the case of SBT it actually does have some integration with NPM since it's used so much for client assets (and there is Trireme which is a pure-Java Node clone), but Ruby dependencies still mean adding one or two manual build steps.
Personally I prefer Scala and thus use SBT for most dependencies, requiring the user to use Bundler or NPM as well for just one dependency can get a bit annoying. In the case of SBT it actually does have some integration with NPM since it's used so much for client assets (and there is Trireme which is a pure-Java Node clone), but Ruby dependencies still mean adding one or two manual build steps.
The SASS team are writing one in JavaScript so they must feel there's a need: https://github.com/sass/node-sass
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.
Sass is more powerful
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
Check the examples section (currently only one). [1]
[0] http://getskeleton.com/
[1] http://getskeleton.com/#examples
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.
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.
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
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.
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.
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.
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.
- 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.
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.
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.
One quick observation, i would make the checkboxes and radio buttons more obviously clicked. (Also better :focus)
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
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
[deleted]
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.
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.
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).
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).
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 :)
I would love to see web components used in projects like these :)
[deleted]
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.
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.
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.
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.
I'm really in materializecss.com lately.
Let me link that for you: http://materializecss.com
I'd love to see a "related work" section on the homepage.
[deleted]