d1 front-end framework

Get started

d1 is a lightweight responsive front-end framework with interactive components and utilities. Neutral default style can be customized with CSS variables. Most components are usable without JavaScript.

Test page Demo page

Install with NPM

Install to your repository:

npm install d1-web

Then use in your CSS file (d1-icons.css is optional):

@import "../node_modules/d1-web/dist/d1.min.css";
@import "../node_modules/d1-web/dist/d1-icons.min.css";

And optionally bundle into your JavaScript file:

require("../node_modules/d1-web/dist/d1.min.js");

or build from source:

const d1 = require("../../d1-web/src/module.js").default;
d1.b([document], 'DOMContentLoaded', e => d1.init(/* options */));

Install manually

Add the distributed CSS and JavaScript to the head of your document.
Inclusion of d1.js and d1-icons.css is optional.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" 
      content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/d1.min.css">
    <script src="/js/d1.min.js"></script>
    <noscript>
      <link href="/js/d1-icons.min.css" rel="stylesheet">
    </noscript>
  </head>
  <body>
  </body>
</html>

CDN

Add CDN links to the head of your document.
Inclusion of d1.js and d1-icons.css is optional.

jsDelivr
unpkg
unpkg (short)
unpkg (page)

<link href="https://cdn.jsdelivr.net/npm/d1-web@2.7.5/dist/d1.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/d1-web@2.7.5/dist/d1.min.js"></script>
<noscript>
  <link href="https://cdn.jsdelivr.net/npm/d1-web@2.7.5/dist/d1-icons.min.css" rel="stylesheet">
</noscript>

<link href="https://unpkg.com/d1-web@2.7.5/dist/d1.min.css" rel="stylesheet">
<script src="https://unpkg.com/d1-web@2.7.5/dist/d1.min.js"></script>
<noscript>
  <link href="https://unpkg.com/d1-web@2.7.5/dist/d1-icons.min.css" rel="stylesheet">
</noscript>

<link href="https://unpkg.com/d1-web" rel="stylesheet">
<script src="https://unpkg.com/d1-web/dist/d1.min.js"></script>
<noscript>
  <link href="https://unpkg.com/d1-web/dist/d1-icons.min.css" rel="stylesheet">
</noscript>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/d1-web">
    <script src="https://unpkg.com/d1-web/dist/d1.min.js"></script>
    <noscript>
      <link href="https://unpkg.com/d1-web/dist/d1-icons.min.css" rel="stylesheet">
    </noscript>
  </head>
  <body>
  </body>
</html>

Typography

Mostly, default styling is kept.

Inline

Bold Italic ~~Strike~~
Insert ~~Delete~~ _Sub Span ^Super
Time Abbr Quote Cite Mark Dfn
Code Var Kbd Samp
Link Link without href

Blocks

Paragraph
New line

Paragraph

Preformatted code

Blockqoute

Headings

`h1..h6`	Default margins
`.mar`	Smaller margins
`.fit`	No margins

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Grid

Fractional grid

Grid row container div.row. Direct descendants of the container are columns. By default, they all have equal width.

Options Stack on small screen .flip
Center columns vertically .center
Remove horizontal gaps .fit
Add vertical margins and gaps .mar
Overflow content
Allow columns wrapping .let (disables column width modifiers, auto width)
Allow horizontal scrollbar .roll

Column width options (applied on central column here) Auto .row > .col-0
Single .row > div
Double .row > .col-2
Triple .row > .col-3

Left col

Central
column

Very wide content — required to overflow available column width

Right col

Paragraph after grid

Column position options (applied on central column here) Fill .row > div
Auto .row > .col-0
Centrify .row > .col-0.center
Shift right .row > .col-0.shift (with subsequent columns)

Left

Central
column

Right

Regular grid

Grid rows container .grid-N, where N is number of columns (1, 2, 3, 4, 6). Direct descendants of the container are cells. Cells do wrap, forming a regular grid.

#1
line

#10

#11

Lists

Basic lists

Options Default
Remove margins and list style .fit
Wide horizontal .row
Compact horizontal .row.let

Unordered
List
1. Ordered
2. Sub-list

Term: Definition; Another definition
Another term: Another definition

Tree

Expandable nested lists ul.tree.

Inside list items, use links pointing at nested lists, or links without [href]. When no such link is found, it is generated.

For accordion behaviour, use .accordion.
To remember state, use .mem.

Computer
- Programming
  - JavaScript
  - PHP
- Markup
  - HTML
  - CSS
Human
- English
- Spanish

Tables

Basic table

	`table`	By default, table is styled with border
	`form > table`	No borders if table is a direct descendant of form
	`.bord`	Show borders
	`.let`	Row dividers
	`.hover`	Highlight row on hover
	`.shift`	Full width
	`.fit`	No cell padding
	`.roll > table`	Scroll overflowing width
	`.l1 .r2 .c3`	Align specific columns to the left/right/center

Table caption
#	Component	Code	Remember state	Fix position	Close on Esc
1	Dropdown	`.nav`	-	+	+
2	Tree	`.tree`	`.mem`	-	-
3	Toggle	`.target`	`.mem`	-	-
4	Popup	`.pop`	-	+	+
5	Tabs	`.tabs`	`.mem`	-	-
6	Modal	`.dlg`	-	-	+
7	Drawer	`.drawer`	-	-	+
8	Gallery	`.gal`	-	-	+
9	Topbar	`.stick.toggle`	-	-	-

Responsive table fliptable

Turn rows into cards on small screen table.flip.

Web languages
Language	Type	Year
HTML	Markup	1993
JavaScript	Programming	1995
CSS	Style	1996

Interactive table tablex

Sort table rows table.sort.

Initial sort column number can be set in [data-s] attribute, or (with higher priority) in URL query string parameter with the name defined in [data-qs] attribute (one-based indexing, negative values for descending order).

Filter field query selector in table[data-filter] or add filter field automatically table.filter.

Initial filter value can be set in [data-f] attribute, or (with higher priority) in URL query string parameter with the name defined in [data-qf] attribute.

Automatic dynamic totals (sum for numbers, max for dates, count for strings) table.totals.

Custom dynamic totals in tfoot span: [data-total="count|sum|avg|min|max"], decimal digits [data-dec] (default 2), mode [data-mode="s|n|b|i|d"] (default "n"), where "s" is string, "n" is numeric, "b" is byte size, "i" is time interval, "d" is datetime.

To enable page navigation set [data-limit] to number of rows per page and optionally set [data-pages] to maximum number of page links to show (default is 10). Page navigation is placed before table by default. To place it after table add [data-pages-after] attribute.

Initially shown page can be set in [data-p] attribute, or (with higher priority) in URL query string parameter with the name defined in [data-qp] attribute.

String	Number	Bytes	Interval	Date
HTML	4	900 B	1min 125s	1993-07-09 08:05:01
JavaScript	10.1	1 MB	5m	12/4/1995
CSS	3	350 KB	1y	17.12.1996
Count:	Sum: Avg:	Sum:	Sum:	Avg: Min: Max:

Forms

Buttons

Button and input of type submit have button styling by default.
Add .btn class to the element (usually a link) to make it look like a button (which is not recommended from accessibility point of view). For color options see Colors section.

Link
Span B Link-pad-bord Link-pad Link

Inline form

Stacked form

Form as grid

Form as table

For aligned form, table may be used, which is arguably not semantic, but very convenient. In this case, table must be a direct descendant of form. Table will become stacked on small screen.

Initial values

Initial values for all inputs in a form can be set in URL query string parameter with the name defined in form's [data-q] attribute.

Initial input value can be set in URL query string parameter with the name defined in input's [data-q] attribute. This takes precenence over form's initial values.

Set initial values from URL params (directly)

Set initial values from URL params (as array)

Set initial name in both forms from URL param

Checkbox group form

Color input form

Color

Set input value form

Name Test, Reset

Calendar calendar

Replacement of standard HTML date inputs.

Edit edit

Auto-adjust textarea height to content .adjust.

Turn textarea into WYSIWYG editor .edit.
Optionally define initial mode in [data-mode] attribute ("w" for WYSIWYG, "t" for source editing). If absent, mode is defined automatically based on whether HTML tags are contained in text.
Optionally define custom set of tools in [data-tools]. Example: data-tools="/bi_.".

Editor tools
Code	Command	Description
/	src	View source
*	insertimage	Image
@	createlink	Link
x	unlink	Unlink
b	bold	Bold
i	italic	Italic
_	removeformat	Remove format
.	insertUnorderedList	Unordered list
#	insertOrderedList	Ordered list
1	formatblock	Heading 1
2	formatblock	Heading 2
3	formatblock	Heading 3
p	formatblock	Paragraph
\|	tools	Expand toolbar
c	inserthtml	Code
,	inserthtml	Abbreviation
s	strikeThrough	Strike through
^	subscript	Subscript
v	superscript	Superscript
d	formatblock	Div
q	formatblock	Block quote
f	formatblock	Preformatted
~	inserthorizontalrule	Horizontal ruler
T	inserthtml	Table
(	justifyLeft	Justify left
=	justifyCenter	Justify center
)	justifyRight	Justify right
j	justifyFull	Justify full
+	indent	Increase indent
-	outdent	Decrease indent

Label

Lookup lookup

Autocomplete lookups with data from XHTTP request.

Label

Chained selects.

Chained datalist.

File picker with dropzone pickfile

Add .pick class to file input for drag and drop behaviour and image preview.
Optionally set [data-picked] to URL of initial image.
Add .drop class to file input for fullscreen dropzone (use one per page).
Add .fit class for compact layout.

Validation

Custom form validation.

Custom input validation messages valid

To customize input validation messages, provide validation hint in [data-hint] attribute of input element. Placeholders inside percent characters are replaced with value of corresponding attribute of input element.

Custom hint elements for input validation

Another option is to add sibling element with class .hint.text-e after input. It will be visible only if input value is not valid. Contrary, sibling element with class .hint.text-y will be visible only if input value is valid.

To improve usability, add class .js-unhint to form. This disables default brower-specific tooltips and also disables reporting empty required inputs as invalid until submitting.

Form not valid

Form inputs storage store

To store user input in local storage, add .store class to the form.
Buttons will be shown above the form: to restore input values, to reset inputs to initial values, and to clear stored values.

To restore input values on page reload, add .restore class to the form. To avoid restoring of specific inputs, add .unstore class to theese inputs.

Components toggle

Pure CSS togglers are based on :target behaviour. This approach is semantic, but has some drawbacks:

only one togglable block can be active (open) at the moment
nested togglable blocks are not possible
styling of active link is not possible
on/off behaviour of the link is not possible
page scrolls, which is in most cases undesirable

To overcome these drawbacks, JavaScript is used. To store elements state in local storage, add .mem class like in following examples for target, tabs, tree.

Target

Use link pointing at element with .target class.

If target element should be visible with JavaScript disabled, use .toggle class instead. If target element should be visible with JavaScript disabled, but initially invisible with JavaScript enabled, use .toggle.off classes.

Toggle

Togglable

Mass toggle toggle

To toggle many elements at once, use link with data-nodes attribute and query selector as its value. To initially hide elements add off class on them. To remember state, add mem class to the element and give it unique id or name.

Mass toggle

Toggle: One Two

Inside div with .pop class, use link pointing at sibling div element.
Add .shift class to the target element to pop up leftwards.
Add .fit class to the target element to allow its small width.
Popups can be nested.

WWWWWWWW WWWWWWWWWW WWWWWW WWWWWW WWWWW WWW WWWW

Text popup text

Pop

Nested popup

Pop

Internal popup

Sub pop

Nested hover popup

Pop

Internal popup

Pop left

Navigation

To create a navigation bar add .nav class to the ul element.

With pure CSS, nested lists are shown on hover. With JavaScript, nested lists are toggled on click. Following code shows how to collapse navigation to a single hamburger icon on small screen, and expand it to dropdown navbar on large screen.

Options Add background .bg
Highlight active items .hover
Stack items on small screen .flip
Stack items on any screen .let
Center items vertically .center
Show subtitles
Shift some list item(s) to the right li.shift
Allow small width of dropdowns .fit
Allow horizontal scroll .roll

Logo
Item
Parent item
nested
- Subitem
  info
  - Deep
Last
- Subitem

Tabs

Use list with .nav.tabs classes as tabs headers.
Each list item should contain a link pointing at tab panel.
Next sibling div should contain div tab panels.

Tab1
Tab2
Tab3

2
2

3
3
3

Modal

Use link pointing at element with .dlg class.
Add .let class for larger width.
Optionally use closing link pointing at #cancel inside target element.

Open modal

Modal fullscreen

Use link pointing at element with .dlg.full classes.
Optionally use closing link pointing at #cancel inside target element.

Open fullscreen modal

Dialog dialog

Replacement for standard JavaScript dialogs.

Alert .alert[title][data-caption][data-head][data-pic][data-ok]
Confirm .dialog[title][data-caption][data-head][data-pic][data-ok][data-cancel][data-reverse]
Prompt .dialog[data-prompt][title][data-caption][data-head][data-pic][data-src][data-go][data-ok][data-cancel][data-reverse]

Alert, Confirm link, Confirm link to new tab, Confirm hash, Prompt link.

Gallery

Pure CSS gallery

Inside div with class .gal, add sequence of links, each one pointing at the next and having [style] attribute with --img CSS proprty pointing at image. Lastly, add closing link pointing at #cancel.

Pure CSS gallery is based on CSS variables. Images are lazy loaded. Next image is preloaded. Enter key press navigates to the next image (depends on browser).

Warning: for IE support, use background-image instead of --img in style attribute; no lazy-loading in this case.

Open gallery

Generated gallery gallery

Place links with class .pic inside div with class .gallery to generate gallery similar to pure CSS gallery.

#1 #2 #3

Drawer

Use link pointing at element with .drawer class.
Optionally add .shift class to the drawer element for right side drawer.
Optionally use closing link pointing at #cancel inside target element.

Close Demo drawer

HTML

<div class="stick toggle">
  Topbar
</div>

Details

Warning: limited browser support.

Summary

Details

Utilities

Fetch fetch

Fetch into preview area

Clear preview
Fetch into modal dialog
Fetch into generated modal dialog

[preview area]

(preview)

Responsive class tools

Class depending on available width [data-class-mobile], [data-class-desktop].
Toggles on resize.

Mobile off on

Desktop off on

Conditional link

To make link change its URL when JavaScript is enabled, use [data-href] attribute.

link

Toggle class tools

Toggle class or other attribute a[href^="#"][data-parent][data-nodes][data-set][data-unset][data-attr][id].mem, :is(a, select, [type="checkbox"], [type="radio"])[data-parent][data-nodes][data-set][data-unset][data-attr][name/id].mem.

To remember state, add mem class to the control element and give it unique id or name.

To forget stored state, press Escape key three times in a row. This will clear the local storage.

Highlight links in this block
Highlight parent label

Parent background default
green
yellow

Red text links in this block
Invert page
Change type of the following input
Highlight labels in this block as

"AND" filter

yellow green shadow inverted

"OR" filter

red yellow green plain shadow inverted

Multi-parameter filter filter

Color (multiple select)

As links: any red yellow green

As checkboxes: any red yellow green

Style (single select)

As links: any plain shadow inverted

As radio: any plain shadow inverted

As select:

Reset filter

Items

Items items

Items are nodes with class .item. Container is items' common parent. Containers with items can be nested. Hashed links inside items invoke actions on containing item. If link needs to be outside of the item, point at item with query selector in link's [data-item] attribute.

#copy copy item
#add copy item and clear inputs
#hide hide item
#del delete item unless it is last in the container
#delete delete item, even the last one
#delall delete all items inside container defined by [data-item]
#clear delete all nodes inside container defined by [data-item]

+ — ✕ Span item

+ — ✕

Div item

pop

POP

List item + — ✕

+ ✕ ✕	Name	Value
+ — ✕	Table row item	= + ×

Icons icons

Add icon before element's content .icon-xxx.
Replace element's content with icon .empty.icon-xxx > *. Provide [title] for accessibility.
Toggle icon on active link .act-icon-xxx.

OK Cancel SwitchTarget

Available icons

Customizing icons

In your document, provide SVG symbol with [id] containing prefixed icon name. It will override the icon with the same name, if such exists in iconset.

To explicitly set width, height and class of inserted icon (original or custom), provide values like this: class="icon-sun_128_64_bg-w_text-w".

Icon class
Class and active state Info
Sun (new symbol)
Columns (override symbol)
Sun (custom size and class)

Replace symbols to icons: + x ! ? -

Code highlight code

Add .language-xxx class to code element. Available language codes: html, css, js.

<!-- HTML -->
<a href="#top">Top</a>

/* CSS */
a .test {
	color: inherit;
	background: #c00;
	font: "PT Sans", sans-serif;
}

// JavaScript
let double = function(x){
	console.log('double', x);
	return 2 * x;
}

Code sample code

Add .code class to div element.

HTML code sample

Swipe swipe

Add .swipe class to the element. Allowed swipe directions are defined by the presence of data-swipe-up, data-swipe-down, data-swipe-left, data-swipe-right attributes. Non-empty values of these attributes are used as URLs.

To drag element while swiping, add also .drag class.

Swipe left and right, see URL hash

Drag in any direction,
see URL hash

Theme theme

Customize

Style

Colors

Inline

Error Warning Info Yes No Normal
Error Warning Info Yes No Normal
Error Warning Info Yes No Normal
Error Warning Info Yes No Normal

Buttons

Link Link Link a.btn a.btn a.btn.fit B

Blocks

Error Error

Warning Warning

Info Info

Yes Yes

No No

Border

Bg+Border

Status+Border

Button-like

Links and Icons

Span with generated icon: , , title, caption
Span with on-page icon: , , title, caption
Span with absent icon: , , title, caption
Simple links: Default OK
Hover links: Default OK
Buttons: Default OK

Table:

Default

Nav:
Default
OK

Invert

Inverted text link colors

Boxes

Media object

Some description
January 1970
Link

Figure

Figure caption

Shaded box

No items yet

Click the button to create new item

Add new item

Overlay

Overlay 1
	`.invert`	Invert
	`.hover`	Hover effect
	`.let`	Semi-transparent

Overlay 2
	`.invert`	Invert
	`.row.center.c`	Centrify

Overlay

Text link

Full height

Full

Tags (badges)

Tag Danger Warning Success Info Note
Tag Danger Warning Success Info Note

Bars (progress)

Progress

70%

Tooltips

		Default
	`.c`	Centered
	`.shift`	Leftwise
	`.bg-e`	Danger popup tooltip

Text tooltip text js-tooltip text

popup-tooltip

This is a popup tooltip

text

Custom scrollbar

Warning: limited browser support.

Standard scrollbar

...

Custom scrollbar

...

First item

Second item

Third item

Fourth item

Fifth item

Customization with CSS vars

--text - base text color; default: #000
--bg - base background color; default: #fff
--bg-pane - panel background color; default: rgba(0,0,0,.05)
--border - border style; default: thin solid rgba(0,0,0,.16)
--bg-hilite - highlighted element background; default: rgba(0,0,0,.05)
--text-hilite - highlighted element text color; default: inherit
--link - base link text color; default: #03b
--hover - hovered link text color; default: #07f
--visited - visited link text color; default: #80b
--rad - border radius in ems; default: .2
--gap - base gap for margins and paddings in ems; default: 1
--gap-rate - rate of vertical and horizontal gap; default: .5
--shade - shadow of overlay components; default: 0 .2em .8em rgba(0,0,0,.3)

Customize

Events

Use the following code to add event listener:

d1.listen(type, handler);

type: event type
handler: function which receives event object as its single argument

Event types
Type	Description	Plugin	Event object properties
start	Starting framework initialization	core	—
options	Options are set	core	—
plugins	All plugins installed	core	—
plugin	Plugin installed	core	`name`, `plugin`
toggle	Element visibility changed	toggle	`n`, `on`
active	Toggler link activated or deactivated	toggle, tools	`n`, `on`
switch	Element's attribute switched	tools	`n`, `on`, `attr`, `val`
request	Before asynchronous request	fetch	`request`
response	Asynchronous request completed	fetch	`request`
item	Item added or deleted	items	`n`, `p`, `a`
filter	Items filter applied	filter	`n`, `f`
swipe	Swipe executed	swipe	`n`, `dir`

Reference

By category

Item	Description	Used with	Modifications
.row	Grid	div ul .col-0 .col-2 .col-3	.flip .let .margin .fit .center .roll .shift .stick .center .wrap .read .narrow
.grid-*	Regular grid	div	.let .flip .grid-1/2/3/4/6 .col-1/2/3/4-mobile .col-1/2/3-phone
table	Table	.roll	.hover .fit .let .shift .flip
ul, ol, dl	List		.fit .row
.tree	Tree	ul	.accordion .fit
button, a.btn	Button	form submit button a span	.bg-x .fit [data-target]
.flip	Responsive	.row .nav table
.hide	Visibility by media	div	.hide-mobile .hide-desktop .hide-print .hide-screen .hide-js .hide-nojs
.target	Toggle	div	.target-mobile .target-desktop .toggle .off .mem .act .inact
.pop	Popup		.pop>.shift, .pop>.btn
.nav	Navigation	ul	.flip .hover .let .bg .center .roll .nav.tabs.mem.act .inact .shift
.tabs	Tabs	ul.nav.tabs.mem
.dlg	Modal	.close	.dlg.c.let .dlg.full.center
.gal	Gallery	a .close	[data-info]
.drawer	Drawer	div a.close	.shift
.stick	Topbar		.toggle .let
.pick	File picker	input[type="file"]	.drop [data-submit]
.swipe	Swipe	body, *	.drag
.let	Specific modifications to components	.row .table .nav .dlg .stick .over
.shift	Something about right side positioning	.row > * .nav > li .grid table .pop [data-tip] .drawer *
.item	Relative position	*	.over.let .close .filter
.icon	Small image	img svg a button	.is-on .is-off .icon-x
.bar	Progress bar	div	.text-x
.fix	Fixed block		.r .l
.text-*	Text color	* .invert .hint	.text-e .text-w .text-i .text-y .text-n
.bg	Background color	* .invert	.back .bg-e .bg-w .bg-i .bg-y .bg-n .yel
.r .c .l	Align	*, [data-tip]
.center	Centrify	* .row .nav .full
.roll	Horizontal scroll	* .row .nav ul table	.scroller
.small	Small font	*
.fit	Remove formatting	*	.mar .pad .bord .rad .shade
.mar	Vertical margin	*
.pad	Padding	*
.bord	Border	*
.rad	Border radius	*
.shade	Add shadow	*
.nobr	No wrapping	*
.scroller	Custom scrollbar	html, body, *
.js	JavaScript is on	body	.hide-js, .hide-nojs .toggle, .toggle-mobile, .toggle-desktop .off .mem .subinput .input-tools form.js-unhint form.js-live-val .gallery > a.pic .filter .icon-x .empty.icon-x > * .tip .not-x, .or, .or-x body.js-theme body.trans body.fade

Classes

.act — active link
.back — default background
.bg — light background
.bg-e — nominal "red" background
.bg-i — nominal "blue" background
.bg-n — nominal "gray" background
.bg-w — nominal "yellow" background
.bg-y — nominal "green" background
.bord — add border
.btn — button-like
.c — centrify content inside block
.center — centrify block itself
.close — link to close togglable block
.col-0 — grid cell with non-expanding width
.col-2 — grid cell with 2x expanding width
.col-3 — grid cell with 3x expanding width
.dlg — card-like block
.drag — drag while swiping
.drop — file input with fullscreen dropzone
.drawer — drawer
.fit — remove formatting: margin, border, padding, shadow
.fix — fixed in corner
.flip — responsive component, stacked view on small screen
.full — fullscreen block
.gal — fullscreen gallery
.grid-1/2/3/4/6-mobile/phone — regular grid
.hide — hidden
.hide-js — hidden only if JavaScript controls page
.hide-desktop — hidden only on large screen
.hide-mobile — hidden only on small screen
.hide-nojs — hidden only if JavaScript does not control page
.hide-print — hidden on print
.hide-screen — hidden on screen
.hover — highlight link or table row on hover
.hint — form input hint
.icon — small image
.inact — inactive element
.invert — invert colors
.is-off — hidden inside active link
.is-on — hidden inside not-active link
.item — relative position
.l — align content to the left
.let — specific modifications to components
.mar — add vertical margins
.narrow — narrow block width
.nav — horizontal dropdown navigation
.nobr — prevent automatic text wrapping
.off — hidden with JavaScript
.over — overlay
.pad — add padding
.pick — file input with image preview and dropzone
.pop — popup component wrapper
.r — align content to the right
.rad — rounded corners
.read — block width for comfortable reading
.roll — horizontal scrolling of contents
.row — row of grid
.shade — add shadow
.shift — shift item of .row, .nav, .pop, .drawer to the right
.small — small font size
.stick — stick block to the top
.swipe — swipe detection
.tabs — tabs component
.text-e — nominal "red" text color
.text-i — nominal "blue" text color
.text-n — nominal "gray" text color
.text-w — nominal "yellow" text color
.text-y — nominal "green" text color
.toggle — visibility is controlled by JavaScript, shown by default
.wrap — reasonable page width limit
.yel — temporary highlight targeted block

Plugins

Name	Category	Usage	Basic	Classic	Full
toggle	toggle	components	+	+	+
dialog	toggle	dialog	+	+	+
gallery	toggle	gallery	+	+	+
icons	decor	icons	-	+	+
fetch	url	fetch	-	+	+
calendar	form	calendar	-	+	+
lookup	form	lookup	-	+	+
edit	form	edit	-	+	+
form	form	checkboxes, color input, set value	-	+	+
valid	form	validate	-	+	+
tablex	table	interactive table	-	-	+
tools	decor	toggle class, responsive class	-	-	+
swipe	url	swipe	-	-	+
code	decor	highlight, sample	-	-	+
filter	items	filters	-	-	+
items	items	items	-	-	+
fliptable	table	responsive table	-	-	+
pickfile	form	file picker	-	-	+
store	form	store inputs	-	-	+
scroll	toggle	topbar	-	-	+
theme	decor	theme	-	-	+

Default validation
Name	Enter 2 up to 4 latin letters Looks good
Select
Number
Textarea
Box	Required box
Radio	Sun Moon

Name	Validation hint inside small Validation hint inside div Looks good
Select	Select language
Number	Enter number between 1 and 10, step 0.1
Textarea	Type something
Box	Required box Check to continue
Radio	Sun Moon Select to continue

Text
Pass
Datetime
Boxes	Box [1] Box [2] Box other
Radios	Radio 1 Radio 2
Select
Textarea

d1 front-end framework

Get started

Install with NPM

Install manually

CDN

Typography

Inline

Blocks

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Grid

Fractional grid

Regular grid

Lists

Basic lists

Tree

Tables

Basic table

Responsive table fliptable

Interactive table tablex

Forms

Buttons

Inline form

Stacked form

Form as grid

Form as table

Initial values

Checkbox group form

Color input form

Set input value form

Calendar calendar

Edit edit

Lookup lookup

File picker with dropzone pickfile

Validation

Custom input validation messages valid

Custom hint elements for input validation

Form inputs storage store

Components toggle

Target

Mass toggle toggle

Popup

Navigation

Tabs

Modal

Modal fullscreen

Dialog dialog

Gallery

Pure CSS gallery

Generated gallery gallery

Drawer

Topbar scroll

Details

Utilities

Fetch fetch

Responsive class tools

Conditional link

Toggle class tools

"AND" filter

"OR" filter

Multi-parameter filter filter

Items items

Icons icons

Available icons

Customizing icons

Code highlight code

Code sample code

Swipe swipe

Theme theme

Style

Colors

Inline

Buttons

Blocks

Links and Icons