Zimit has several components to meet the navigation requirements of any type.

Nav:
The main component for the navigation is the new element <nav>, which is fully adapted to the philosophy of the framework:


      
      
Menu:
Menu is a new HTML5 element designed specifically to design menus native-like applications and easily understood by users:

New Save Edit Delete

      
        New
        Save
        Edit
        Delete
      
      
Breadcrumb:
Custom element created for Zimit Framework designed to represent hierarchical navigation
Option you also can use <ul> instead <breadcrumb>

  • Grandparent
  • Parent
  • Child
  • Grandchild
  • Great-Grandchild
  • 
          
            
  • Grandparent
  • Parent
  • Child
  • Grandchild
  • Great-Grandchild
  • Dropdowns:
    Dropdown menus by Zimit Framework designed for intuitive navigation in hierarchical links.
    Config use class="left" on any drop class to invert the dropdown position.
    
            
          
    Tree:
    Custom component to navigate across file/folder trees.
    Option you can also use <ol> with class="tree"
      1. file File 2
      2. file File 2
      3. file File 2
        1. file File 3
        2. file File 3
        3. file File 3
    1. file File 1
    2. file File 1
    
          
            
    1. file File 2
    2. file File 2
    3. file File 2
      1. file File 3
      2. file File 3
      3. file File 3
  • file File 1
  • file File 1
  • Pagination:
    A quick and convenient solution to represent page navigation.

    
          
          

    Messaging


    The communication of information to the user is essential and therefore Zimit Framework includes various types of messages to give the user information by importance and visibility.

    Alert:
    Sometimes you need to show important info to the user, the alert are one of the best ways to do it. They also have the option to close.
    Option also you can use <span> instead <alert>
    Config you can select the color using the custom attribute color="" or class="alert-color"
    Extra may require some js or extra css to close the alert.

    Red alert! Alert message text ×

    
            
              Red alert! Alert message text ×
            
          
    Modal:
    Modal component that shows full-screen messages.
    Option Also you can use <div> instead <modal>

    Modal message ×

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie, justo a fermentum placerat, nisi metus consectetur metus, vel aliquet massa neque sit amet ipsum. Vestibulum non dolor turpis. Fusce convallis odio vitae orci commodo consectetur.

    
          
            
    Modal message ×

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie, justo a fermentum placerat, nisi metus consectetur metus, vel aliquet massa neque sit amet ipsum. Vestibulum non dolor turpis. Fusce convallis odio vitae orci commodo consectetur.

    Notifications:
    Zimit incorporates notifications similar to those of some desktop applications.
    Notifications have a maximum time.
    Config you can select the color using class="notif-color"

    Click to show
    save

    This is a dynamic notification, using only Pure CSS

    ×
    
          
    save

    This is a dynamic notification, using only Pure CSS

    ×
    Tooltips:
    The tooltips give extra information to the user if goes over the element with tooltip.

    Tooltip
    
            Tooltip
          

    Dynamic containers


    Sometimes was looking to sort the contents of a form that highlights or is showy to the user, for it, Zimit Framework has some components.

    Panels:
    The panels are a simple and great way to highlight content.
    Option Also you can use <div class="panel"> instead <panel>

    Sample title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate turpis a turpis consectetur euismod. Sed sit amet quam et eros dignissim euismod.

    
          
            

    Sample title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vulputate turpis a turpis consectetur euismod. Sed sit amet quam et eros dignissim euismod.

    Tabs:
    The tabs are popular at the time of ordering content.
    Zimit Framework incorporates tabs attractive to the user and easy to implement.
    Option Also you can use <div> instead <tab-host> and <tab>
    content 1
    content 2
    content 3
    
          
           
               
               
               
    content 1
    content 2
    content 3
    Accordions:
    Accordions are a popular way to show content, because they only show part of it depending on user preference.
    Option Also you can use <div> instead <accordion>

    En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

    Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

    El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.

    
          
            

    En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

    Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

    El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.

    Image utils


    To complete consistency of Zimit Framework incorporates the set of typographic icons: Ligature Symbols and certain images related components.

    Icon set:
    These icons based on typography were created by Kazuyuki Motoyama under the SIL Open Font License.
    More info
    Option Also you can use <div class="lsf"> instead <icon>

    file print delete clear save upload cloud folder etc

    
          file 
    print
    Thumbnails:
    The best way to display information definitely thumbnails are thumbnails and therefore a component has been created to fulfill that function.

    Image title 1

    This is the image description for this awesome image.

    Image title 2

    This is the image description for this awesome image.

    Image title 3

    This is the image description for this awesome image.

    
          
    Image tittle

    This the image description for this awesome image.

    Carousel:
    A must to show image galleries attractively to the user. Also as the entire framework, implemented only with CSS.
    
          
          

    Bars


    With the landing of HTML5, has added progress bars for eg. forms, Zimit incorporates and gives their own uniform style to it.

    Progress bar:
    The progress bars customized by Zimit are animated by default.

    
          
          
    Meter:
    The <meter> element has little support for customization for now, but Zimit Framework incorporates it to when the support improves.

    60%
    
          60%
          
    Rating bars:
    Rating bars are created on top of the <icon> element

    star star star star starempty 10 votes
    
          
    star star star starempty starempty 10 votes

    Audio


    The new audio component based on HTML5 audio element. For this component you need to add zimit.js

    0:00 0:00
    
          
    0:00 0:00

    Other utils


    If at this point, you know little extras, here's some more to complete user experience and the responsive design of Zimit Framework.

    Tags:
    The tag element is used to emphasize or category labels.
    one tag one tag one tag one tag one tag one tag one tag one tag one tag

    
          one tag
          one tag
          one tag
          one tag
          one tag
          one tag
          one tag
          one tag
          one tag
          
    Badges:
    The badge element are used to display or emphasize numerical information.
    0 1 2 3 4 5 6 7 8
    
          0
          1
          2
          3
          4
          5
          6
          7
          8
          
    Video:
    The video element is used as a wrapper for the flash-based videos to make them responsive.