• Bootstrap, Foundation, UIkit und Semantic UI: 4 Open-Source CSS-Frameworks im Überblick

    Beim Entwickeln einer Webseite verwendet man immer wieder typische Gestaltungselemente wie zum Beispiel Buttons, Formular-Elemente, Navigations-, Dropdown- und Breadcrumbs-Menüs, Tabs, Slider oder ein Raster-System. Damit man solche Gestaltungselemente nicht jedes Mal von Grund auf neu schreiben muss, gib es mittlerweile zahlreiche CSS-Frontend-Frameworks, die Webentwicklern ein Grundgerüst zur Verfügung stellen, und damit eine Menge Arbeit abnehmen.

    In diesem Artikel stelle ich die 4 größten Open-Source CSS-Frameworks vor. Sie sind alle funktionsreich, lassen sich beliebig anpassen und erweitern, und verfügen über zahlreiche Gestaltungselemente.

    Außerdem sind sie alle in einer erweiternden Stylesheet-Sprache wie Sass, Less oder Stylus geschrieben (auch als CSS-Präprozessoren bekannt), stehen aber auch direkt als minifizierte CSS-Dateien zur Verfügung. Der Quellcode steht bei allen Projekten unter der MIT-Lizenz, und kann von GitHub bezogen werden. [Weiterlesen…]

  • Stylus – die Stylesheet-Sprache für Node.js

    stylusWenn man das Design einer Website umsetzt, verwendet man dafür meist die Stylesheet-Sprache CSS. Dies macht auch Sinn, da alle zeitgemäßen Webbrowser CSS unterstützen.

    Wenn das Design einer Website jedoch komplex wird, kann es schwierig werden, den Überblick zu behalten. Das folgende Beispiel sollte dies verdeutlichen:

    #header { background-color: #09f; }
    h1, h2 { color: #09f; }

    [Weiterlesen…]

  • Tutorial: Einfacher Chat mit Node.js und WebSocket

    nodejs-chatIn diesem Node.js-Tutorial entwickle ich eine einfache Webanwendung, in der die Benutzer chatten können. Zum Einsatz kommen dabei Node.js, Soket.IO und jQuery. Als Ergebnis sollen die Benutzer einen Namen wählen, Nachrichten eingeben und absenden, und der Server soll diese mittels einer WebSocket-Verbindung an alle (anderen) Nutzer verteilen können.

    Ich werde in folgendem die komplette Anwendung entwickeln, also sowohl den Server als auch den Client, der wiederum aus HTML, JavaScript und CSS besteht. Es geht hierbei in erster Linie um das Verständnis der Funktionsweise und des Entwicklungsprozesses, die Anwendung wird deswegen bewusst einfach und überschaubar gehalten. [Weiterlesen…]