Parts — Project Setup

Parts Project Setup

Most of these components are entirely self-contained. They can be copied and pasted into any Svelte project.

However, there are a few small packages I use to achieve certain effects and maintain styles across components:

Tailwind 
pnpm install -D tailwindcss postcss autoprefixer
pnpm exec tailwindcss init -p
// click the link above to learn how to set up tailwind
Fractils 
pnpm i -D fractils

Global CSS

A helpful class I like to use throughout the site is .transition-smooth.

To use it anywhere, add it to your +layout.svelte file:

:global(.transition-smooth) {
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

Note that you can't use it in your @apply rules, since global CSS is processed separately from tailwind.

Copying Code

If a component is ready to be used (I've cleaned it up enough to be usable), you can click the "Show Code" button in the top right corner.

Example Button.svelte

<script lang="ts">
	export let text = 'Read Article';
	export let url = '#';
	export let color = 'black';
	export let bgColor = 'white';

	let textItem: HTMLDivElement;
	let icon: HTMLDivElement;
</script>

<a class="button" href={url} style={`--color:${color}; --bg-color:${bgColor}`}>
	<div class="button--text" id={`text-${color}`} bind:this={textItem}>
		<p>
			{text}
		</p>
	</div>
	<div bind:this={icon} class="button--icon" style={`--left-margin: ${textItem?.offsetWidth}px;`}>
		<svg
			width="24px"
			height="24px"
			stroke-width="2.5"
			viewBox="0 0 24 24"
			style="transform: scale(1.9);"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
			{color}
			><path
				d="M12.25 18.5V6m0 0l6 6m-6-6l-6 6"
				stroke={color}
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
			/></svg
		>
	</div>
</a>

<style lang="postcss">
	.button {
		@apply overflow-hidden relative block;
		@apply p-0 rounded-full;
		background-color: var(--color);

		&:hover {
			.button--icon {
				margin-left: var(--left-margin);
				transform: rotate(90deg);
			}
		}
		&--text {
			@apply absolute w-fit flex items-center h-full px-6;
			@apply overflow-hidden text-xl;
			white-space: nowrap;
			color: var(--bg-color);
		}

		&--icon {
			@apply relative;
			@apply border-4;
			@apply p-4 rounded-full;
			border-color: var(--color);
			background-color: var(--bg-color);
			/* transition: all 0.3s ease; */
			transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
			transform: rotate(135deg);
		}
	}
</style>