The Typography

restyling the basis

---

Headings have been completely restyled to achieve a consistent style, here are some examples:

Heading 1

      
Heading 1
      

Heading 2

      
Heading 2
      

Heading 3

      
Heading 3
      

Heading 4

      
Heading 4
      

Heading 5

      
Heading 5
      

Heading 6

      
Heading 6
      

Also been restyled all text elements, including new elements added in HTML5:

Paragraph text element

      
Paragraph text element
      

Sample with b, Sample with strong

      Sample with b, Sample with strong
      

Sample italic, Sample cite, 11:00

      Sample italic, Sample cite, 11:00
      

Sample definition, AS

      Sample definition, AS
      

Emphatized text

      Emphatized text
      

Blockquote sample text

      
Blockquote sample text
      

Deleted sample, Deleted sample

      Deleted sample, Deleted sample
      

Marked text

      Marked text
      

Next, ordered and unordered lists

1. First sample text
2. Second sample text

      

        
First sample text
        
Second sample text
      
      

• First sample text
• Second sample text

      

        
First sample text
        
Second sample text
      
      

To finish this part, have added new elements styles <section> to represent section headings:

Title

Subttle

---

        

          
Title
  
Subttle
          

        
 
      

Option use <wbr> for specifying a line break opportunity.

Displaying Code

so sexy

---

Zimit incorporates consistent styles for different ways to display code: the classics <code> and <pre>, and the new ones thanks to HTML5 you will see below:

some code

      
some code
      

some code

      <code>some code</code>
      

Keyboard input

      Keyboard input
      

Sample output from computer program

      Sample output from computer program
      

Variable

      Variable
      

Forms

---

Following the philosophy of the framework, has styled all components with default form and giving a uniform look:

Text inputs:

Radio and checkbox inputs:

Search input:

Text are input:
Sample text...

      Sample text...
      

Text input with data-list:

      

        

        
        down 
      
      

File upload button:

      
Upload upload
      

Custom combo box:

      

        Select 
        
          Volvo
          Saab
          Opel
          Audi
        
        down 
      
      

The new keygen component:

Styled fieldset:

Personalia:

Name:
Email:
Date of birth:

      

        

          
Personalia:
          Name: 

          Email: 

          Date of birth: 
        
      
      

Styled Buttons

also with icons

---

According to the philosophy of the framework has been styled buttons without adding any additional class:

Sample button

      Sample button
      

In addition to the default button styled basic, other 9 colors available, simply add the style: btn-color where "color" is the desired color:

Sample button Sample button Sample button Sample button Sample button

      Sample button    Sample button
      Sample button Sample button
      Sample button
      

Sample button Sample button Sample button Sample button

      Sample button Sample button
      Sample button Sample button
      

Also thanks to the inclusion of the set of icons Ligature Symbols, buttons can contain icons:

starempty Sample button Sample button star

      starempty Sample button
      Sample button starempty
      

Please note at this point the new element introduced by Zimit: <icon> which is used specifically to display typographical icons. See more info and details on Goodies > icons section.

Responsive Tables

just amazing

---

As you may have noticed, Zimit is a fully-responsive framework, and tables would not be less!

One	Two	Tree	Four	Five
sample column 1.1	sample column 2.1	sample column 3.1	sample column 4.1	sample column 5.1
sample column 1.2	sample column 2.2	sample column 3.2	sample column 4.2	sample column 5.2
sample column 1.3	sample column 2.3	sample column 3.3	sample column 4.3	sample column 5.3
sample column 1.4	sample column 2.4	sample column 3.4	sample column 4.4	sample column 5.4

    

      

        

          
One
          
Two
          
Tree
          
Four
          
Five
        
      
      

        

          
sample column 1.1
          
sample column 2.1
          
sample column 3.1
          
sample column 4.1
          
sample column 5.1
        
        

          
sample column 1.2
          
sample column 2.2
          
sample column 3.2
          
sample column 4.2
          
sample column 5.2
        
        

          
sample column 1.3
          
sample column 2.3
          
sample column 3.3
          
sample column 4.3
          
sample column 5.3
        
        

          
sample column 1.4
          
sample column 2.4
          
sample column 3.4
          
sample column 4.4
          
sample column 5.4
        
      
    
            

I invite you to change the size of the window and observe what happens to the table.
Sure you have seen that each <td> has an attribute called data-title, this is used for the title of his line when the window is very small.
The attribute data-title is optional but highly recommended.

Whant more?

goodies!

---

Zimit is a complete framework for prototyping web sites and web applications and therefore have designed many custom components to provide consistent and robust experience sought.

Want to know more? jump to: Goodies external