build - Sascha-davidson/back-to-static GitHub Wiki

work by Sascha & Luuk

we started with BaseLayout.svelte. This is our basic template where the main content (the ) is loaded. In this page all other components are also loaded such as: header, nav, main & footer, etc. In our case we do the nav and the main.

Now we create multiple layouts for all the different pages. We have to adjust the +layout.svelte per page to the layout that the page needs. For example, we created TwoColumnLayout.svelte for the standard two column layout. In this layout we have two columns and three <slot's />. These <slot's /> are left, right and footer - Is also has a title. We load this on the page where it is necessary and indicate where the slot starts and ends.

<script>
	import NavigationBar from '../organisms/NavigationBar.svelte';
</script>

<header>
	<NavigationBar />
</header>

<main>
	<slot />
</main>

<style>
	@import '$lib/styles/global.css';

	:global(body) {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: 'main nav';
	}

	header {
		grid-area: nav;
	}

	main {
		grid-area: main;
	}
</style>

<script>
	export let title;
</script>

<div>
	<h1>{title}</h1>

	<slot name="left" />
	<slot name="right" />

	<slot class="footer" name="footer" />
</div>

<style>
	div {
		height: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr auto;
	}

	h1,
	.footer {
		grid-column: span 2;
	}
</style>

This is a very good "dry" technique to avoid repeating ourselves. On the other hand, the question is whether diet does not make the project more difficult and longer than it needs to be.