Getting Started

We have used Bootstrap as the basis for Grace UI Kit and restyled its components as well as adding new ones.

About Bootstrap

Bootstrap is a free and open-source front-end library for designing websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the most popular library for front-end and used across the world by millions of developers. If you want to find out more about it, you can see the documentation here.

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.

Starter Template

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&amp;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>

Using the Grace UI Kit

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:

  • Buttons

  • Cards

  • Carousel

  • Dropdown

  • Inputs

  • Footer

  • Navigation

  • Tables

  • Tabs

  • Typography

New components include:

  • Cards

  • Headers

  • Media Player

  • Radio Buttons and Checkboxes

  • Sliders

PreviousGrace - Modern & Minimalistic UI KitNextFile Structure

Last updated