Skip to content

CSS framework and a suitable tool for building all mockups.

Jump to bottom
Veda edited this page Dec 4, 2019 · 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 requirement of lots of style overrides or Wrewriting 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 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

In this research is conducted, I found out that the most reason why we need a CSS framework is to manage and have a reusable style across the whole application. This can be achieved through the use of CSS preprocessors. they are special CSS files that contain 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

  1. 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.
Clone this wiki locally