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