Seabed

A sturdy base for web projects. Seabed is built on the philosophy that you should have full visibility and control over your development and build process, while keeping a set of base configurations and shared components between projects. You are encouraged to thouroughly read the generated configuration files.

This project was created as a common environment for Fractal web applications.

Requirements

• Node >= 16.13.1
• Yarn

Browser support

• last 2 versions
• > 1%

Based on

• dotenv
• webpack
• babel
• react
• eslint
• scss
• stylelint
• postcss
• linguijs
• jest
• react-testing-library
• svgo
• circleci

How it works

Add Seabed to your project with yarn add @trustfractal/seabed.

Storybook

yarn storybook

Provided components

common

• Confirmation (uses Modal internally)
• DropdownMenu
• Modal
• ExternalLink

fields (for redux-form)

• [] Checkbox
• [] Input
• [] RadioGroup
• [] Textarea

CSS

Each of the available stylesheets is built with theming and customization in mind. We use CSS custom properties to achieve this. The available properties for each of the stylesheets are defined under :root.

For maximum compatibility with mobile devices, a --mobile-viewport-height is used on "fullscreen" mobile components, like Modal. This properties defaults to 100vh if not defined.

base.scss

import "@trustfractal/seabed/dist/base.scss"

This file must be included before all others, but after reset / normalize.

card.scss

import "@trustfractal/seabed/dist/card.scss";

modal.scss

import "@trustfractal/seabed/dist/modal.scss";

dropdown-menu.scss

import "@trustfractal/seabed/dist/dropdown-menu.scss";