This design doc is for the purposes of discussing different frameworks that the can be used for dashboard v2. There are many web frameworks used in web development today. We will analyze and generate a cost/benefit analysis for using one css framework over the other. This will justify the usage of the framework and will serve as the starting point for any new users to the project.

Some design considerations that we would like to consider are.

• Has a lot of documentation and users
• User friendly syntax and code examples
• Easily integrated into React

The frameworks that we will be primarily discussing will deal with the two most popular web frameworks.

• Bootstrap
• Semantic UI
• Foundation

From the 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 Semantic website , “Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML”.

When choosing between Bootstrap and Semantic we look at the following tradeoffs.

Pros:

• Supported by Twitter and is one of the most popular web frontend frameworks
• Lots of features and easily integrated into React

Cons:

• Syntax of css classes can be confusing

Pros:

• Syntax is easy to read and easy to learn. Also taught in ICS 314.
• Lots of features and easily integrated into React
• Documentation is well written with multiple examples

Cons:

• Not supported by as large of an open-source community as Bootstrap.

Pros:

• …?

Cons:

• Documentation for Foundation is not as readable or usable.
• Syntax is not as readable
• Lacking components in React

Contributing authors:

Created by kcho on 2018/01/23 09:41.