Skip to content

vvvkor/d1

Repository files navigation

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 and datetime-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

<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 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();

Install manually

Download minified d1 files.

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

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

Docs

Docs and demo

Thanks

License

MIT