A sphinx extension for designing beautiful, view size responsive web components.
Project description
sphinx-design (IN-DEVELOPMENT)
A sphinx extension for designing beautiful, view size responsive web components.
Created with inspiration from Bootstrap (v5), Material Design and Material-UI design frameworks.
Supported browsers
- Chrome >= 60
- Firefox >= 60
- Firefox ESR
- iOS >= 12
- Safari >= 12
- Explorer >= 12
(Mirrors: https://github.com/twbs/bootstrap/blob/v5.0.2/.browserslistrc)
Comparison to sphinx-panels
This package is an iteration on sphinx-panels and intends to replace it.
- Replaces
panel
directive with top-levelgrid
+ childrengrid-item-card
- less "bespoke" syntax
grid-item
can be used when no card is neededcard
can be used independently of grids
- tabs changed:
- top-level
tab-set
tabbed
->tab-item
- include
:sync:
option to synchronize tab selection across sets
- top-level
- Minimises direct use of CSS classes (encourage to not use them)
- More declarative, easy to understand options
- Easier to work with non-HTML outputs
- Easier to improve/refactor
- Updated Bootstrap CSS v4 -> v5
- top-level grid can define both column numbers and gutter sizes
- All CSS classes are prefixed with
sd-
(no clash with other theme/extension CSS) - All colors use CSS variables (customisable)
TODO
note that directly using classes should be used as a "last resort", and to please open an issue if you find you are commonly using a certain class.
grids items cannot contain headers; is this in anyway possible with docutils structure?
naming of directives/roles: standard prefix?
why are cards setup with "word-wrap: break-word;"?
check grid-items and tab-items are inside parents (or auto-wrap?)
handle latex
card header/footer syntax?
Use autoprefixer when compiling SASS (see https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers)
horizontal card (grid row inside card, picture on left)
horizontally scrollable cards: (see https://stackoverflow.com/questions/35993300/horizontally-scrollable-list-of-cards-in-bootstrap)
from inline-tabs:
- Elegant design: Small footprint in the markup and generated website, while looking good.
- Configurable: All the colors can be configured using CSS variables.
- Works without JavaScript: JavaScript is not required for "essential" functionality, only for tab synchronisation.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for sphinx_design-0.0.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 2839a1a5e34656d4d948e67d9d0c50947a217468205f899a3b557fb7a7b1f53c |
|
MD5 | 72ce485934e529f7f824595e09e2484f |
|
BLAKE2b-256 | 6461ac223682d4cf1f4669bafdcbd3b7fdb9026fdfda3a48a82812026b0356aa |