The ClearView Design System is a compilation of resources and rules for both design and development of ClearView software that helps us work together. It includes design principles, style guidelines, working code components, and more, to allow designers to focus on the user experience, and developers to focus on more of the backend than the front end.
Using our Design System helps to ensure consistent UI, provides a shared vocabulary, and makes a higher quality product. It speeds up the design and development processes, and makes them more focused and efficient.
New to Adobe XD? Check out some tutorials here:
Download the latest version of our UI kit here:
ClearView UI Kit.zip
Last updated: 04/14/2021
Our application currently utilizes Bootstrap v4.3.1.
All of ClearView's design system components are built with the help of Syntatically Awesome StyleSheets (Sass). This technology is used for the following reasons:
More about Sass can be learned here:
npm i -g gulp
Sass should now be watching for any changes made to a scss file:
If a change is made, it will recompile the css file. Once the steps above have been completed, the gulp Sass script should run automatically any time Microsoft Visual Studio is opened.
The design system has one theme (so far!) and it is named clearview-default. It is located in \ClearView WebPortal\App_Themes. Here is a screenshot of the structure:
ClearView supports Chrome, Firefox, Internet Explorer 11+, and Microsoft Edge browsers.