Frontend Web UI Framework Options: Difference between revisions
Jump to navigation
Jump to search
| Line 46: | Line 46: | ||
$ npm install semantic-ui --save-dev | $ npm install semantic-ui --save-dev | ||
</syntaxhighlight> | </syntaxhighlight> | ||
And then `gulp` is required to build the CSS. | |||
There are also Git repos for CSS and Less distributions. | There are also Git repos for CSS and Less distributions. | ||
| Line 57: | Line 59: | ||
* Non-traditional CSS syntax | * Non-traditional CSS syntax | ||
* Built with Less. | |||
== Skeleton == | == Skeleton == | ||
Revision as of 14:53, 5 December 2015
Twitter Bootstrap
Pros
- Comprehensive and solidly engineered.
Cons
- Class name changes between versions requiring refactoring
- Difficult to override styles to make a site not look derivative of Bootstrap
Foundation
Pros
- Lightweight
Actually, I don't think this is true. It requires some time to install and configure. It also has a need to control the web project, and so doesn't exist easily with other technology (e.g. Django). - Easy to apply a custom look to a site built with Foundation
Cons
- Reported to not be as well engineered as Bootstrap
- Relies on jQuery for many components (i.e. all you get is the grid if you want to use Angular)
- Non-trivial installation (for the Sass install)
- Doesn't exist easily with things like Django.
- A lot of prerequisites
Materialize
Pros
- Designed using Google's Material design principles
- Clear documentation
- Tuned performance in its JavaScript
- Focused set of features, i.e. not bloated
Semantic-UI
Installation
$ npm install semantic-ui --save-dev
And then gulp is required to build the CSS.
There are also Git repos for CSS and Less distributions.
Pros
- Feature complete compared to other frameworks.
- Inherent support for dimmers, flags, feeds, 3-dimensional cards
Cons
- Non-traditional CSS syntax
- Built with Less.
Skeleton
Pros
- Ultra lightweight.
UIKit
External links
- Delving Into UIKit (Sitepoint)