D-Forms
Simple and lightweight web-form styles.
Easy to use, tweak and extend.
HTML5, CSS3 (SCSS), jQuery
How to use
All minimized and ready to use files are in /d-forms folder:
/fonts(icon font)d-forms.min.css(main styles)d-forms.min.js(main js file)
- These files should be linked to project:
<script type="text/javascript" src="path/to/file/d-forms.min.js" ></script> <link type="text/css" rel="stylesheet" href="path/to/file/d-forms.min.css"> - Also jQuery is required:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> - Icon font (if needed) should be placed the same folder as d-forms.min.css.
How to customize
It's easy to customize by changing files in the /src folder.
To change styles:
- There are separate styles in the _theme-standart.scss for: colors, elements, theme styles. It's better to:
- Copy /src/scss/_theme-standart.scss file and rename (_theme-NAME.scss).
- Change the first line of /src/scss/d-forms.scss with new filename (_theme-NAME.scss).
- Change anything in _theme-NAME.scss file.
- Compile /src/scss/d-forms.scss to /d-forms/d-forms.min.css. There is ready to use gulpfile.js or use Grunt or your editor's plugins.
Found a bug?
These styles are under active development. So I'm not surprised. Just create an issue. I'll fix it as soon as possible.
Roadmap
- Client side form validation
- Optimization
- Date and time pickers
- Grid styles
- More themes