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.
Simple flex containers can be created using the
<flex-*> family of custom elements described below.
More complex flex layouts should be implemented in actual CSS.
- The
gap attribute can be used to set the
CSS gap attribute on the container to space items.
- The
reverse attribute, when present,
reverses the flow of the flex items.
- The
break attribute controls the minimum
viewport width below which a
flex-row will turn into a column.
- Refer to
flex.css
for possible values of these attributes.
Row
Use flex-row to arrange items horizontally.
1
2
3
4
5
Column
Use flex-column to arrage items vertically in a column.
1
2
3
Flex-Grid
Use flex-grid to arrange items into a grid using display: flex.
This allows for a more out-of-the-box responsiveness than the
more specialised display: grid used in the grid-box element.
Use this element when you want to keep column-width consistent across resolutions.
grid-box element.
-
gap acts the same as with the other flex and grid layours.
- The
--column-width can be used to specify a fixed column width.
1
2
3
4
5
6
7
8
9
Use <grid-box> to create native CSS grids with display: grid.
Use this element when you want to keep column-count consistent across resolutions.
- The
columns attribute sets a fixed number of columns for the grid.
- The
gap attribute works exactly like for flex containers.
- The
break attribute works like for flex-grids.
1
2
3
4
5
6
Warning
Native CSS grids are relatively static in their layout and
not as suited to generic responsive layouts. For grids with
dynamic column counts, use
flex-grid
instead.
Dimensions
There are three main dimensions: Small, medium and large, with the boundaries at 700px and 1900px.
For each of these dimensions, elements can be shown or hidden using either a class or a custom
element with a name like hide-small or only-medium.
Note that these are the same sizes as the break points for flex and grid elements,
except those have the additional tiny size at 300px.
Other
- Full Width: The
.full-width class sets an elements width to 100%.
- Vertical overflow: The classes
.scroll-x and .hidden-x set the overflow-x attribute of the element.
- Horizontal overflow: The classes
.scroll-y and .hidden-y set the overflow-y attribute of the element.
- Rounded Corners: The
.round class sets an elements border-radius to the --border-radius variable.
Badges are a generic way of adding short (usually one-word) tags to other elements.
They are colourful and attract attention, and should be used carefully and sparingly.
Use them to display informationt hat might be of priority to a user next to the element this hint applies to.
Usage examples
Counter next to the name of some entity
Users 315
Listing tags
Some Article about CSS
Tags:
#Beginner
#Tutorial
#CSS
The .blob utility class makes an element blob-shaped and fixes its 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
The custom properties --stripe-width and --stripe-color can be used to add a coloured stripe to the left of the box.
Content in a box
The stripe class can be used to add only the stripe of a box without any of the other styles.
Like boxes, cards are a generic container for website content.
They act as containers so their contents will not overflow and have no effect on their width.
They are flashier than boxes and less suitable for large amounts of text and should be used more sparingly to draw attention to more important items.
Images have negtive padding applied to ignore the card's horizontal padding, and if they are the first or last child, they also ignore the top or bottom padding respectively.
This is a card representing some item among many.
Cards could represent users, products, features, etc.
They draw more attention than other elements,
specially if they have images.
TODO
Script-controller drawers are not currently supported.
Cool Column
Multi-Column Component
Present different pieces of information in a
multi-column layout where hovering over a column
reveals more detailed information.
Cool Information
Expands for extra space
So you can fit all the important information
you need on each column.
Because images and slogans work best when you
can back them up with facts.
Cool Website
Cool Component for a Cool Site
Use it to capture the user's attention in the
first few seconds after opening your page.
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.
Spinners indicate that something is loading.
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