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.
- 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
- d1calendar replaces standard HTML
dateanddatetime-localinputs 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.
<link href="https://cdn.jsdelivr.net/npm/d1css@1/dist/d1.min.css" rel="stylesheet">
<!-- optional -->
<script src="https://cdn.jsdelivr.net/npm/d1css@1/dist/d1.min.js"></script>
<script>
d1.load();
</script><link href="https://gitcdn.link/repo/vvvkor/d1/master/dist/d1.min.css" rel="stylesheet">
<!-- optional -->
<script src="https://gitcdn.link/repo/vvvkor/d1/master/dist/d1.min.js"></script>
<script>
d1.load();
</script>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();Download minified d1 files.
<link href="d1.min.css" rel="stylesheet">
<!-- optional -->
<script src="d1.min.js"></script>
<script>
d1.load();
</script>- 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