-
Notifications
You must be signed in to change notification settings - Fork 5
css framework analysis
An analysis of several CSS frameworks for the Toro-net SPA project.
| Metric | Vuetify | Foundation | Material Design | Bootstrap 4.0 | Materialize |
|---|---|---|---|---|---|
| Support | 3.0 | 2.5 | 4.0 | 5.0 | 4.0 |
| Usability | 4.5 | 4.5 | 3.0 | 4.5 | 4.0 |
| Functionalities | 4.0 | 3.5 | 3.5 | 5.0 | 4.0 |
| Average | 3.8 | 3.5 | 3.5 | 4.8 | 4.0 |
Vuetify has sufficient capability to meet all our projects needs. Starting with a very nice example that provides an excellent free facebook-like template (https://vuetifyjs.com/examples/layouts/google-contacts) vuetify has all the functionalities required easily available. Documentation is adequate and usability at a glance looks high with many source code examples. However, support is relatively low compared to Bootstrap with a meager 979 stackoverflow questions serving as a benchmark.
Foundation is a responsive front-end framework. It's basically a package of CSS, JavaScript, and image files by ZURB (https://foundation.zurb.com/), which is a team of designers and strategists who help grow business. It is a responsive design as it has the ability to work on any device and any screen size. It is very accessible and usable as it makes everything clear between design and implementation. ZURB's main goal is to focus on usability. Foundation come with a set of Sass functions including colors, selectors, units and much more. Sass, syntactically awesome stylesheet, is a CSS extension which helps keeps things organized and makes style sheets faster and only works when Ruby is installed.
Material Design developed and designed by Google in 2014 and this language emphasizes that website should have more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.It has more than 8900 questions on StackOverflow and lots of issues on GitHub.
Bootstrap is perfect if flexibility and customization are two key needs of our project. Bootstrap’s ready framework lets you work with multiple libraries that can be added as required. It’s built on responsive layouts, components, and 12-column grids. I believe selecting Bootstrap over other frameworks will allow us to receive a plethora of help from the community being that it is one of the most popular, if not the most popular framework for CSS. Just like any other framework it uses its own dedicated libraries but the cons of jquery do not outweigh the pros of the community support we will receive and the benefit that the current boiler plate we use already has bootstrap in it. Being that we are working with a time constraint, I view it as our top viable option.
Materialize is based on Google's material design. The official website provides a detailed documentation which is helpful for users. Materialize supports Firefox, Chrome, Safari and IE. The elements used in here are appealing to users. It provides a large selection of components which includes buttons, navbar, icons etc. Materialize comes in 2 forms, Materialize, the standard version and Sass. This framework is customizable and easy to use.