English | Deutsch | Español
☰

av.css



Was ist Anuvito CSS?

Das Anuvito CSS ist ein moderes CSS Framework mit Responsive Design:

Kleiner und schneller als andere CSS Frameworks.
W3C komform und ohne !important Zuweisungen.
Trennung von Farben und Layout Zuweisungen.
Keine Bezeichnungen von Farben im Klassen-Namen, für unterschiedliche Farbsets.
Basiert auf Standard HTML, CSS und JavaScript (Keine jQuery oder JavaScript Biliotheken).
Entwickelt für die Darstellung für alle Endgeräte: PC, Laptop, mobile Tablets und Smartphones

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

  1. Container
  2. Dialog Messages
  3. Artikel - Articles
  4. Listen - Lists
  5. Tabellen - Tables
  6. Boxen, Cards und Widgets
  7. Responsive Grid
  8. Buttons
  9. Bilder - Images
  10. Modal-Dialoge
  11. Slideshow
  12. Toggles und Accordions
  13. Tab Navigation
  14. Grid Block

Container

Die av-container Klasse bietet einheitliche Werte wie zB.:

  • margins
  • paddings
  • vertical alignments
  • horizontal alignments

Die av-container Klasse kann für alle Arten von HTML-Container-Elementen verwendet werden:

<div>, <header>, <footer>, <article>, <section> und mehr.

Header

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Footer

Container av-container
Container av-container + av-color
Container av-container + av-color-01
Container av-container + av-color-01a
Container av-container + av-color-01b
Container av-container + av-color-02
Container av-container + av-color-02a
Container av-container + av-color-02b

Panel und Hinweise

Panel av-panel
Panel av-panel + av-border
Panel av-panel + av-border + av-round
Allgemeine Hinweise und Hervorhebungen av-note
Allgemeine Hinweise und Hervorhebungen av-panel + av-note
Info - Hinweise und Hervorhebungen av-info
Info - Hinweise und Hervorhebungen av-panel + av-info
Warnungen und wichtige Hervorhebungen av-warning
Warnungen und wichtige Hervorhebungen av-panel + av-warning

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Code-Beispiel:
<pre><code>Code Example</code></pre>

Padding Abstände

<div class="av-container">...</div>

<div class="av-container av-p05">...</div>

<div class="av-container av-p10">...</div>

<div class="av-container"><p>...</p></div>


av-container + h3

Dialoge - Dialog Messages, Alerts

×

Erfolgreich! - Aktion war erfolgreich.

×

Warnung!

×

Fehler!

Einfache Dialog Messages

Code-Beispiel:
<div class="av-message av-boxshadow-2" id="message-01a"><div class="av-container av-message-success"><span onclick="document.getElementById('message-01a').style.display='none'"class="av-btn-close">&times;</span><h3>Erfolgreich! - Aktion war erfolgreich.</h3></div></div>
×

Erfolgreich! - Aktion war erfolgreich.

Die Aktion war erfolgreich.

×

Warnung!

Eine Warnung oder eine Sicherheitsabfrage muss bestätigt werden.

×

Fehler!

Ein Fehler ist vorhanden.

Artikel - Articles

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Einfache Liste:
  • Listen Punkt
  • Listen Punkt
  • Listen Punkt

Nummerrierte Liste:
  1. Listen Punkt
  2. Listen Punkt
  3. Listen Punkt
Image Alternative Text

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Image Alternative Text

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com


Image Alternative Text

Article Modal 01

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

×

Warnung!

Eine Warnung oder eine Sicherheitsabfrage muss bestätigt werden.

Image Alternative Text

Article Modal 02

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

×
Image Alternative Text

Article Modal 02

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com


Image Alternative Text

Article Hide 01

Image Alternative Text ×

Article Hide 01

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Image Alternative Text

Article Hide 02

Image Alternative Text ×

Article Hide 02

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Image Alternative Text ×

Article Toggle 03

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Image Alternative Text ×

Article Toggle 04

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Image Alternative Text
Image Alternative Text ×

Article Toggle 05

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Image Alternative Text
Image Alternative Text ×

Article Toggle 06

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung. www.anuvito.com

Listen - Lists

Article Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug.

Normale HTML-Liste:
  • Listen Punkt
  • Listen Punkt
  • Listen Punkt

Einfache Liste ohne Auflistungspunkte und Abstand:
 
  • Listen Punkt
  • Listen Punkt
  • Listen Punkt
<ul class="av-list">
 <li>Listen Punkt</li>
 <li>Listen Punkt</li>
 <li>Listen Punkt</li>
</ul>

Listen mit Links

  
<ul class="av-list av-list-links av-list-style-01 av-boxshadow-4">
 <li><a href="#">Listen Punkt</a></li>
 <li><a href="#">Listen Punkt</a></li>
 <li class="selected"><a href="#">Listen Punkt</a></li>
 <li class="disabled"><span>Listen Punkt</span></li>
 <li><a href="#">Listen Punkt</a></li>
</ul>
 
  
<ul class="av-list av-list-links av-list-style-02 av-boxshadow-4">
 <li><a href="#">Listen Punkt</a></li>
 <li><a href="#">Listen Punkt</a></li>
 <li class="selected"><a href="#">Listen Punkt</a></li>
 <li class="disabled"><span>Listen Punkt</span></li>
 <li><a href="#">Listen Punkt</a></li>
</ul>

Listen mit Bilder und mehr ...

  • × Image Alternative Text Item-Name
    Subline
  • × Image Alternative Text Item-Name
    Subline
  • × Image Alternative Text Item-Name
    Subline

Tabellen - Tables

Einfache Tabellen

Die av-table Klasse kann alle Arten von Tabellen manipulieren.

Tabellen-Beispiel:
HeadlineHeadlineHeadline
ContentContentContent
ContentContentContent
ContentContentContent

Boxen, Cards und Widgets

Box-Schatten mit av-boxshadow

<div class="av-container av-boxshadow-2"><p>...</p></div>


av-box

av-boxshadow-2

av-box

av-boxshadow-4

av-box

av-boxshadow-8


av-container av-boxshadow-4 + h3


Headline

Anuvito® ist Ihr Online Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.


Boxen, Cards und Widgest

2-Spalten

Headline

av-box

Headline

av-box

2-Spalten

Headline

av-container av-box av-boxshadow-2

Headline

av-container av-box av-boxshadow-2

3-Spalten

Headline

av-container av-box av-boxshadow-2

Headline

av-container av-box av-boxshadow-2

Headline

av-container av-box av-boxshadow-2

Box mit Bilder

2-Spalten

Headline

Image Alternative Text

Subline Text

Headline

Image Alternative Text

Subline Text

2-Spalten

Headline

Image Alternative Text
Subline Text

Headline

Image Alternative Text
Subline Text

Box Beispiele

Code-Beispiel:

<div class="av-row av-box-count-02">
 <div class="av-box av-boxshadow-4">
<h3 class="av-container av-p05 av-color-01">Headline</h3>
<img src="img/example.jpg" alt="Image Alternative Text" class="av-block">
<div class="av-container av-p05 av-color-01">Subline Text</div>
</div>
<div class="av-box av-boxshadow-4">
<h3 class="av-container av-p05">Headline</h3>
<img src="img/example.jpg" alt="Image Alternative Text" class="av-block">
<div class="av-container av-p05">Subline Text</div>
</div>
</div>

Responsive Grid

Class Extra small devices
Phones (<768px)		 Small devices
Tablets (≥768px)		 Medium devices
Desktops (≥992px)		 Large devices
Desktops (≥1200px)
.av-show-xs
Visible
Hidden
Hidden
Hidden
.av-show-sm
Visible
Visible
Hidden
Hidden
.av-show-md
Visible
Visible
Visible
Hidden
.av-hide-xs
Hidden
Visible
Visible
Visible
.av-hide-sm
Hidden
Hidden
Visible
Visible
.av-hide-md
Hidden
Hidden
Hidden
Visible
.av-hide
Hidden
Hidden
Hidden
Hidden

Testcase / Demo

Green checkmarks indicate the element is visible in your current viewport.

Extra small ✔ Visible on x-small
Small ✔ Visible on small
Medium ✔ Visible on medium
Large* ✔ Visible on large
Show and hide elements on different devices. 
<span class="av-hide-xs">Hidden on x-small devices</span><span class="av-hide-sm">Hidden on small devices</span><span class="av-hide-md">Hidden on medium devices</span><span class="av-hide">Hidden</span><span class="av-hide-print">Hidden on print devices</span><span class="av-show-xs">Visible on x-small devices</span><span class="av-show-sm">Visible on small devices</span><span class="av-show-md">Visible on medium devices</span><span>Visible</span>

Responsive Layout - Grid

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

1/1

1/4

1/4

1/2

1/4

1/2

1/4

50px

rest

1/4

rest

100px

45px

rest


Buttons

Einzelne Buttons

LinkLinkLinkLink
Spezial-Buttonmit kleinen Infos

Button-Gruppe

LinkLinkSpan disabled

Text nach den Buttons

Button Beispiel

Links, Buttons und Input-Type Submit Elemente

Code-Beispiel:
<div class="av-btn-group"><a class="av-btn" href="#">Link</a><a class="av-btn" href="#">Link</a><a class="av-btn av-disabled" href="#">Link disabled</a></div><div class="av-btn-group"><button class="av-btn">Button</button><button class="av-btn">Button</button><button class="av-btn" disabled="disabled">Button disabled</button></div><div class="av-btn-group"><input type="submit" class="av-btn" value="Input" /><input type="submit" class="av-btn" value="Input" /><input type="submit" class="av-btn" value="Input disabled" disabled="disabled" /></div>

Bilder - Images

Die Darstellung von Bildern mit Anuvito CSS:

Image Alternative Text
Image Alternative Text
Image Alternative Text

Image Alternative Text
Subline
Image Alternative Text
Subline
Image Alternative Text
Subline

Modal-Dialoge

Click on the image to display it in full size:

Image Alternative Text
Image Alternative Text
Image Alternative Text
×
Image Alternative Text

×

Warnung!

Eine Warnung oder eine Sicherheitsabfrage muss bestätigt werden.

Slideshow

Bottomleft
Bottomright
Topleft
Topright
Middle
❮❯

Toggles und Accordions

Toggle 1

Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle ContentToggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle ContentToggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content

Toggle 2

Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle ContentToggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle ContentToggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content Toggle Content




London

London is the capital city of England.

Unsere Leistungen

Die Anuvito Web- und Software-Entwicklung umfasst die Erstellung und Pflege einfacher statischer Websites bis zu dynamischen, komplexen und Web-basierten Internet-Anwendungen.

anuvito

Anuvito Marketing Service

Anuvito® ist Ihr Marketing Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing-Konzept, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.

Anuvito Marketing Service

Anuvito® ist Ihr Marketing Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing-Konzept, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.

anuvito
anuvito

Anuvito Marketing Service

Anuvito® ist Ihr Marketing Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing-Konzept, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.

Anuvito Marketing Service

Anuvito® ist Ihr Marketing Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing-Konzept, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.

anuvito

Anuvito Marketing Service

Anuvito® ist Ihr Marketing Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing-Konzept, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.

 

Anuvito® ist Ihr Marketing Service und Spezialist für die Gestaltung, Entwicklung, Umsetzung und Optimierung von Websites mit vielen Jahren Erfahrung, Fachwissen und Praxisbezug. Von der kreativen Ideenfindung, der optimalen Präsentation mit Gestaltungsrichtlinien bis zum Marketing-Konzept, unterstützt Anuvito Ihre individuellen Projekte mit persönlicher Beratung.