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 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();
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>
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>
Nothing special here. Mostly, default styling is kept.
let
class to remove margins.
QuoteCite Mark Dfn
Code
Var
Kbd
Samp
Paragraph
New line
Paragraph
Preformatted code
Blockqoute
let
class to remove margins and list style.
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
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.
Component | Pure CSS | JS enhance.toggle Re | .mem Close on Escape | Modifi | Dropdown | H | =/T | - | + |
| Tree | tC | =/T | + | - | .accor
Toggle | tC | =/T | + | - |
| Popup | HtC | =/T | - | + |
| Tabs | tC | T | + | - |
| Modal | T | = | - | (+) | .full
Drawer | T | = | - | (+) |
| Gallery | T | = | - | (+) |
| |
---|
Legend
H — :hover
T — :target
(t — with undesirable scroll)
C — :checked
(checkbox hack)
... |
---|
... |
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.
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.
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.
Add nav let
classes to unordered list.
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.
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).
Pure CSS togglers based on :target
behaviour.
This approach is semantic, but has some drawbacks:
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.
Inside div
with pop
class, use link pointing at sibling element.
Optionally add shift
class to the target element to pop up leftwards.
Use link pointing at element with hide
class.
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.
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.
Use link pointing at element with hide full
classes.
Optionally use closing link pointing at #cancel
inside target element.
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.
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.
Inside list items, use links pointing at nested lists.
Optionally add accordion
class for accordion behaviour.
This element natively has similar functionality.
Warning: not supported in IE and Edge.
:target
-based togglers without using JavaScipt.
Error Error
Warning Warning
Info Info
Yes Yes
No No
Bg
Border
Bg+Border
Status+Border
Button-like
Table: | Default | Icon | Link | Both |
No items yet
.toggle
— toggle, escape
.toggle
— multiple, unscroll, toggle, remember (.mem
), .accordion
.toggle
— multiple, unscroll, toggle, remember (.mem
)
.toggle
— multiple, unscroll, toggle, escape
.toggle
— multiple, unscroll, remember (.mem
)
.dialog[title][data-caption]
a.dialog[title][data-caption][data-prompt]
input[data-group]
, [class~="data-group"]
a[href^='#'][data-class]
, a[data-nodes][data-class]
(
test
invert
)
a[href^='#'][data-value]
input[type="color"]
table.r5
[data-class-mobile]
or [data-class-desktop]
).
[data-target]
Replacement of standard HTML date inputs.
Replacement for standard Javascript dialogs.
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.
Place links with class pic
inside div
with class gallery
to generate gallery similar to pure CSS gallery.
Autocomplete lookups with data from XHTTP request.
Chained selects.
Filter and sort HTML table.
String | Number | Bytes | Interval | Date |
---|---|---|---|---|
beta | .001 | 9 b | 1y | 2.1.2018 |
Alpha | 9 | 10 kb | 2m | 1/15/2018 |
kappa | 123 | 2KB | 4 h | 2018-01-05 |
Gamma | 12.3 | 1 MB | 3d | 21.01.2018 |
delta | 1 2,4 | 1 MB | 3d | 21.01.2018 |
Totals | 144.301 | 1.1 MB | 1y 2m 3d 4h | - |
... |
---|
... |
... |
Custom form validation.
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.
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.
--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 em
s; default: .2
--gap
- base gap for margins and paddings in em
s; default: 1
--gap-rate
- rate of vertical and horizontal gap; default: .5
CSS class | Description | Used with | Modifications |
---|---|---|---|
.row | Grid | .col-0 div .col-2 .col-3 | .flip .stick .let .wrap .read .narrow .shift |
.roll | Horizontal scroll | table.hover | |
button, a.btn | Button | form submit button a span | .bg-x [data-target] |
.nav | Navigation | ul | .flip .hover .let .bg .act .shift |
.drawer | Drawer | div a.close | .shift |
.flip | Responsive | .row .nav | |
.fix | Fixed block | .r .l | |
.hide | Togglable (hash) | div ul .close | .dlg.c.let .full.c .hide-mobile .hide-desktop .pop .tabs |
.switch | Togglable (radio) | label div | .pop .tabs |
.gal | Gallery | a .close | [data-info] |
.toggle | JavaScript toggle | ul div .js-control .js-hide | .mem |
.icon | Small image | img svg a button | |
.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 | * | |
.small | Small font | * | |
.mar | Vertical margin | * | |
.pad | Padding | * | |
.bord | Border | * | |
.rad | Border radius | * | |
.let | Less formatting | *, ul, table, .row | |
.nobr | No wrapping | * | |
.hide-print .hide-screen | Show by media | * |
.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
.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
.js-control
— visibility is controlled by JavaScript, shown by default
.js-hide
— hidden with JavaScript
.l
— align content to the left
.let
— remove some formatting: margin, table border, list style
.mar
— add vertical margins
.narrow
— narrow block width
.nav
— horizontal dropdown navigation
.nobr
— prevent automatic text wrapping
.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
.shift
— shift item of .row
, .nav
, .pop
, .drawer
to the right
.small
— small font size
.stick
— stick block to the top
.switch
— input controlling visibility of following block
.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
.wrap
— reasonable page width limit
.yel
— temporary highlight targeted block