Differences

This shows you the differences between two versions of the page.

--- foundation_overview [2016/06/02 08:57] – created admin
+++ foundation_overview [2017/11/02 09:28] – admin
@@ Line 1: / Line 1: @@
-====== Foundation - eine Übersicht ======
+~~REVEAL blood~~
+====== 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.
+===== 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
+===== F6 vs. Bootstrap 4 =====
+^ ^ Foundation ^ Bootstrap ^
+| Responsive Media | ✔ | ✘ |
+| RTL support ootb | ✔ | ✘ |
+| Tour | ✔ | ✘ |
+| Badges/Labels | ✔ | ✘ |
+| Icons | Foundation Icons | ✘ |
+| SCSS Support | ✔ | ✔ |
+| Animation | MotionUI | keine |
+===== Installation =====
+**Es gibt 3 Möglichkeiten Foundation zu installieren:**
+  - Download von der Foundation Website (custom Download möglich)
+  - Taskrunner (GruntJS oder Gulp)
+  - 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
+===== Setup =====
+<code html>
+<!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>
+</code>
+===== So würd ichs machen ... =====
+  * {{:gruntjs_starter_foundation_6.2_latest.zip|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.
+===== In der Praxis ... =====
+... wollte ich folgendes zeigen:
+  - HTML Datei entsprechend aufbauen & settings.scss einbinden
+  - Livereload aktivieren
+  - MotionUI einbinden
+  - Komponenten verwenden:
+    - Sichtbarkeit: Visibility Classes
+    - Grid
+    - Interchange: Responsive Image etc.
+    - Lightbox (Reveal) - mit und ohne Animation (MotionUI)
+    - Abide
+    - Range Slider
+===== Docs und Support =====
+    - Dokumentation: http://foundation.zurb.com/sites/docs/
+    - Forum: http://foundation.zurb.com/forum
+    - Slack Chat: http://foundation5.slack.com
+    - IRC: #zurb-foundation (wenig bis keine Aktivität)
+    - GitHub: https://github.com/zurb/foundation-sites/issues

Differences

Page Tools