Anzeixer vereinfacht Ansichtsdefinitionen für Responsive Design. Es handelt sich um ein Toolkit von CSS and JavaScript snippets aus der Zeix-Werkstatt. Damit definierst Du die Grenzwerte für Ansichten nur einmal. So sparst Du Zeit und vermeidest Fehler.

Da für Responsive Design die Zusammenarbeit von CSS und JavaScript nötig ist, müssen oft Werte mehrfach definiert werden, so dass der Code mühsam zu warten ist. Deshalb nutzen wir ein bewährtes Set von CSS- und JavaScript-Snippets. Dieses haben wir unter dem Namen «Anzeixer» für die Entwickler-Community freigegeben.

Demo

Auf Github aufrufen

Was macht Anzeixer?

Define Views in CSS with @media Rules

Define views that use media queries to apply CSS rules at specific breakpoints and give the views descriptive names. In addition to distinct views for smartphones, tablets and computers, you can also create views for portrait and landscape orientations and for various pixel densities.

Show the Current View During Development

During development, you need to know that the correct CSS rules are being applied and that the correct JavaScript is being run. Add the dev class to the <body> tag to enable an indicator at the bottom left corner which displays the name of the current view.

Query the Current View with JavaScript

You probably need for certain user interface behavior to change depending on the view. For example, you might replace tabs with an accordion on very narrow screens. By using JavaScript to query the current view from CSS instead of defining the threshold values a second time in JavaScript, you reduce complexity and the likelihood of errors.

Improve Performance with Unified View Change Events

On pages with a lot of JavaScript, having each script listen for the browser’s resize events individually can impose a significant performance penalty. Many scripts don’t need to know the specific viewport size, only which view is in use. Anzeixer can help by triggering a viewchange event only when a breakpoint threshold is crossed, letting your scripts ignore resize events they don’t need.