Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
weatherbox:dashboard_v2:semantic:start [2018/01/25 02:27] kcho [CSS Framework Design Doc] |
weatherbox:dashboard_v2:semantic:start [2018/01/25 03:20] kcho [CSS Framework Design Doc] |
||
---|---|---|---|
Line 15: | Line 15: | ||
* Bootstrap | * Bootstrap | ||
* Semantic UI | * Semantic UI | ||
+ | * Foundation | ||
From the [[https://getbootstrap.com|Bootstrap website]], "Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery". | From the [[https://getbootstrap.com|Bootstrap website]], "Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery". | ||
Line 23: | Line 24: | ||
When choosing between Bootstrap and Semantic we look at the following tradeoffs.\\ | When choosing between Bootstrap and Semantic we look at the following tradeoffs.\\ | ||
- | Bootstrap:\\ | + | == Bootstrap: ==\\ |
Pros:\\ | Pros:\\ | ||
* Supported by Twitter and is one of the most popular web frontend frameworks | * Supported by Twitter and is one of the most popular web frontend frameworks | ||
Line 31: | Line 32: | ||
* Syntax of css classes can be confusing | * Syntax of css classes can be confusing | ||
- | Semantic:\\ | + | == Semantic: ==\\ |
Pros:\\ | Pros:\\ | ||
* Syntax is easy to read and easy to learn. Also taught in ICS 314. | * Syntax is easy to read and easy to learn. Also taught in ICS 314. | ||
* Lots of features and easily integrated into React | * Lots of features and easily integrated into React | ||
+ | * Documentation is well written with multiple examples | ||
Cons:\\ | Cons:\\ | ||
* Not supported by as large of an open-source community as Bootstrap. | * Not supported by as large of an open-source community as Bootstrap. | ||
+ | |||
+ | == Foundation: == \\ | ||
+ | Pros:\\ | ||
+ | |||
+ | * ...? | ||
+ | |||
+ | Cons:\\ | ||
+ | * Documentation for Foundation is not as readable or usable. | ||
+ | * Syntax is not as readable | ||
+ | * Lacking components in React | ||