DarkWiiPlayer/CSS is a collection of plain CSS files that can
easily be loaded from a CDN or served directly without any
compilation or pre-processing steps.
Import from CDN
@import
url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/all.css')
layer(framework);
@import
url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/schemes/talia.css')
layer(theme);
Or serve the files yourself from a git submodule
Clone into your project
git submodule add git+https://github.com/darkwiiplayer/css /path/to/styles
Warning
Layers
The all.css file makes use of import statements
with layers, which have less than ideal support in some CSS
preprocessors. If something is broken, check that any bundled
CSS is actually importing the files correctly.
Badges are a generic way of adding short (usually one-word) tags to the document.
They are colourful and attract attention, and should therefore be used carefully and sparingly.
Use them to display informationt hat might be of priority to a user.
Usage examples
Adding entity counts
Users 315
Listing short tags
An Article about CSS
Tags:
#Beginner
#Tutorial
#CSS
The .blob utility class makes an element blob-shaped and fixes is aspect-ratio to 1 / 1.
There are 9 different blob-shapes which will be picked based on the element's child count inside its parent element.
To manually set the shape of a blob, the classes .blob-1 through .blob-9 are available.
The CSS file also exposes the --blob-1 through --blob-9 custom properties which can be used in an elements border-radius property to make it blob-shaped.
Boxes are the main generic container element.
By default they appear inset into the document.
This can be changed by also adding the floating class which will elevate the box from the document.
Boxes can also have a coloured bar at their right edge to make them more attention seeking and help distinguish them vertically from their surrounding content.
Boxes also take their corner radius from the --corner-radius variable.
Content in a box
Content in a box
Drawer elements are used to hide content from the page like a navigation menu.
Open
Click anywhere outside the drawer to cose it again.
TODO
Script-controller drawers are not currently supported.
The floating-action-button custom element can be used to position an element in one of the corners of its parent element.
The button itself will still have to be styled separately though.
Content in a box, button in the bottom right.
The page-hero custom element is a large, full-width box at the beginning of the page.
Items in the hero section are arranged as a centered column.
Items are centered vertically and horizontally.
A single image that's the first child element of the hero section will be displayed as a background image to the box.
The minimum height of the page hero can be adjusted using the cover attribute,
which currently supports values in % of screen height from 40 to 100 in steps of 10.
Developers should generally aim to keep content within this range and avoid growing the hero beyond its intended size.
A special rule makes full-height hero elements preceded by a header shorter by the value of --header-height to ensure that both elements combined will cover the sreen entirely.
Please note that this element only provides a good baseline for a generic hero section.
It does not cover (nor could it) any more elaborate design, but should still provide a good foundation to add more interesting styling on top of.
Ordered
- First list item
- Second item on the list
- Third thing being listed
Unordered
- First list item
- Second item on the list
- Third thing being listed
Warning
Until native CSS scoping becomes available in browsers, it is near-impossible to reliably style nested navigations without writing insanely unmaintainable code.
As soon as this feature becomes available and somewhat widely supported, most of this framework will be updated to use it, but until then, nested nav elements might behave a bit weird.
Navigation breadcrumbs provide a way for displaying the users current location in a document hierarchy.
Navigation bars are horizontally arranged navigation items usually put in a header.
Vertical and Horizontal spacing can be added where needed using the vertical-spacer and horizontal-spacer custom elements.
Adding the attributes double, triple and quadruple increases the spacing.
Basic HTML tables work out of the box.
| Greeting | Name |
|---|
| Hello | World |
| Greetings | Internet |
Vertical tables also work
| Name | Talia |
|---|
| Hobbies | Writing CSS |
|---|
Lines can be added with the borders attribute:
-
horizontal adds horizontal ilnes
-
vertical adds vertical ilnes
-
outline adds a border around the table
When the attribute is missing entirely, horizontal borders will be used.
Tables without horizontal lines will have every second row slightly lightened/darkened for easier reading.
This can be enabled explicitly by setting the alternate attribute to rows
and disabled by setting it to anything else (including the empty string).
| Greeting | Name |
|---|
| Hello | World |
| Greetings | Internet |
| Greeting | Name |
|---|
| Hello | World |
| Greetings | Internet |
| Greeting | Name |
|---|
| Hello | World |
| Greetings | Internet |
| Greeting | Name |
|---|
| Hello | World |
| Greetings | Internet |
Many other common HTML elements have received smaller styling changes.
Summary of the subject
Further explanation on the subject.
The dim-open class will become
transparent when the surrounding details element is opened.
Put this on a span to prevent the indicator from becoming transparent too.
With "slidy" details elements,
the indicator slides down to guide the user's attention
to the beginning of the revealed content.
"Slidy" has limited support due to @scope usage.
Slidy?
Read this!
This is a paragraph with an inline quote
.
As a very dumb person once said:
This is a longer quote with a citation at the bottom.
Me, just now