d1 front-end framework

Get started

d1 is lightweight functional responsive CSS/JS front-end microframework. Its aim is to implement widely used interface components with less code.

Install with NPM

Install to your repository:

npm install d1css

Then use in your CSS file:

@import "../node_modules/d1css/dist/d1.min.css";

And optionally bundle into your JavaScript file:

let d1 = require("d1css");

Install manually

Add the distributed CSS and JavaScript to the head of your document.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <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>
  </head>
  <body>
  </body>
</html>

CDN

Add CDN links to the head of your document.

<link href="https://cdn.jsdelivr.net/npm/d1css/dist/d1.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/d1css/dist/d1.min.js"></script>

Typography

Mostly, default styling is kept.

Inline

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

Headings

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Blocks

Paragraph
New line

Paragraph

Preformatted code

Blockqoute

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
Add vertical margins .mar
Overflow content
Allow columns wrapping .let (disables column width modifiers)

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

Left

Central
column

Very wide content — required to overflow available column width

Right

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

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
	`.fit`	Hide borders
	`.let`	Row dividers
	`.hover`	Highlight row on hover
	`.shift`	Full width
	`.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 Escape
Dropdown	`.nav`	-	+	+
Tree	`.tree`	`.mem`	-	-
Toggle	`.target`	`.mem`	-	-
Popup	`.pop`	-	+	+
Tabs	`.tabs`	`.mem`	-	-
Modal	`.dlg`	-	-	+
Drawer	`.drawer`	-	-	+
Gallery	`.gal`	-	-	+
Topbar	`.topbar`	-	-	-

Legend
H — :hover
T — :target (t — with undesirable scroll)
J — javascript toggle
V — visible
S — scroll

Responsive table

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

Filter and sort table rows table.sort, table[data-filter].

String	Number	Bytes	Interval	Date
HTML	4	9 B	9d	1993-07-09
JavaScript	10.1	1 MB	5m	12/4/1995
CSS	3	3 KB	1y	17.12.1996
Totals	17.1	1.003 MB	1y 5m 9h	-

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 Link-pad-bord Link-pad Link

Inline form

Stacked form

Grid layout

Table layout

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.

Color

Checkbox group

All
Red
Green
Blue

Set input value

Name Test, Reset

Calendar

Replacement of standard HTML date inputs.

Edit

Auto-adjust textarea height to content .adjust.

Turn textarea into WYSIWYG editor .edit.
Optionally define initial mode in [data-wys] ("1" for WYSIWYG, "" 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

Autocomplete lookups with data from XHTTP request.

Label

Chained selects.

Validation

Custom form validation.

Custom input validation messages

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 .text-e after input. It will be visible only if input value is not valid. Contrary, sibling element with class .text-y will be visible only if input value is valid.

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

Form not valid

Components

Pure CSS togglers 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. Dialogs and drawers do not require such enhancements.

Target

Use link pointing at element with .target class.

Toggle

Togglable

Inside div with .pop class, use link pointing at sibling div element.
Optionally add .shift class to the target element to pop up leftwards.
Popups can be nested.

Popup

Pop

Nested popup

Pop

Internal popup

Sub pop

Nested hover popup

Pop

Internal popup

Pop left

Navigation

To create a navigarion 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

≡

Logo
Item
Parent
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

× Fullscreen modal

Dialog

Replacement for standard Javascript dialogs.

Alert .alert
Confirm .dialog[title]
Prompt .dialog[data-prompt][data-caption]

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

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.

≡

× Demo drawer

Topbar

HTML

<div class="topbar let">
  Topbar
</div>

Details

Warning: limited browser support.

Summary

Details

Utilities

Fetch

Fetch into preview area
Fetch into modal dialog
Fetch into generated modal dialog

[preview area]

(preview)

Toggle class

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

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

Responsive class

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

Mobile off on

Desktop off on

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
#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

List item + — ✕

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

Icons

Add icon before element's content [data-icon].
Replace element's content with icon [data-ico] Provide [title] for accessibility.

≡ OK Cancel

Available icons

Code highlight

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

Add .code class to div element.

HTML code sample

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 Fit

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

Blocks

Media object

Some description
January 1970
Link

Figure

Figure caption

Box

No items yet

Click the button to create new item

Add new item

Full height

Full

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)
--topbar - height of topbar; default: 3.2rem

Customize

Reference

Item	Description	Used with	Modifications
.row	Grid	div ul .col-0 .col-2 .col-3	.flip .let .center.shift .stick .center .wrap .read .narrow
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 [data-target]
.flip	Responsive	.row .nav table
.hide	Visibility by media	div	.hide-mobile .hide-desktop .hide-print .hide-screen
.target	Toggle	div	.toggle .off .mem .act
.pop	Popup		.pop>.shift
.nav	Navigation	ul	.flip .hover .let .bg .center .nav.tabs.mem.act .shift
.tabs	Tabs	ul.nav
.dlg	Modal	.close	.dlg.c.let .dlg.full.center
.gal	Gallery	a .close	[data-info]
.drawer	Drawer	div a.close	.shift
.topbar	Top bar		.let
.let	Specific modifications to components	.row, .nav, .dlg, .topbar, table
.icon	Small image	img svg a button
.fix	Fixed block		.r .l
.text-	Text color	* .invert	.text-e .text-w .text-i .text-y .text-n
.bg	Background color	* .invert	.bg-e .bg-w .bg-i .bg-y .bg-n .yel
.r .c .l	Align	*
.center	Centrify	* .row .nav .full
.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	*

Alphabetical reference

.act — active link
.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 expanding width (x2)
.col-3 — grid cell with expanding width (x3)
.dlg — card-like block
.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
.hide — hidden
.hide-desktop — hidden only on large screen
.hide-mobile — hidden only on small screen
.hide-print — hidden on print
.hide-screen — hidden on screen
.hover — highlight link or table row on hover
.icon — small image
.invert — invert colors
.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
.pad — add padding
.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
.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
.topbar — sticky top app bar>
.wrap — reasonable page width limit
.yel — temporary highlight targeted block

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