JavaScript is enabled!

    You are using a mobile device!

    CoManD-UI: A Responsive Development User Interface

    Download

    Download CoManD-UI* current version for free

    Download
    *includes: this html-demopage, comand-ui-css, js, demo images
    Toggle introduction

    Introduction

    CoManD-UI is jQuery based UI-kit, which can be used stand alone or as part of the CoManD Frontend.

    Problem or "Why do we need another UI-kit?"

    If you want to use alternative, cross-browser compatible ui-elements, jQuery-UI is a good start. But if you want to implement them into your project, want to keep them responsive or like to style them individually, jQuery-UI is very limited.
    The disadvantages of it are:

    • jQuery-UI is not responsive concerning screen-resolutions
    • jQuery-UI still uses old units for dimensions and sizes like pixels (or the not intuitive em-unit)
    • jQuery-UI uses IDs in HTML, CSS and JS, so you cannot implement more than one element of each type per page
    • jQuery-UI does not follow the rule to keep logic (JS), structure (HTML) and style (CSS) separated from each other
    • jQuery-UI is not possible to style without overwriting all set selectors
    • jQuery-UI uses too many unnecessary classes with redundant values
    • jQuery-UI does not use complex css-selectors

    Solution or "How to reinvent the UI!"

    There is only one solution to avoid the upper problems in each project again and again - start with a new clean UI-kit, which follows (best possible) all rules mentioned before.
    This UI-kit contains:

    • jQuery-UI-elements that are reinvented
    • All pixels and em-units are replaced by modern, responsive and intuitive rem-units
    • The HTML-structure is reduced as far as possible
    • Except of datepicker and slide-elements no jQuery-UI is used
    • No jQuery-UI styles are used (structural css only)
    • normalize.css already included to fix cross-browser issues
    • Except of the state-emblems no pixel-graphics and no graphic-files were used
    • All UI-elements are completely customizable with css
    • The grid is already responsive concerning screen-resolution
    • Native HTML-elements were used where possible (i.e. progress-bar)
    • Logic (JS), structure (HTML) and style (CSS) are strictly separated from each other
    • All UI-elements can be styled individually in a separated stylesheet (no overwriting required)

    Comparison

    Category jQuery-UI CoManD-UI
    HTML/CSS/JS separated
    Responsive
    HTML5 valid
    XHTML (transitional) valid
    Semantic correct HTML
    Complex CSS3 selectors
    Relative units (rem, percent)
    Icon-font (exchangable)
    Vector graphics (where possible)
    Separated CSS (structure/design)
    Usage of normalize.css
    Inherits font-abilities
    Usage of traversing

    Table of contents


    Equal Height

    DIV with less content

    DIV with some more content. DIV with some more content

    DIV with a lot of content. DIV with a lot of content. DIV with a lot of content.

    Tooltip


    Slideshow

    Start Slideshow
    Stop Slideshow
    slideshow 1
    Figcaption 1
    slideshow 2
    Figcaption 2
    slideshow 3
    Figcaption 3
    slideshow 4
    Figcaption 4

    Thumbnail-Scroller

    Multi-Step-Indicator-Progress-Bar

    Toggle numeration
    1. 1 Step 1 Further informationen
    2. 2 Step 2 Further informationen
    3. 3 Step 3 Further informationen
    4. 4 Step 4 Further informationen

    Dialog

    Toggle box-shadow (0 0 1rem #999/none)
    Open dialog

    Fancybox

    Open fancybox

    Gallery

    Tabs

    Toggle border-radius (.5rem/0)
    Toggle stretch tabs (true/false)
    Toggle text-align (left/center)*
    *effect is only visible, if stretch tabs are enabled/true

    Tab 1

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Tab 2

    Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

    Tab 3

    Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

    Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

    Accordion

    First

    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

    Second

    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

    Third

    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.


    Form with fieldset and legend

    Progress-bar [native]

    Progress-bar (with output) [native]


    UI-kit-Slider (single, output only) [no jQ-UI CSS]


    Slider (Single) [native]



    Replace Input-Type-Radio


    Replace Input-Type-Checkbox


    Replace/Fake Select*

    *values will not be submitted with the form!
    Please select:
    Please select:
    Please select:
    Persist Long Headline Headline with four words Head-line Headline 5 Headline 6
    content more content content content with four words content content
    content content content content content content