This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
foundation_overview [2016/06/02 07:43] – admin | foundation_overview [2016/06/02 13:43] – [In der Praxis ...] admin | ||
---|---|---|---|
Line 6: | Line 6: | ||
Foundation ist aber immer einen Tick aktueller und bietet ein paar Funktionen mehr als Bootstrap. | Foundation ist aber immer einen Tick aktueller und bietet ein paar Funktionen mehr als Bootstrap. | ||
- | ===== F6 vs. Bootstrap ===== | + | ===== F6 vs. Bootstrap |
^ ^ Foundation ^ Bootstrap ^ | ^ ^ Foundation ^ Bootstrap ^ | ||
Line 16: | Line 16: | ||
| SCSS Support | ✔ | ✔ | | | SCSS Support | ✔ | ✔ | | ||
| Animation | MotionUI | keine | | | Animation | MotionUI | keine | | ||
+ | |||
===== Installation ===== | ===== Installation ===== | ||
- | Es gibt 3 Möglichkeiten Foundation zu installieren: | + | **Es gibt 3 Möglichkeiten Foundation zu installieren: |
- Download von der Foundation Website (custom Download möglich) | - Download von der Foundation Website (custom Download möglich) | ||
Line 26: | Line 28: | ||
- NPM (NodeJS Package Manager) | - 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 & settings.scss einbinden | ||
+ | - Livereload aktivieren | ||
+ | - MotionUI einbinden | ||
+ | - Komponenten verwenden: | ||
+ | - Sichtbarkeit: | ||
+ | - Grid | ||
+ | - Interchange: | ||
+ | - Lightbox (Reveal) - mit und ohne Animation (MotionUI) | ||
+ | - Abide | ||
+ | - Range Slider | ||
+ | |||
+ | ===== Docs und Support ===== | ||
+ | - Dokumentation: | ||
+ | - Forum: http:// | ||
+ | - Slack Chat: http:// | ||
+ | - IRC: # | ||
+ | - GitHub: https:// | ||