Welcome to Sajabé

A SCSS, Vanilla JS, and BEM Learning Exercise

Sajabé is an ongoing professional development project. It consists of components designed to practice basic skills in front-end code. A simple design system unifies these components. Your input is appreciated.

word art comprised of SASS JAVASCRIPT BEM in filled and outlined hologram gradients

Design System

Colors

Primary, secondary, gradients, neutrals.

Patterns

Dots, stripes, and sacred seed used as backgrounds and as decorative elements.

Typography

Typefaces and type treatments.

Small Components

Dividers, tags, badges...things which should move to components!

Spacing

Get to know the baseline.

Emblems

Essential visual signifiers that express the brand.

Components

Signup Form

A basic signup form with vertical and horizontal variations.

Carousel

An overflow carousel for displaying additional, but non-essential, content through a vertical navigation.

Accordion

Accordions help to display information as an index whose sections can be opened and hidden by the visitor.

Tabbed

Sections of content are hidden until a button with the title of the content is selected to make the content appear in a shared content area.

Tabbed No JS

An alternative tabbed component which uses radio inputs to show and hide content.

Page Types

Basic Page

A basic single column page of content.

Article

An article with centered content and no sidebar.

Right Sidebar

A basic content page with a right sidebar.

Right Top Sidebar

A page with a right sidebar that is aligned with the top header.

Left Sidebar

A basic content page with a left sidebar.

Left Top Sidebar

A left sidebar page in which the sidebar is aligned top with the page header.

Things This System Needs Next

← → Previous/next options on sequential content
Accessibility menu
Prefers reduced motion
Site search 🔎
Breadcrumbs
Storybook
General accessibility improvements

Lunar Fusion

SAJABÉ