Differences

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

--- foundation_overview [2016/06/02 10:30] – [Setup] admin
+++ foundation_overview [2021/12/06 22:52] (current) – removed admin
@@ Line 1: / Line 1: @@
-~~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.
-===== 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
-  - Livereload aktivieren
-  - MotionUI einbinden
-  - Komponenten verwenden:
-    - Grid verwenden
-    - Lightbox (Reveal) - mit und ohne Animation (MotionUI)
-    - Generierte Icons verwenden

Differences

Page Tools