d1
DEPRECATED
This is no longer maintained.
Please consider using d1-web instead.
d1 is a lightweight yet functional responsive CSS microframework with optional JavaScript enhancements.
It aims to implement most widely used interface components with less code.
Features
- lightweight (minified and gzipped: CSS <4 KB, optional JS <4 KB)
- non-bloated class names
- functional
- modern
- responsive (flexbox, mobile first)
- performant
- semantic (uses native elements)
- valid
- cross-browser
- JavaScript not required
- enhanced with JavaScript
- neutral style
- customizable style with css vars
- no floats
- no hacks
- accessibility is not much covered
Add-ons
- d1calendar replaces standard HTML
date
anddatetime-local
inputs with custom dropdown calendar - d1dialog replaces standard Javascript dialogs:
alert
,confirm
,prompt
- d1edit turns textarea into lightweight WYSIWYG editor
- d1gallery makes lighweight image gallery
- d1lookup autocompletes lookups with data from XHTTP request
- d1tablex makes HTML table searchable and sortable
- d1valid sets custom form validation.
Getting Started
Use from CDN
jsDelivr
<!-- optional -->
GitCDN
<!-- optional -->
Install with NPM
Install to your repository:
npm install d1css
Then use in your CSS file:
;
And optionally bundle into your JavaScript file:
var d1 = ;d1;
Install manually
Download minified d1 files.
<!-- optional -->
Browser Support
- IE 9 (mobile style only, no js enhancements)
- IE 10+, Edge (except details/summary component)
- Latest Stable: Chrome, Firefox, Opera, Safari
- iOS 6-8
- Android 4.x