foundation_overview
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| foundation_overview [2016/06/02 08:30] – [Setup] admin | foundation_overview [2021/12/06 21: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/ | ||
| - | | 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, | ||
| - | * Der (Custom) Download ist gut für schnelles Prototyping, | ||
| - | |||
| - | |||
| - | ===== Setup ===== | ||
| - | |||
| - | <code html> | ||
| - | < | ||
| - | <html class=" | ||
| - | < | ||
| - | <meta charset=" | ||
| - | <meta http-equiv=" | ||
| - | <meta name=" | ||
| - | < | ||
| - | |||
| - | <!-- STYLES EINBINDEN --> | ||
| - | <link rel=" | ||
| - | |||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <!-- JAVASCRIPT EINBINDEN --> | ||
| - | |||
| - | <script src=" | ||
| - | <script src=" | ||
| - | <script src=" | ||
| - | |||
| - | <!-- FOUNDATION " | ||
| - | < | ||
| - | $(document).foundation(); | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | ===== So würd ichs machen ... ===== | ||
| - | |||
| - | * {{: | ||
| - | * Den entpackten Ordner in gewünschten Zielordner schieben. | ||
| - | * NPM und Bower Packages installieren: | ||
| - | * 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 | ||
foundation_overview.1464856248.txt.gz · Last modified: by admin