From the perspective of a backend developer who is not a CSS wizard, layouting is often one of my most challenging and time-consuming aspects of web development. It can be frustrating to spend hours trying to get the layout just right. That's where the Solid Layout Library comes in.
The goal of this library is to provide a solution to this pain point by offering minimal, lightweight, and highly customizable layout components. These components are designed to simplify the process of creating basic layouts and user interfaces, allowing backend developers like me to focus on the core functionality of their applications when they need to do some Frontend stuff ore just like to tinker around.
this package is still experimental and under development. I will try to get it to a stable version as soon as possible. I am happy about every feedback and every contribution. If you have any ideas for improvement or want to contribute, please feel free to contact me.
- Minimal, lightweight, and highly customizable
- Built with TypeScript and SolidJS
- requiring just one dependencie
- Works with any CSS framework or no framework at all
- Supports responsive layouts
- Fully type safe
The FlexibleGrid component allows you to create a flexible grid layout using the CSS flex property. It provides options for setting the gap and padding between grid items. Here is an example of how to use the FlexibleGrid component:
import { FlexibleGrid } from 'solid-layout';
const MyComponent = () => (
<FlexibleGrid gap="1rem" padding="1rem">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</FlexibleGrid>
);The ReelGrid component is designed for creating horizontal scrolling grids. It uses CSS grid properties to define the grid layout and scrolling behavior. Here is an example of how to use the ReelGrid component:
import { ReelGrid } from 'solid-layout';
const MyComponent = () => (
<ReelGrid>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</ReelGrid>
);The Stack component is used for creating vertical or horizontal stacks of elements. It uses CSS flexbox properties to control the direction and spacing of the stack. Here is an example of how to use the Stack component:
import { Stack } from 'solid-layout';
const MyComponent = () => (
<Stack direction="vertical" spacing="1rem">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack>
);The AutoGrid component automatically adjusts the number of columns based on the available space. It uses CSS grid-template-columns property with the auto-fit function to create a responsive grid layout. Here is an example of how to use the AutoGrid component:
import { AutoGrid } from 'solid-layout';
const MyComponent = () => (
<AutoGrid minColumnWidth="200px">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</AutoGrid>
);The Center component is used to horizontally and vertically center its child elements. It uses CSS flexbox properties to achieve the centering effect. Here is an example of how to use the Center component:
import { Center } from 'solid-layout';
const MyComponent = () => (
<Center>
<div>Centered Content</div>
</Center>
);The Right component is used to align content to the right. It utilizes CSS flexbox properties to achieve the alignment effect. Here is an example of how to use the Right component:
import { Right } from 'solid-layout';
const MyComponent = () => (
<Right>
<div>Right-aligned content</div>
</Right>
);The Left component is used to align content to the left. It utilizes CSS flexbox properties to achieve the alignment effect. Here is an example of how to use the Left component:
import { Left } from 'solid-layout';
const MyComponent = () => (
<Left>
<div>Left-aligned content</div>
</Left>
);The Apart component is used to align content to the left and right. It utilizes CSS flexbox properties to achieve the alignment effect. Here is an example of how to use the Apart component:
import { Apart } from 'solid-layout';
const MyComponent = () => (
<Apart>
<div>Left-aligned content</div>
</Apart>The Space component allows you to adjust the spacing between elements in a container. You can control the size of the spacing with the size prop by specifying a size value such as "1rem" or "20px".
import { Space } from 'solid-layout';
const MyComponent = () => (
<div>
<div>Element 1</div>
<Space size="1rem" />
<div>Element 2</div>
<Space size="1rem" />
<div>Element 3</div>
</div>
);The ScrollArea component is used to create a scrollable area for its child elements. It provides options for hiding the scrollbar if needed. Here is an example of how to use the ScrollArea component:
import { ScrollArea } from 'solid-layout';
const MyComponent = () => (
<ScrollArea hideScrollbar={true}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</ScrollArea>
);The DualPanel component is used to create a two-column layout with a resizable divider between the columns. It provides options for setting the initial sizes of the columns and controlling the resizing behavior. Here is an example of how to use the DualPanel component:
import { DualPanel } from 'solid-layout';
const MyComponent = () => (
<DualPanel>
<div>Left Panel</div>
<div>Right Panel</div>
</DualPanel>
);The Cluster component is used to group and arrange a set of elements horizontally or vertically. It utilizes CSS flexbox properties to control the alignment and spacing of the elements. Here is an example of how to use the Cluster component:
import { Cluster } from 'solid-layout';
const MyComponent = () => (
<Cluster spacing="1rem">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</Cluster>
);The AppShell component is used to create a basic application shell layout with a header, left bar, and main content area. You can use AutoBreakpoints for responsive layouts.
import {AppShell,BREAKPOINT_POSITION} from 'solid-layout';
const MyComponent = () => (
<AppShell leftBarBreakPoint={BREAKPOINT_POSITION.TOP_LEFT} leftBarComponent={<MyNavBar/>} headerComponent={<MyHeaderComponent/>} footerComponent={<MyFooter/>}
burgerMenuComponent={<Burger/>}>
<MyMainContent/>
</AppShell>
);The SmallContainer component is used to create a container with a fixed width. It provides options for setting the width and padding of the container. Default width is 200px. Default height is 200px Here is an example of how to use the SmallContainer component:
import { SmallContainer } from 'solid-layout';
const MyComponent = () => (
<SmallContainer>
<div>Inhalt des SmallContainers</div>
</SmallContainer>
);The MediumContainer component is used to create a container with a fixed width. It provides options for setting the width and padding of the container. Default width is 300px. Default height is 400px Here is an example of how to use the MediumContainer component:
import { MediumContainer } from 'solid-layout';
const MyComponent = () => (
<MediumContainer>
<div>Inhalt des MediumContainers</div>
</MediumContainer>
);The LargeContainer component is used to create a container with a fixed width. It provides options for setting the width and padding of the container. Default width is 500px. Default height is 600px. Here is an example of how to use the LargeContainer component:
import { LargeContainer } from 'solid-layout';
const MyComponent = () => (
<LargeContainer>
<div>Inhalt des LargeContainers</div>
</LargeContainer>
);The AutoContainer component is used to create a container with a dynamic width and height. It provides options for setting the width and padding of the container.
Here is an example of how to use the AutoContainer component:
import { AutoContainer } from 'solid-layout';
const MyComponent = () => (
<AutoContainer>
<div>Inhalt des AutoContainers</div>
</AutoContainer>
);The MoveToBackground component is used to move one ore more elements to the background. You can set the position with the prop atribute. Defaukt ist absolute. If you want to move 2 different components to the same background level you can give them the same name with the prop name. otherwise they will be on different levels.
import { MoveToBackground } from 'solid-layout';
const MyComponent = () => (
<MoveToBackground>
<div>Element in the background</div>
</MoveToBackground>
);The MoveToForeground component is used to move one ore more elements to the foreground. You can set the position with the prop atribute. Defaukt ist absolute. If you want to move 2 different components to the same foreground level you can give them the same name with the prop name. otherwise they will be on different levels.
import { MoveToForeground } from 'solid-layout';
const MyComponent = () => (
<MoveToForeground>
<div>Element in the foreground</div>
</MoveToForeground>
);if you like my work feel free to hydrate me so I always stay focused
MIT License
Copyright (c) 2022 MurkyTheMurloc
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.