Creditdesign Svelte Components

Welcome to creditdesign-svelte-components, a collection of svelte components used to build simple css layouts.

I’m using this project to put into practice the CSS I am learning from Every Layout and to learn about SvelteKit.

I highly recommend you purchase Every Layout, as I’m probably making lots of silly mistakes here.

Installation

To install the components from npm:

npm install --save-dev creditdesign-svelte-components

Useage

It is first necessary to copy the global CSS file into your project, or to import import it into your Svelte layout, for instance with:

import '..node_modules/creditdesign-svelte-components/index.css';

Then you can import each component into a Svelte app or componant as needed. For instance, you can import the Box and Stack components with:

import { Box, Stack } from 'creditdesign-svelte-components';

Then go ahead and use the components in your layout:

<Box>
	<Stack>
		<p>Hello</p>
		<p>world</p>
	</Stack>
</Box>

Alternatively, the components can can be used as class names, applied to html elements:

<div class="box stack">
	<p>Hello</p>
	<p>world</p>
</div>

Built by Chris Ryan. Checkout this project on GitHub.