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.
Why Using our Design System is so Important
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.
Goals/Values
- User focused
- Responsive
- Consistency
This Design System gives developers the ability to quickly create the front-end look of the product, while being consistent.
Bootstrap
Our application currently utilizes Bootstrap v4.3.1.
JavaScript-based Bootstrap components (e.g., dropdowns) use UI Bootstrap 4, an AngularJS Bootstrap library. This is to avoid using jQuery versions of Bootstrap components.
Sass
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:
- Creates an organized CSS file structure.
- Cleaner and less code.
- Allows for theming.
More about Sass can be learned here:
https://sass-lang.com/documentation/
Compile Sass via Gulp
- First, install Node.js. This will install Node Package Manager (npm). If already installed, skip to step 3.
- Restart Microsoft Visual Studio.
- In Microsoft Visual Studio, open ClearView.sln.
- Go to Tools > NuGent Package Manager > Package Manager Console.
- Run the following command:
npm i -g gulp
- Once the command is finished executing, go to View > Other Windows > Task Runner Explorer.
- Click the Refresh button.
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.
Theme File Structure
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:
Folders
- scss: theme.scss.
- bootstrap: base bootstrap scss files - DO NOT EDIT!
- pages: developers save page-specific scss files here.
- theme: design system scss files (i.e., component styles). - DO NOT EDIT!
- css-compiled: theme.css is compiled here and is what is referenced in our application's <head> element. - DO NOT EDIT!
- pages: page-specific css files are compiled here. Developers will reference the css file from this location.
- fonts: font files stored here.
- icons: icons files stored here.
Support
ClearView supports Chrome, Firefox, Internet Explorer 11+, and Microsoft Edge browsers.