html-material-css

    0.2.4 • Public • Published

    html-material-css

    Material Design for native html components using only CSS

    https://elisherer.github.io/html-material-css

    Usage

    Installation

    npm i -S html-material-css
    

    Import in your code

    @import '~html-material-css/less/material.less';
     
    // Possibly use the dark theme 
    @color-theme: dark;

    Colors

    Using less variables you can use any of the material design colors:

    @import '~html-material-css/less/colors.less';
     
    .some-element {
      color: @color-grey500;
    }

    Icons with CSS-Modules

    Use some material design icons by:

    import menu from 'html-material-css/less/icons/menu.less';
     
    ...
     
    <i className={menu._} />
     
    • Icons are detected by <i> tags having the class attribute.

    Available icons:

    import add from 'html-material-css/less/icons/add.less';
    import chevron_left from 'html-material-css/less/icons/chevron_left.less';
    import chevron_right from 'html-material-css/less/icons/chevron_right.less';
    import close from 'html-material-css/less/icons/close.less';
    import create from 'html-material-css/less/icons/create.less';
    import delete from 'html-material-css/less/icons/delete.less';
    import info from 'html-material-css/less/icons/info.less';
    import keyboard_arrow_down from 'html-material-css/less/icons/keyboard_arrow_down.less';
    import keyboard_arrow_up from 'html-material-css/less/icons/keyboard_arrow_up.less';
    import menu from 'html-material-css/less/icons/menu.less';
    import print from 'html-material-css/less/icons/print.less';
    import refresh from 'html-material-css/less/icons/refresh.less';
    import share from 'html-material-css/less/icons/share.less';
    import tag_faces from 'html-material-css/less/icons/tag_faces.less';
    import undo from 'html-material-css/less/icons/undo.less';
    import update from 'html-material-css/less/icons/update.less';

    Floating label

    In order to enable the floating label on an input, you need to specify when the input has content by adding the data-fixed attribute.

    <label>
      <input type="text" data-fixed="true"/>
      <span>Hint text</span>
    </label>

    Or you can ...

    Automatic value attribute setting

    You can automatically set all inputs' values attributes on change by running this script on application startup. This will let you not use the data-fixed attribute to enable floating labels.

    /* This is a fix for detecting when an input field has a value filled */
    document.addEventListener('input', function(e) {
    e.target.setAttribute('value', e.target.value);
    });
    document.querySelectorAll('input').forEach(function(el) {
    el.setAttribute('value', el.value || '');
    });

    You can also use common-js (which will include the script above):

    import 'html-material-css';

    Errors

    Errors are automatically shown when inputs are invalid (Native html5 behavior: required with an empty value, value not matching a pattern, ...)

    To mark errors expilicitly on inputs, you can add the attribute data-error.

    Install

    npm i html-material-css

    DownloadsWeekly Downloads

    2

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    71.1 kB

    Total Files

    58

    Last publish

    Collaborators

    • elisherer