knallimall.org knallimall.org

User Tools

Site Tools

foundation_overview

This is an old revision of the document!

Table of Contents

View as presentation
→ Slide 1

Foundation - Übersicht

Im Allgemeinen schenken sich die Frameworks nicht mehr viel. Gerade mit Version 4 holt Bootstrap auf. Foundation ist aber immer einen Tick aktueller und bietet ein paar Funktionen mehr als Bootstrap.

↓ Slide 2

Todo

  • Grid - wie funktionierts, welche Grids gibts
  • Mixins … Was ist nett? Was macht es dem Entwickler leichter?
  • Allgemein die “Inneren Werte” prüfen
  • Docs Resourcen
  • Nette Tools die mit Foundation ausgeliefert werden
↓ Slide 3

F6 vs. Bootstrap 4

Foundation Bootstrap
Responsive Media ✔ ✘
RTL support ootb ✔ ✘
Tour ✔ ✘
Badges/Labels ✔ ✘
Icons Foundation Icons ✘
SCSS Support ✔ ✔
Animation MotionUI keine
↓ Slide 4

Installation

Es gibt 3 Möglichkeiten Foundation zu installieren:

  1. Download von der Foundation Website (custom Download möglich)
  2. Taskrunner (GruntJS oder Gulp)
  3. NPM (NodeJS Package Manager)

Allgemein:

  • Verwendung mit GruntJS bietet höhere Flexibilität, aber auch höheren Aufwand bei der Einrichtung.
  • Der (Custom) Download ist gut für schnelles Prototyping, aber nicht so flexibel einsetzbar
↓ Slide 5

Setup

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
 
    <!-- STYLES EINBINDEN -->    
    <link rel="stylesheet" href="css/foundation.css" />
 
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- JAVASCRIPT EINBINDEN -->
 
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
 
    <!-- FOUNDATION "EINSCHALTEN" -->
    <script>
      $(document).foundation();
    </script>
 
  </body>
</html>
↓ Slide 6

So würd ichs machen ...

  • GruntJS Starter Package - Foundation 6 herunterladen und entpacken
  • Den entpackten Ordner in gewünschten Zielordner schieben.
  • NPM und Bower Packages installieren: sudo npm install && bower install
  • Pfade in Gruntfile.js für aktuelles Projekt anpassen.
↓ Slide 7

In der Praxis ...

… wollte ich folgendes zeigen:

  1. HTML Datei entsprechend aufbauen & settings.scss einbinden
  2. Livereload aktivieren
  3. MotionUI einbinden
  4. Komponenten verwenden:
    1. Sichtbarkeit: Visibility Classes
    2. Grid
    3. Interchange: Responsive Image etc.
    4. Lightbox (Reveal) - mit und ohne Animation (MotionUI)
    5. Abide
    6. Range Slider
↓ Slide 8

Docs und Support

  1. Dokumentation: http://foundation.zurb.com/sites/docs/
  2. Forum: http://foundation.zurb.com/forum
  3. Slack Chat: http://foundation5.slack.com
  4. IRC: #zurb-foundation (wenig bis keine Aktivität)
  5. GitHub: https://github.com/zurb/foundation-sites/issues
foundation_overview.1509611309.txt.gz · Last modified: 2017/11/02 09:28 by admin

Page Tools