Links - PageSpeedPlus/Web-Development GitHub Wiki

Frameworks

Bootstrap

Bulma - CSS3 Flexbox Framework

UIkit

A curated list of awesome UIkit tools and resources.

Tests

Tools

Starter Kits

Resources

Tutorials and screencasts

Framework integration

  • Vuikit - Vue.js components built with UIkit

CMS

  • Pagekit - Open source PHP CMS. Backend uses UIkit. Most of the available frontend themes also use UIkit
  • ProcessWire - Open source PHP CMS. Backend uses UIkit.

Templates

  • UIkit E-commerce Template - Responsive e-commerce template containing catalog, filters, product page, shopping cart and other elements of the online store

Commercial themes

  • YOOtheme Pro - Wordpress and Joomla themes built with UIkit
  • Themeforest - Various themes tagged "uikit" on themeforest

Komponenten

Website Suche

Introduction to CSS Animations

hint.css – gestylte Tooltips nur mit CSS

Reframe.js

Reframe.js macht nicht responsive Elemente responsiv. Erdacht für die Verwendung mit iFrames und Videos, belastet das lediglich 1,3 KB große JavaScript-Plugin die Ladezeit deiner Website nur unmerklich.

Wait! Animate

Dieses kleine Tool brauchst du nur, wenn du Einfluss auf den Ablauf der von dir erstellten Animationen dergestalt nehmen willst, dass sie benutzerdefinierten Pausen enthalten sollen. Ohne das Werkzeug sind Animationspausen auf den intialen Start der Animation beschränkt. Mit Wait! Animate erstellst du Verzögerungen an beliebiger Stelle.

Dokus, Guides & Ressourcen

Überblick über wirklich hilfreiche und wichtige Links fehlt. Insbesondere der Umgang mit CSS3 und HTML5 erfordert das ständige Nachschlagen nach Browsersunterstützung und der Suche nach passenden Alternativen.

White Paper

Checklisten

Wiki

  • CSS3-Files.com
  • HTML5Doctor: in meinen Augen die beste Seite mit Basisinformationen zu HTML5. Mit umfassenden Artikeln und einem hilfreichen Element-Index.
  • HTML5: Edition for Web Authors: Wer tatsächlich die Specs lesen möchte sollte diese Version nehmen. Darin sind nur die für uns Entwickler wichtigen Infos notiert, nicht die Hinweise für Browserhersteller.
  • WebKit CSS extensions: Übersicht über alle (?) Webkit-spezifischen CSS-Eigenschaften mit verlinkter Infoseite.
  • Mozilla CSS Erweiterungen: Referenz aller mozilla-spezifischen CSS-Eigenschaften mit Erklärung derselben.

Infoseiten

  • When Can I use …: Eine der wichtigsten Übersichtsseiten über die Unterstützung moderner Techniken in den diversen Versionen der Browser.
  • HTML5 Please: eine der wichtigsten Seiten zu HTML5 und – entgegen der Namensgebung – CSS3. Sie gibt Infos über alle Techniken, ob deren Einsatz empfehlenswert ist (meist basierend auf der Browserunterstützung) und informiert über eventuelle Polyfills.
  • HTML5Doctor: in meinen Augen die beste Seite mit Basisinformationen zu HTML5. Mit umfassenden Artikeln und einem hilfreichen Element-Index.
  • HTML5 rocks: Extrem umfangreiches Angebot rund um HTML5 von Google.
  • Web Standards Curriculum: Ursprünglich von Opera erstellte Sammlung von Tutorials zu Fragen der Frontenentwicklung. Zur besseren inhaltlichen Pflege wurden die Texte zwischenzeitlich dem W3C übergeben.

Demoseiten

Blogs

  • CSS-Tricks: Immer interessantes, englischsprachiges Blog, das sich vor allem mit CSS beschäftigt.
  • Smashingmagazine: Immer interessantes, englischsprachiges Blog aus Freiburg, das sich um alle Aspekte moderner Webentwicklung kümmert.
  • Chris Heilmann: Chris Heilmann glänzt in seinem Blog mit unterhaltsamen, inspirierenden und teilweise lehrreichen Vorträgen. Doch man sollte auch seine immer wieder eingestreuten nachdenklichen Artikel nicht übersehen. Gerade diese finde ich lesenswert.

Tools

Use these tools to help make your work accessible. More Info

HTML, CSS, JS

  • CSS-Selectors: Diverse Selektoren an einem beispielhaften HTML-Konstrukt austesten.
  • CSS3.Mikeplate.com: CSS3-Eigenschaften direkt im Browser manipulieren, den Effekt sehen und den dazugehörigen Quellcode kopieren.
  • Colorzilla Gradient Editor: Wie in einem Bildbearbeitungsprogramm einen Verlauf erstellen und den CSS3-Code erzeugen lassen. Dieses Tool gibt auch die vor Kurzem geänderte offizielle Verlaufssyntax aus. Man kann sich neben der passenden IE-Filter auch ein SVG für den IE9 erstellen lassen.
  • i2Style: Dieses Tool greift einem visuell bei der Erstellung von Buttons unter die Arme.
  • Westciv Animations-Tool: Animationen visuell erstellen, natürlich mit Codeausgabe.
  • DataURI-Konverter: aus Bildern Inline-Bilder mittels data-uri erstellen. Funktioniert leider nicht unterhalb des IE8.
  • RGAB/ARGB-Konverter: Das Tool konvertiert rgba-Werte in einen Hex-Wert, den man dann in einen IE-Filter einsetzen kann.

Farbschema

Artikel

Typographie & Fonts

Referenzen