@greenpanda/svelte-layout

@greenpanda/svelte-layout is a UI helper library for SvelteKit containing components that can be used for page layout and component position without the need of writing CSS code.

Each component has properties that modify the default look.

Installation

yarn add -D @greenpanda/svelte-layout or npm install --dev @greenpanda/svelte-layout

Examples

Svelte REPL example

Components

<Flex />

Flex component extends a HTML <div /> with the property display: flex;. Default props are as following:

export const DefaultFlexProps: FlexProps = {
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: '8px',
  direction: 'row',
  wrap: 'nowrap',
  width: 'fit-content',
  height: 'fit-content',
  margin: '0'
};

Every prop can be changed and if one value is ommited, it will be supplied by the default prop values. Supports breakpoints.

<Grid />

Grid component extends a HTML <div /> with the property display: grid;. Default props are as following:

export const DefaultGridProps: GridProps = {
  justifyItems: 'space-between',
  alignItems: 'center',
  gap: '8px',
  templateColumns: 'unset',
  templateRows: 'unset',
  margin: '0',
  width: 'unset',
  height: 'unset',
  autoFlow: 'row'
};

Every prop can be changed and if one value is ommited, it will be supplied by the default prop values. Supports breakpoints.

<Item />

Item component extends a HTML <div /> element with the property display: block;. It has positioning properties and default props are as following:

export const DefaultItemProps: ItemProps = {
  justifySelf: 'unset',
  alignSelf: 'unset',
  margin: '0',
  padding: '0',
  width: 'auto',
  height: 'auto',
  minWidth: 'auto',
  minHeight: 'auto',
  maxWidth: 'none',
  maxHeight: 'none',
  flex: '0 1 auto',
  gridColumn: 'auto',
  gridRow: 'auto',
  placeSelf: 'auto',
  display: 'block'
};

Every prop can be changed and if one value is ommited, it will be supplied by the default prop values. Supports breakpoints.

breakpoints

All components are tagged with supporting breakpoints can use the following system for responsivity of the UI:

Component supporting breakpoints has a property called breakpoints: { [key: number]: ComponentProps }. The key specifies a breakpoint, which is width of window in pixels, thus equivalent to @media screen and (min-width: breakpoint). Recommended usage is using the smallest breakpoint 0, which includes all screen sizes and then any number larger than 0 for all other breakpoints. Recommended default desktop breakpoint is 720.