# Page Structure

### Using Blank template

You can start your project by using `blank.html` in getting started folder. it comes with default navigation and few sidebar links to begin with.

{% content-ref url="../starter-template/blank" %}
[blank](https://docs.atomui.com/starter-template/blank)
{% endcontent-ref %}

### By using Includes

#### CSS Includes

```markup
    <link rel="stylesheet" href="assets/vendor/pace/pace.css">
    <script src="assets/vendor/pace/pace.min.js"></script>
    <!--vendors-->
    <link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/jquery-scrollbar/jquery.scrollbar.css">
    <link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">
    <link rel="stylesheet" href="assets/vendor/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="assets/vendor/timepicker/bootstrap-timepicker.min.css">
    <link href="https://fonts.googleapis.com/css?family=Hind+Vadodara:500,600,700|Roboto:400,500,600,700" rel="stylesheet">
    <!--Material Icons-->
    <link rel="stylesheet" type="text/css" href="assets/fonts/materialdesignicons/materialdesignicons.min.css">
    <!--Bootstrap + Atmos Admin CSS-->
    <link rel="stylesheet" type="text/css" href="assets/css/atmos.min.css">
    <!-- Additional library for page -->
```

#### JS Includes

```markup
<script src="assets/vendor/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/vendor/popper/popper.js" type="text/javascript"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/vendor/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="assets/vendor/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<script src="assets/vendor/listjs/listjs.min.js" type="text/javascript"></script>
<script src="assets/vendor/moment/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="assets/vendor/bootstrap-notify/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="assets/js/atmos.min.js"></script>
<!--page specific scripts for demo-->
```