iroco-ui

Design system for Iroco based on SvelteKit.

See the Documentation (not in sync anymore : to be restored with storybook)

Install in your svelte application

Prerequisites:

• @sveltejs/kit: ^2.x
• svelte: ^5.x

# latest
npm install @iroco/ui
# next
npm install @iroco/ui@next

Minimal scaffolding

src/app.scss

@use 'node_modules/@iroco/ui/dist/scss/fonts';
@use 'node_modules/@iroco/ui/dist/scss/style';
@use 'node_modules/@iroco/ui/dist/scss/constants';
@use 'node_modules/@iroco/ui/dist/scss/containers';

Example of layout with navigation

src/routes/+layout.svelte

<script>
	import '../app.scss';
	import { Navigation, NavigationItem } from '@iroco/ui';
</script>

<Navigation navigationItems={[new NavigationItem('About', '/about')]} type="topbar" />
<main class="main">
	<slot />
</main>

<style lang="scss">
	@use 'node_modules/@iroco/ui/dist/scss/colors.scss';
	@use 'node_modules/@iroco/ui/dist/scss/constants.scss';
	@use 'node_modules/@iroco/ui/dist/scss/containers.scss';
	@use 'node_modules/@iroco/ui/dist/scss/button.scss';
</style>

develop

Useful Svelte 5 + Storybook examples.

To install dependencies :

~/src/iroco-ui$ npm ci

Building :

~/src/iroco-ui$ npm run build

Releasing :

~/iroco-ui$ npm publish

documentation (to be done with storybook)

The docs directory contains the documentation app deployed on github pages. To install dependencies :

~/src/iroco-ui/docs$ npm ci

You can add/update components documentation into docs/src/pages/components and update the left menu in docs/src/includes/sidebar.md.

When you have to work on the CSS for components, you can have hot reloading. To do so you have to make the iroco-ui build watched with :

~/src/iroco-ui$ npx npm-watch build

And in the same time launch the dev server for docs :

~/src/iroco-ui/docs$ npm run dev

To build the documentation (in docs) :

~/src/iroco-ui/docs$ npm run build