Anzeige
Anzeige
Artikel merken

Tools für Webworker

2 Min. Lesezeit
Anzeige
Anzeige

Für zarte Hände und mobile Geräte: Touch-Slider Swiper

Anzeige
Anzeige

Wischen mit Stil: Swiper (http://www.idangero.us/swiper/) ist der wohl beste Touch-Slider für mobile Geräte. Hardware-Beschleunigung, Lazy-Loading für Bilder und Flexbox-Support sind nur einige wenige Features des kostenlosen JavaScript-Sliders, der Web-Applikationen das gewisse Etwas verleiht. Obwohl für iOS konzipiert, läuft Swiper auch äußerst geschmeidig auf Android- und Windows-Geräten sowie außerdem allen modernen Desktop-Browsern. Swiper ist zwar eine Komponente des Framework7-Frameworks, kann aber dennoch auch unabhängig von dem Framework eingesetzt werden.

MUI: Das Framework für Googles Material Design

Anzeige
Anzeige

Material-Design-Fans aufgepasst: Das HTML-, CSS- und JS-Framework MUI (https://www.muicss.com) folgt Googles Richtlinien, um schnell und einfach das „Material Design“ zu implementieren. Das Framework wurde grundlegend auf Performance optimiert, um eine konsistente und rasche Entwicklung zu gewährleisten. Dabei ist es egal, ob MUI für E-Mail-Templates, Web-Applikationen oder für hybride Apps eingesetzt werden soll. Es werden keine weiteren Abhängigkeiten benötigt, was das Framework noch sympathischer macht. Zudem ist es mit einer Dateigröße von lediglich vier Kilobyte äußerst schlank.

Anzeige
Anzeige
Der Maßstab für Frontend-Entwickler: CSS Ruler

Bei den etlichen Größenangaben in CSS kann man schon mal richtig ins Schwitzen kommen. Wer deshalb schon immer mal CSS-Größenangaben visualisieren wollte, um eine bessere Übersicht zu erhalten, der findet jetzt bei CSS Ruler Abhilfe: Neben Pixeln, EMs und REMs werden noch weitere Größenangaben von CSS unterstützt. Diese können entweder vom Viewport beziehungsweise der Schriftgröße oder von einer absoluten Größe abhängig sein. CSS Ruler (http://katydecorah.com/css-ruler/) zeigt anschaulich alle Variationen in einer interaktiven Testumgebung. 15 Maßeinheiten mit drei Parametern auf einem Blick – das Tool lässt keine Frage unbeantwortet, denn: Bilder sagen mehr als tausend Worte.

Anzeige
Anzeige
Raus damit! Slideout.js als Menü für mobile Geräte

Die geringe Größe von mobilen Geräten zwingt Entwickler zu kreativen Lösungsansätzen, wie beispielsweise zum mittlerweile sehr populären und weit verbreiteten Off-Canvas-Pattern. Das Dependency-freie Skript Slideout.js (https://mango.github.io/slideout/) besticht durch simples Markup und einfache Konfigurationsmöglichkeiten. Mit einer Größe von lediglich vier Kilobyte präsentiert sich das Out-Of-The-Box-Menü inklusive CSS-Transformations und -Transitions. Das Off-Canvas-Menü lässt keine Wünsche offen und ist mit gerade mal zwei ID-Selektoren leicht zu implementieren: Minimalismus und Funktionalität für den optimierenden Entwickler, der das Beste aus seiner mobilen Applikation herausholen will.

RIN: Ein schlankes SASS-Boilerplate aus Japan

Anzeige
Anzeige

Das für Gulp optimierte Boilerplate, welches bereits in der dritten Version veröffentlicht wurde, unterstützt Frontend-Designer durch SCSS-Support, automatischem Browser-Reloading, einem einfachen Grid-System, Retina-Support und einem mitgelieferten BrowserSync-Server. Ergänzt wird das minimalistische Framework durch automatische Optimierung von Gif-, JPG-, PNG-, und SVG-Dateien. Somit ist RIN (https://github.com/sanographix/rin) alles andere als ein überladenes Framework wie Twitters Bootstrap oder Zurbs Foundation.

ai2html: Skript für Illustrator wandelt Vektor-Dateien in HTML um

Nützliches Tool für Illustrator: Mit ai2html (http://ai2html.org/) können Frontend-Entwickler Vektor-Dateien mit einem einfachen Skript in HTML- und CSS-Dateien umwandeln. Dabei werden Texte nicht als SVG gerendert, sondern bleiben als editierbare Zeichen erhalten. Neben sehr vielen Konfigurationsmöglichkeiten wie zum Beispiel Bild-Formate und Qualität, Retina-Auflösungen und PNG-Transparenz ist das Skript eine wertvolle Erweiterung für Illustrator-Nutzer und Entwickler. Obwohl der ausgegebene Code nicht mit dem eines Entwicklers vergleichbar ist, sind die gelieferten Ergebnisse durchaus brauchbar.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige