Foundation was one of the first frameworks to adopt a mobile-first philosophy. By focusing on mobile design first, Foundation makes designers think on what kind of content is important, relevant and interesting to the users without thinking too much on the space.
Just by looking at the name, Foundation merely provides designers with a foundation of sorts on which they can build their design. It can be customized easily through SASS, a powerful CSS pre-processor or by overriding the default CSS styles.
Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.
This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system.
Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters.
This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework.
Foundation comes with Interchange, it makes use of media queries to load images responsively and create content that's suited to different browsers and devices.
There's a variety of front-end templates, icon fonts, responsive table examples, SVG icons and stencils that help you quick-start or easily improve on your site.
Since Foundation is built to be customizable, it's default style may not be very appealing for most. While it's true that most production-ready websites shouldn't be using the default style of a css framework (they would all end up looking the same), this is even more true for Foundation.
The whole Semantic-UI package is well organized, with every component neatly set up with it's own stylesheet and JavaScript file. This way you can load only the components you need for each page, minimizing the load time and file size.
Packages are much bigger when comparing to Twitter Bootstrap or Zurb Foundation. Semantic UI is really extremely large and it would be better to use specific modules and components, rather than the whole thing.
Many features in Semantic UI uses Javascript customization such as for Modal. This is unlike Bootstrap that can add Modal just with customizing the HTML attributes. Developers who plan to using Semantic UI must be familiar with Javascript or JQuery to get the most out of it.
Attempts to use GULP to build a custom package, but contains scripts that are written in an outdated version that doesn't work with current builds.
Lets you select components without their dependencies which results in bad builds, does not list component dependencies so you don't know which modules you can't leave out.
While the styling and components parts of Semantic UI are well-made and eye-catching, the logic and JavaScript part needs some work.
Many features are bugged or behave in unexpected ways. Some aren't optimized to work with all devices. For example, the navigational menu in the Semantic UI website is often laggy when viewed through a mobile device.
Since Materialize follows Google's guidelines for Material design, which in theory is device agnostic, Materialize itself is device agnostic too. It's designed to look good on every device.
Material design is very opinionated on how design elements should behave and look. The basics of which revolve around certain visual elements (physics, space, momentum and light) which are used to create specific UX elements.
This is very helpful because it creates a consistent feel without making every design look the same. This can be seen in Materialize too, where each element may be customized but still it keeps the consistent look of the material design.
While the default style is not bad at all, Materialize also gives developers the ability to customize it and fit their own style, while still keeping in line with the Material Design philosophy.
Along with the CSS files, designers can also download the SASS files which can be edited and compiled.
Bootstrap is very popular and has a large community. As a result of this it is much easier to find help with anything you might need. This also gives you a treasure trove of prebuilt components to use and add to your site.
Bootstrap is developed to be instantly compatible with all sizes of screens, so you don't have to worry about which device the user is accessing your site from. Yet if you prefer, you can disable responsiveness of Bootstrap.
The grid layout with the predefined CSS elements and JavaScript components make it easier to have consistency across different browser versions and even different devices.
Bootstrap can be customized in a variety of ways. Either by overriding the default CSS styles with new CSS styles or by editing the .scss Bootstrap files.
If you don't want to download the full Bootstrap framework. Custom builds of Bootstrap can be created, including only the desired CSS, CSS components, and JavaScript components. This can be done directly from the Bootstrap website by simply choosing what components to download.
Documentation is thorough, well organized and full of live examples and templates ready for use. Every component and every part of the framework is explained and covered in depth.
Bootstrap has an out-of-the box filesize of ~276K, which is pretty large considering it's just CSS. Most of those styles aren't even used in 90% of web pages built with Bootstrap. By only including the required styles it can be trimmed by 70%-75%.
Bootstrap's over-reliance on HTML classes for styling can get very messy very quickly. There's also an overabundance of DOM elements which have a lot of classes and are more often than not nested inside DOM elements with even more classes. This gets problematic down the line because the maintainability of the project gets harder when the project starts to get large.
Bootstrap is designed to get a site up and running quickly. Each of it's components is preoconfigured to help with getting a site up and running quickly.
If the initial Bootstrap colors and styles are not changed or edited, different websites start looking the same even if they have nothing to do with each other and they are made by different developers.
Bootstrap - both 1 and 2 - uses very common class names, like "alert", "label", "btn". Those short names are great when you're hand typing out your CSS, but they are very difficult to search for in a codebase of thousands of files. Also these classes may cause collision with other frameworks or components CSS.
The docs include too few examples and too little details for each topic discussed. For example, it's unlikely you will be able to understand how modals work from five simplest possible use cases. What roles each of the wrappers play in the modal's HTML? What can be omitted and what must stay? What actually "hide" method does, does it remove the modal's data from DOM? And that applies to each and any of the widgets in Javascript section.
UiKit is not a very popular framework, especially compared to other options. As such it may be hard to find learning resources other than the official documentation or it may be more likely for development of UiKit to be dropped than for another more popular framework
There are plenty of ready to use themes available from the official website. You can choose the theme that you want to use from the dropdown menu and then download the CSS, LESS or SASS file for that theme to use for the website.
Every aspect of the framework is designed to be modular, this way designers can easily choose which components to add to their stylesheet without risking to damage the overall style.
Material Design Lite uses a lot of different classes to add different styles and combine them in different components. While this gives a high degree of customization, it can become confusing and messy quickly.
Has an extremely minimalist look that is super-easy to customize since it basically gives designers just a foundation on which they can easily build their design.
Since Pure CSS only carries a minimum number of styles out of the box, it might not be great for beginners who want a complete style that looks good out of the box without having to customize it.