Mixare i framework dell'interfaccia utente Zurb Foundation con Twitter Bootstrap

Question

È possibile combinare diversi framework UI?

Dire, in modo che sia possibile utilizzare sia bootstrap e zurb foundation nello stesso progetto?

Se sì, ci sono esempi di siti dove è stato fatto?

Answer 1

La risposta è, dipende. La Foundation 4 consente di utilizzare le classi di presentazione .large-12 .columns o sass mixin. È inoltre possibile definire nello _settings.scss le classi di presentazione specifiche da generare. Se si utilizzano i mixin direttamente, non è necessario generare alcuna classe di presentazione.

Bootstrap d'altra parte utilizza Meno. È una tecnologia simile ma non è compatibile con Sass/Scss. So che Bootstrap 3 ha anche una funzionalità simile con Less Mixins. Ciò significa che dovrai creare una sorta di script/file di build per rintracciare entrambi i file css o includere entrambi i file generati nelle tue pagine.

Quindi c'è il codice JavaScript. Zurb Foundation utilizza Zepto (o prova a) per impostazione predefinita. È questionable se Bootstrap 3 è compatibile o meno ma a questo punto è un po 'di lavoro per farlo funzionare. Dovresti forzare la pagina a usare jQuery.

Una volta fatto, forse Foundation e Bootstrap potrebbero giocare bene o è possibile che non funzionino affatto. Dovresti selezionare ogni file javascript individualmente. Zurb Foundation fornisce questo automaticamente ed è molto granulare. Bootstrap 3 non lo fa per impostazione predefinita e dovrai includere i file javavascript direttamente dalla directory /js e rimuovere il riferimento al file bootstrap.js.

Una volta che tutto ciò è stato detto, potresti considerare il motivo per cui vuoi mescolare i due quadri. È un elemento in uno e non nell'altro? È il design o lo stile? Vorrei prendere in considerazione la scelta del framework che fa la maggior parte di ciò che si vuole fare out of the box. Quindi formattalo in Sass o Less o usa i plugin jQuery che ti danno una funzionalità simile.

Nella mia esperienza Zurb Foundation è molto più indipendente dal design. Ciò significa che offre un'esperienza migliore se hai un design o sei un designer che ti permette di implementare esattamente ciò che vuoi fare. Bootstrap sembra molto più progettato fuori dalla scatola, ma può essere più difficile ignorare tutti gli stili predefiniti. Il vantaggio qui è che non è necessario dedicare molto tempo al design inizialmente, sembra fantastico.

Entrambe le strutture sono fantastiche e forniscono molte delle funzionalità necessarie per un moderno sito Web o app. Entrambi sono pienamente reattivi e consentono entrambi un approccio Mobile First. Se ne impari uno è molto facile usare l'altro, è solo una questione di sintassi.

Non so di siti che implementano una fusione dei due framework. Presumo che questo sia a causa di alcuni dei problemi che ho descritto sopra.

Answer 2

Sono d'accordo con manofstone. Ma in questo momento sto usando sia Foundation che Bootstrap per il mio progetto. Naturalmente sappiamo tutti che la Fondazione si basa su SCSS e Bootstrap su LESS. Per risolvere alcuni problemi, è sufficiente utilizzare Bootstrap basato su SCSS.Ecco i link dove è possibile scaricarlo:

Thomas McDonald 's Sass/Bootstrap

Alademann' s Sass/Bootstrap

E 'a voi che lavorate hai intenzione di usare. Leggi le loro documentazioni. Per quanto riguarda me, sto usando il lavoro di McDonald's. Uso Foundation per il mio framework responsive principale e utilizzo solo gli effetti di Bootstrap (JS). Uso anche alcune delle funzionalità di Kube. Kube è un altro framework CSS. Ecco come ho cose di configurazione all'interno del mio tag HEAD:

<link rel="stylesheet" type="text/css" href="css/foundation/normalize.css" /> 
<link rel="stylesheet" type="text/css" href="css/kube/kube.css" /> 
<link rel="stylesheet" type="text/css" href="css/kube/master.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap/responsive.css" /> 
<link rel="stylesheet" type="text/css" href="css/foundation/foundation.css" /> 
<link rel="stylesheet" type="text/css" href="css/Index.css" /> 
<script src="js/vendor/custom.modernizr.js"></script> 

E Ecco un esempio in cui ho usato Fondazione e Bootstrap:

<div class="row"> 
<div class="large-12 columns"> 
<div class="large-10 columns" id="slideshow"> 
    <div class="carousel slide auto" id="picz" > 
    <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#picz" data-slide-to="0" class="active"></li> 
      <li data-target="#picz" data-slide-to="1"></li> 
      <li data-target="#picz" data-slide-to="2"></li> 
     </ol> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner">... 

Questi sono i codici effettivi del mio progetto, quindi non posterò tutto . Spero che aiuti un po '.