Layouts

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

The structure of a page consists of 3 main parts: header, main content and footer.

<body>
<div class="body-wrap">
<header class="site-header">
<!-- header -->
</header>
<main class="site-content">
<!-- main content, or sections -->
</main>
<footer class="site-footer">
<!-- footer -->
</footer>
</div>
</body>

The <main> tag is a wrapper for the sections.

In React and Vue, we have provided 3 different page layouts in form of components, and you can find them into the /src/layouts/ folder.

React
Vue
React
src/
└── layouts/
├── LayoutAlternative.js
├── LayoutDefault.js
└── LayoutSignin.js
Vue
src/
└── layouts/
├── LayoutAlternative.vue
├── LayoutDefault.vue
└── LayoutSignin.vue
  • Default layout

  • Alternative layout - It includes a different footer version

  • Signin layout - It includes a header version without the navigation and the footer

You can create as many layouts as you want. Remember to import the desired layout when you create a page in React or Vue.