✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS


Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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


	<div class="body-wrap">

		<header class="site-header">
			<!-- header -->
		<main class="site-content">
			<!-- main content, or sections -->
		<footer class="site-footer">
			<!-- footer -->

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.

└── layouts/
    ├── LayoutAlternative.js
    ├── LayoutDefault.js
    └── LayoutSignin.js

└── 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.
Last updated on May 25, 2021