Cruip CSS

Layouts

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.

Layout

<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.

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

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.

Last updated on May 25, 2021