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.
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 is a new HTML5 element designed specifically to design menus native-like applications and easily understood by users:
Custom element created for Zimit Framework designed to represent hierarchical navigation
<ul> instead <breadcrumb>
Grandparent
Parent
Child
Grandchild
Great-Grandchild
Dropdown menus by Zimit Framework designed for intuitive navigation in hierarchical links.
class="left" on any drop class to invert the dropdown position.
Custom component to navigate across file/folder trees.
<ol> with class="tree"
file File 1file File 1
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.
<span> instead <alert>
color="" or class="alert-color"
Red alert! Alert message text ×
Modal component that shows full-screen messages.
<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.
Zimit incorporates notifications similar to those of some desktop applications.
Notifications have a maximum time.
class="notif-color"Click to show
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.
<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.
The tabs are popular at the time of ordering content.
Zimit Framework incorporates tabs attractive to the user and easy to implement.
<div> instead <tab-host> and <tab>
content 1
content 2
content 3
content 1
content 2
content 3
Accordions are a popular way to show content, because they only show part of it depending on user preference.
<div> instead <accordion>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
<div class="lsf"> instead <icon>
file print
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.
A must to show image galleries attractively to the user. Also as the entire framework, implemented only with CSS.
Sample 1
Description sample 1
Sample 2
Description sample 2
Sample 3
Description sample 3
Sample 4
Description sample 4
Sample 5
Description sample 5
Sample 1
Description sample 1
Sample 2
Description sample 2
Sample 3
Description sample 3
Sample 4
Description sample 4
Sample 5
Description sample 5
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.
The
<meter> element has little support for customization for now, but Zimit Framework incorporates it to when the support improves.
60%
Rating bars are created on top of the
<icon> element
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
The badge element are used to display or emphasize numerical information.
0
1
2
3
4
5
6
7
8
The video element is used as a wrapper for the flash-based videos to make them responsive.
Alma from Rodrigo Blaas on Vimeo.
Alma from
Rodrigo Blaas on Vimeo.