sphinx-design

_images/logo_square.svg

A sphinx extension for designing beautiful, screen-size responsive web-components.

Get Started

Conflict free CSS

All CSS classes are prefixed, to avoid conflicts with other frameworks.

Works without JavaScript

JavaScript is not required for any “essential” functionality.

Configurable

All colors can be configured using CSS variables.

Supports non-HTML output formats

Components degrade gracefully for non-HTML formats.

Grids

Screen size adaptable grid layouts.

Grids
Cards

Flexible and extensible content containers.

Cards
Dropdowns

Hide content in expandable containers.

Dropdowns
Accordions

Group dropdowns into an exclusive set.

Accordions
Tabs

Synchronisable, tabbed content sets.

Tabs
Steps

Numbered, visually-connected procedures.

Steps
Asides

Floated call-outs that text wraps around.

Asides
Badges, Buttons & Icons

Roles and directives for badges and other components.

Badges, Buttons & Icons
CSS Styling

Change the default colors and other CSS.

CSS Variables

Created with inspiration from Bootstrap (v5), Material Design and Material-UI design frameworks.