Straightforward approach with uncomplicated building blocks.
Super simple HTML structure, with support for mobile devices, grid layouts, and printing (CTRL+P to print this page).
No javascript
Designed to seamlessly integrate with code-generated content in popular frameworks like React, Vue, and Angular
Plays well with other frameworks.
Support for Night / Day mode, enhancing the user experience in low-light conditions.

How to start:

GitHub github.com/kotynia/xd-css
DOCS kotynia.github.io/xd-css/
Copy and paste content - RAW CDN cdn.jsdelivr.net/gh/kotynia/xd-css/xd.min.css
Copy and paste content - minified CODE raw.githubusercontent.com/kotynia/xd-css/main/xd.css
Include <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kotynia/xd-css/xd.min.css">

Variables

--xd-size-t: 2px

--xd-size-s: 4px

--xd-size-m: 8px

--xd-size-l: 16px

--xd-size-xl: 34px

--xd-size-xxl: 64px

--xd-border-radius:6px;

--xd-line-height:1.4;

--xd-line-height-rem:1.4rem;

--xd-font-size:14px;

--xd-brand

--xd-white

--xd-info

--xd-light

--xd-outline

--xd-selected

--xd-border

--xd-background

--xd-text

--xd-gray

--xd-gray0

--xd-gray1

--xd-gray2

--xd-gray3

--xd-gray4

--xd-gray5

--xd-gray6

--xd-gray7

--xd-gray8

--xd-gray9

--xd-warning

--xd-orange

--xd-orange0

--xd-orange1

--xd-orange2

--xd-orange3

--xd-orange4

--xd-orange5

--xd-orange6

--xd-orange7

--xd-orange8

--xd-orange9

--xd-danger

--xd-red

--xd-red0

--xd-red1

--xd-red2

--xd-red3

--xd-red4

--xd-red5

--xd-red6

--xd-red7

--xd-red8

--xd-red9

--xd-primary

--xd-blue

--xd-blue0

--xd-blue1

--xd-blue2

--xd-blue3

--xd-blue4

--xd-blue5

--xd-blue6

--xd-blue7

--xd-blue8

--xd-blue9

--xd-success

--xd-green

--xd-green0

--xd-green1

--xd-green2

--xd-green3

--xd-green4

--xd-green5

--xd-green6

--xd-green7

--xd-green8

--xd-green9

Grid System

From 1 to 12 columns fixed on mobile and desktop

.xd-grid-1

.xd-grid-2

.xd-grid-3

.xd-grid-4

.xd-grid-5

.xd-grid-6

.xd-grid-7

.xd-grid-8

.xd-grid-9

.xd-grid-10

.xd-grid-11

.xd-grid-12

.xd-grid-24

From 1 to 12 columns fixed on mobile

.xd-grid-s1

.xd-grid-s2

.xd-grid-s3

.xd-grid-s4

.xd-grid-s5

.xd-grid-s6

.xd-grid-s7

.xd-grid-s8

.xd-grid-s9

.xd-grid-s10

.xd-grid-s11

.xd-grid-s12

From 1 to 12 columns fixed on desktop , auto on mobile

.xd-grid-l1

.xd-grid-l2

.xd-grid-l3

.xd-grid-l4

.xd-grid-l5

.xd-grid-l6

.xd-grid-l7

.xd-grid-l8

.xd-grid-l9

.xd-grid-l10

.xd-grid-l11

.xd-grid-l12

Merge columns in grid

.xd-span-2

.xd-span-3

.xd-span-4

.xd-span-5

.xd-span-6

.xd-span-7

.xd-span-8

.xd-span-9

.xd-span-10

.xd-span-11

.xd-span-12

.xd-span-24

From 1 to 12 columns fixed on desktop , auto on mobile

.xd-gap

.xd-gap-t

.xd-gap-s

.xd-gap-m

.xd-gap-l

.xd-grid-200

.xd-grid-300

.xd-container

Building blocks

.xd-box

.xd-link

.xd-padding

.xd-padding-t

.xd-padding-s

.xd-padding-m

.xd-padding-l

.xd-padding-xl

.xd-padding-xxl

.xd-border

.xd-border-t

.xd-border-s

.xd-border-m

.xd-border-l

.xd-round

.xd-round-t

.xd-round-s

.xd-round-m

.xd-round-l

Examples

a .xd-button .xd-border-l a:disabled .xd-warning .xd-button

Inputs

text

text disabled

checkbox

time

number

date

file

start photo on ios

start video on ios

text required

text disabled

select

select disabled

Color input

Number input

Range input

Date input

Week input

Datetime-local input

Textarea

Textarea disabled

Examples

Forms

Helpers other

.xd-noresults

.xd-loading

.xd-image

.xd-hover

.xd-focus , disable focus: .xd--focus

.xd-active .xd-active .xd--active .xd-disabled

.xd-shadow

Containers

.xd-content-t 540px

.xd-content-s or .xd-content 960px

.xd-content-m 1140px

.xd-content-l 1320px

Section

Content

.xd-section

Content

.xd-section-t

Content

.xd-section-s

Content

.xd-section-m

Content

.xd-section-l

Content

Text sizes

.xd-tiny .xd-tiny

.xd-small .xd-small

.xd-medium .xd-medium

.xd-large .xd-large

.xd-xlarge .xd-xlarge

.xd-xxlarge

Helpers text

.xd-center

.xd-left

.xd-right

.xd-strong

.xd-underline

.xd-clipboard this will be selected

.xd-nw realy long text lorem ipsum lorem ipsum

.xd-2lines this is first line second line thid line fourth line

.xd-3lines this is first line test test test

second line test test test

third line test test test

fourth line test test test

Typography

Heading 1 Heading 1Heading 1Heading 1

Heading 2 Heading 2Heading 2Heading 2

Heading 3 Heading 3Heading 3Heading 3

Heading 4 Heading 4Heading 4Heading 4

Heading 5 Heading 5Heading 5Heading 5

This is a text link. Strong is used to indicate strong importance. This text has added emphasis.

The b element is stylistically different text from normal text, without any special importance. The b element is stylistically different text from normal text, without any special importance. The b element is stylistically different text from normal text, without any special importance. The b element is stylistically different text from normal text, without any special importance.

The i element is text that is offset from the normal text.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

~~This text is deleted~~ and This text is inserted. The mark element indicates a highlight.

~~This text has a strikethrough~~.

Superscript^®. and Subscript for things like H₂O.

This small text is small for for fine print, etc.

This is a citation.

Visibility

.xd-hide-desktop

TEXT VISIBLE?

.xd-hide-mobile

TEST VISIBLE?

.xd-hide-print

TEST VISIBLE?

.xd-responsive Scroll container

Colors - backgrounds

.xd-brand

.xd-white

.xd-info

.xd-light

.xd-dark

.xd-gray

.xd-gray0

.xd-gray1

.xd-gray2

.xd-gray3

.xd-gray4

.xd-gray5

.xd-gray6

.xd-gray7

.xd-gray8

.xd-gray9

.xd-warning

.xd-orange

.xd-orange0

.xd-orange1

.xd-orange2

.xd-orange3

.xd-orange4

.xd-orange5

.xd-orange6

.xd-orange7

.xd-orange8

.xd-orange9

.xd-red

.xd-danger

.xd-red0

.xd-red1

.xd-red2

.xd-red3

.xd-red4

.xd-red5

.xd-red6

.xd-red7

.xd-red8

.xd-red9

.xd-primary

.xd-blue

.xd-blue0

.xd-blue1

.xd-blue2

.xd-blue3

.xd-blue4

.xd-blue5

.xd-blue6

.xd-blue7

.xd-blue8

.xd-blue9

.xd-success

.xd-green

.xd-green0

.xd-green1

.xd-green2

.xd-green3

.xd-green4

.xd-green5

.xd-green6

.xd-green7

.xd-green8

.xd-green9

Colors - text

.xd-text-brand

.xd-text-white

.xd-text-info

.xd-text-light

.xd-text-warning

.xd-text-danger

.xd-text-primary

.xd-text-success

.xd-text-dark

.xd-text-gray0

.xd-text-gray1

.xd-text-gray2

.xd-text-gray3

.xd-text-gray4

.xd-text-gray5

.xd-text-gray6

.xd-text-gray7

.xd-text-gray8

.xd-text-gray9

.xd-text-orange0

.xd-text-orange1

.xd-text-orange2

.xd-text-orange3

.xd-text-orange4

.xd-text-orange5

.xd-text-orange6

.xd-text-orange7

.xd-text-orange8

.xd-text-orange9

.xd-text-red0

.xd-text-red1

.xd-text-red2

.xd-text-red3

.xd-text-red4

.xd-text-red5

.xd-text-red6

.xd-text-red7

.xd-text-red8

.xd-text-red9

.xd-text-blue0

.xd-text-blue1

.xd-text-blue2

.xd-text-blue3

.xd-text-blue4

.xd-text-blue5

.xd-text-blue6

.xd-text-blue7

.xd-text-blue8

.xd-text-blue9

.xd-text-green0

.xd-text-green1

.xd-text-green2

.xd-text-green3

.xd-text-green4

.xd-text-green5

.xd-text-green6

.xd-text-green7

.xd-text-green8

.xd-text-green9

Border - colors

.xd-border-brand

.xd-border-primary

.xd-border-success

.xd-border-danger

.xd-border-warning

.xd-border-info

.xd-border-white

.xd-border-light

.xd-border-dark

Table 1

.xd-table .xd-responsive

#	image	long	number	text	Input	text
		Crane Arm Outside	234234.32	Hello World		Hook, Fabuland Tow Hook

Table 2

.xd-table-all

#	image	long	number	text	Input	text
		Crane Arm Outside	234234.32	Hello World		Hook, Fabuland Tow Hook

12 cols desktop (.xd-grid-l12), 3 cols mobile (.xd-grid-s3), gap (.xd-gap), centered (.xd-center)

4 cols desktop (.xd-grid-l4), large gap (xd-gap-l), centered (xd-center)

4 cols desktop, span columns

xd-span-4 1-4

xd-span-2 5-6

Non standard Audio/video/progress

<audio controls="">audio</audio>

<video controls="">video</video>

<meter min="0" max="100" low="33" high="66" optimum="80" value="50">

<progress max="100" value="70"> 70% </progress> 70%

Grid gallery printing

.xd-grid-l6 .xd-grid-s2 .xd-gap-l

Gallery with 16/9 aspect ratio

.xd-grid-l6 .xd-grid-s2 .xd-gap-l .xd-container-16

Gallery with 4/3 aspect ratio

.xd-grid-l6 .xd-grid-s2 .xd-gap-l .xd-container-4

Basic navigation mobile friendly

CODE: .xd-container .xd-grid-s3 .xd-gap-s

xd-button width xd-button long long xd-button xd-button long long long long xd-button

For equal height, all elements should have equal height

anchor

.xd-padding

.xd-section

.xd-link

Unicode safe icons

↗️

⭕

🔵

🔴

⚪

⚫

🟣

🟢

Form experiment

Tabs without javascript

CSS Tabs

< visible just for training display:none

tab1

Ha Ha

tab2

Ho Ho

tab3

Hi Hi