Nominating Presidential Muppets

    skeleton-checkboxes

    1.0.2 • Public • Published

    skeleton-checkboxes

    Checkboxes for Skeleton CSS

    Fairly simple checkbox styles for Skeleton CSS, inspired by Material Design.

    Demo

    Available on bower and npm with

    $ npm install skeleton-checkboxes
    $ bower install skeleton-checkboxes

    Usage

    Add the following html for each checkbox to be styled. The ordering of elements is important because of how the CSS selectors are structured

    <input type="checkbox" id="my-checkbox">
    <label for="my-checkbox"></label>

    When using the checkbox styles, if you have a non-white background or for other aesthetic reasons, there might be a need to tune the colors. This can easily be achieved like so:

    input[type="checkbox"]:checked.pink + label {
      background-color: #ff5891;
      border: 1px solid #ff5891;
    }

    Add the matching class attribute to the <input> element, fe. <input type="checkbox" class="pink" id="pink-checkbox">.

    Possible future efforts

    • evaluate focos effects (zoom?)

    Install

    npm i skeleton-checkboxes

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • orbitbot