Skip to content

CSS framework and a suitable tool for building all mockups.

Jump to bottom
Veda edited this page Jan 27, 2020 · 5 revisions

Why a CSS framework?

Working on a project like Barefoot Nomad in a team of different software developers can be hard to design a consistent user interface(UI). Consistent UI means the whole application use the same size, fonts, colors, and animation. To share this information in a team can be very hard to manage. They are many CSS frameworks out there and Bootstrap is one of the most popular.

Advantages

  • Fewer Cross-browser bugs
  • A consistent framework that supports major of all browsers and CSS compatibility fixes
  • Lightweight and customizable
  • Responsive structures and styles
  • Good documentation

Disadvantages

  • It may take some time for beginners to learn and use.
  • There will be a requirement of lots of style overrides or rewriting files that can thus lead to a lot of time spent on designing and coding if the design tends to deviate from the customary design used in Bootstrap.
  • We would have to go the extra mile while creating a custom design.
  • JavaScript is tied to jQuery and is one of the commonest library which thus leaves most of the plugins unused.

With these disadvantages plus we need to how to build a fully customized design which is very hard to achieve using this kind of CSS framework.

Solution to this problem

This can be achieved through the use of CSS preprocessors. As we will be using Sass and MATERIAL-UI. With those tools we can easily create our own custom design with the use of Sass features like variables, functions, mixins and other functionalities which are not possible with basic style sheets. They offer an easy solution which enables scalability with efficiency. Now let us look at various advantages of using CSS Preprocessors.

  • Ability to add variables, mixins, functions
  • Join Multiple Files
  • Avoid Repetitions
  • Less Time to Code

The best CSS Preprocessor I found is called Sass. It is completely compatible with all versions of CSS. With this at the end of this project, we will have a good understanding of designing with CSS.

Tool for building all mockups

Figma helps teams create, test, and ship better designs from start to finish. It is a web-based design tool with real-time collaboration. It works in web browsers, and there are also native apps that let you work offline. I have created a figma file that we will be using and it can accessed via this link.

Clone this wiki locally