ATTENTION: JavaScript is disabled! To make this page run correctly, please enable JavaScript in your Browser!

You are using a mobile device!

    CoManD-UI A Responsive Development User Interface

    • Viewport-/Window-Width:
    • SMALL (0px-480px)
    • MEDIUM (481px-768px)
    • LARGE (769px-1024px)
    • larger than 1024px

    Download CoManD-UI* current version for free

    *includes: this html-demopage, comand-ui-css, js, demo images
    Toggle download section visibility


    CoManD-UI is a 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 jQuery-UI 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 mentioned 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)


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

    Table of contents


    Toggle stretch main level

    Equal Height

    Box with some content

    Box with some more content. Box with some more content. Box with some more content

    Box with a lot of content. Box with a lot of content. Box with a lot of content. Box with a lot of content. Box with a lot of content. Box with a lot of content.



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



    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


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


    Fancybox (different types of content)

    Open file (on this server)

    Open text (from this page)



    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.



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


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


    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]

    Slider (Single) [native]

    Replaced Input-Type-Radio

    Replaced Input-Type-Checkbox

    Replace/Fake Select*

    Please select:
    Please select:
    Please select:
    *values will not be submitted with the form!
    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