d1 CSS framework

Get started

d1 is lightweight yet functional responsive CSS microframework with optional JavaScript enhancements. It aims to implement most 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:

var d1 = require("d1css");
d1.load();

CDN

To use from CDN just add following code to the head of your page.

<link href="https://cdn.jsdelivr.net/npm/d1css/dist/d1.min.css" rel="stylesheet">
<!-- optional -->
<script src="https://cdn.jsdelivr.net/npm/d1css/dist/d1.min.js"></script>
<script> d1.load(); </script>

Install manually

Download from GitHub:
https://github.com/vvvkor/d1

Add following code to the head of your page:

<link href="d1.min.css" rel="stylesheet">
<!-- optional -->
<script src="d1.min.js"></script>
<script> d1.load(); </script>

Typography

Nothing special here. Mostly, default styling is kept.

Headings

Inline

Blocks

Paragraph
New line

Paragraph

Preformatted code

Blockqoute

Lists

Grid

For the container, add row class. Direct descendants of the container are columns. By default, they all have equal width.

To stack columns on small screen, add flip class to the container.

To allow row wrapping add let class to the container.

To set various proportions, add following classes to the columns: col-0 for minimal required width, col-2 for double width, col-3 for triple width, narrow for narrow width, read to limit maximal width for comfortable reading.

Width limiting classes (col-0, narrow, read) can be combined with: center to centrify column in its available space, shift to shift column to the right.

Wrap your rows into div with wrap class to limit maximal width of the whole thing.

Table

Table is styled with border, unless it is a direct descendant of form. Add hover class to highlight hovered row. Add let class to hide borders.
Add r#, l#, #c (where # is any number) classes to align cells of column number # to the right, left or center, respectively (JavaScript required). Wrap table inside div with class roll to have independent horizontal scrolling of table when it is too wide.

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 accessability point of view). For color options see Colors section.

Forms

Inline form

Stacked form

Aligned form using grid

Aligned form using table

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

Navigation

Horizontal navbar

Just add nav class to unordered list.

Add shift class to list item to shift (and following items) to the right.

Add hover class to highlight item's background on hover.

Vertical navbar

Add nav let classes to unordered list.

Responsive dropdown, stacked on small screen

Add flip class to stack items on small screen. Add let class to stack items on any screen. With pure CSS, nested lists are shown on hover. Add toggle class to control behaviour with JavaScript. In this case, link's href must point to corresponding nested list's id. With JavaScript, nested lists are toggled on click.

Responsive dropdown, hamburger on small screen

Following code shows how to collapse navigation to a single hamburger icon on small screen, and expand it to horizontal dropdown navbar on large screen (add flip class).

Toggle

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 can be used. To control elements with Javascript, add toggle class like in following examples for popup, toggle, tabs, tree. To store elements state in local storage, add mem class like in following examples for toggle, tabs, tree. Dialogs and drawers do not require such enhancements.

Popup

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

Toggle

Use link pointing at element with hide class.

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.

Modal dialog

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

Modal fullscreen

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

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.

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.

Tree

Inside list items, use links pointing at nested lists.
Optionally add accordion class for accordion behaviour.

Details

This element natively has similar functionality.
Warning: not supported in IE and Edge.

Toggle with radio buttons

Popup with radio buttons

Toggle with radio buttons

Tabs with radio buttons

Tree with radio buttons

Colors

Inline

Buttons

Blocks

Links and Icons

Blocks

Media object

Figure

Box

Full height

Invert

JavaScript enhancements

• Dropdown .toggle — toggle, escape
• Tree .toggle — multiple, unscroll, toggle, remember (.mem), .accordion
• Toggle .toggle — multiple, unscroll, toggle, remember (.mem)
• Popup .toggle — multiple, unscroll, toggle, escape
• Tabs .toggle — multiple, unscroll, remember (.mem)
• Dialog — escape
• Gallery — previous, escape
• Link or button with confirmation: .dialog[title][data-caption]
• Link with prompt: a.dialog[title][data-caption][data-prompt]
• Check group of boxes: input[data-group], [class~="data-group"]
• Toggle class: a[href^='#'][data-class], a[data-nodes][data-class] ( test invert )
• Set value of target input: a[href^='#'][data-value]
• Show value of color input: input[type="color"]
• Align table columns: table.r5
• Class depending on resize ([data-class-mobile] or [data-class-desktop]).
• Asynchronous request: [data-target]

AJAX

(preview)

Plugins

Calendar

Replacement of standard HTML date inputs.

Dialog

Replacement for standard Javascript dialogs.

Edit

Add class adjust to textarea for height auto-adjustment to content.

Add class edit to textarea tu turn it into WYSIWYG editor.
Optional data-tools attribute defines custom set of tools.
Optional data-wys attribute defines initial mode: "1" for WYSIWYG, "" for source editing. If absent, mode is defined automatically based on whether HTML tags are contained in text.

Gallery

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

Lookup

Autocomplete lookups with data from XHTTP request.

Chained selects.

Tablex

Filter and sort HTML table.

Valid

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.

Customization with CSS vars

• --text - base text color; default: #222
• --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: #003
• --visited - visited link text color; default: #90c
• --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

Reference

Alphabetical reference