We have used Bootstrap as the basis for Grace UI Kit and restyled its components as well as adding new ones.
If you plan on customising the kit, you should keep in mind that you need to understand how the Bootstrap library works. We recommend you check out the:
In order to build pages with the Grace UI Kit, you will first need to import the Bootstrap Library and then the kit files. We have created a starter template that makes this easier.
The easiest way to start a new page is to edit the following template (also included in the archive). This example file has included inside all the necessary files. To be able to build your page and add components and sections, you will need to have Bootstrap CSS and JS, Google Fonts, Font Awesome and the custom styling for the Grace Kit. If you ommit one of the CSS files included, your page will not get the desired look.
<!doctype html><html lang="en"><head><!-- Required meta tags --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CSS --><link rel="stylesheet" href="assets/vendor/bootstrap/v4/css/manifest.css" /><!-- Font Awesome Icons and Google Fonts Import --><link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Montserrat:300,400,700,900&subset=cyrillic,cyrillic-ext,latin-ext"rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"><!-- Grace UI Kit CSS --><link rel="stylesheet" href="assets/fonts/icons.css" /><link rel="stylesheet" href="assets/css/grace.css" /><title> Grace Template </title></head><body><h1>Hello, world!</h1><!-- jQuery, Popper.js and Bootstrap JS --><script src="assets/vendor/jquery/v3.2.1/js/manifest.min.js"></script><script src="assets/vendor/bootstrap/v4/js/popper.min.js"></script><script src="assets/vendor/bootstrap/v4/js/manifest.min.js"></script></body></html>
After you have set up your starter template, you will need to add elements and sections to it to create your desired page. The process resembles building a lego. You will need to go through the presentation file and search for the elements you would like to use, then access the source file and copy-paste them to your page.
Some of the components are restyled Bootstrap components and some are new. The same goes for the sections. We have created a new look for the cards and forms found in standard Bootstrap and we have also created new custom ones.
Restyled Bootstrap components include:
New components include:
Radio Buttons and Checkboxes