Containerize.Design

UI Kit of components to develop Aspose.PDF webapps

Usage

All that you need is to download main.bundle.css and main.bundle.js add to you project than feel free to use components that show in this documentation.

Version 1.1.1

Radio buttons imrpoved. Fix js bug with adaptive dropdown.

main.bundle.css
main.bundle.js

Version 1.1.0

Upload form was updated (Tabs were added, Uploaded files design changed). Modal, Dropdown, Checkbox, Metadata form components were added. Header was updated with Adaptive Header Menu. In each place were tag img was used the same styles will be geven to svg tag if you will change img with src to some svg.

main.bundle.css
main.bundle.js

Version 1.0.0

main.bundle.css
main.bundle.js

Notes *

If you want to change color of components(theme) for different web apps, you will need to change only css variables.

            
                :root {
                    --primary-rgb-color: 114, 161, 255; /* RGB of primary color for Radio Buttons etc. */
                
                    --primary-bg-color: #72A1FF;
                    --primary-hover-bg-color: #578BF2;
                    --primary-active-bg-color: #4E7DDC;
                    --primary-text-color: #fff;
                    --primary-hover-text-color: #fff;
                    --primary-active-text-color: #fff;
                
                    --secondary-bg-color: #72A1FF26;
                    --secondary-hover-bg-color: #578BF2;
                    --secondary-active-bg-color: #4E7DDC;
                    --secondary-text-color: #72A1FF;
                    --secondary-hover-text-color: #fff;
                    --secondary-active-text-color: #fff;
                
                    --success-bg-color: #0DC268;
                    --success-hover-bg-color: #0DC268;
                    --success-active-bg-color: #0DC268;
                    --success-text-color: #fff;
                    --success-hover-text-color: #fff;
                    --success-active-text-color: #fff;
                
                    --circles-bg-color: #E7EEFC;
                }