I framework Web come Bootstrap o HTML5 boilerplate offrono qualcosa a un designer (non a uno sviluppatore)?

Nota, si tratta di progettare molto più che di sviluppo.

Realizzo siti da zero con CSS e HTML completamente scritti a mano.

Conosco da tempo modelli di CSS pre-build come Bootstrap o HTML5 Boilerplate . Li ho guardati un po 'in passato, ma non mi sono mai buttato a usarli per niente. Non ho problemi a reimpostare CSS, o includere javascript quando necessario, o la configurazione per i viewport.

Questa sera ho codificato una pagina HTML5 / CSS di base. Niente di veramente sconvolgente in termini di layout. Semplicemente un punto di partenza. Successivamente ho deciso di dare a Bootstrap un vortice con lo stesso layout. È una 960 px piuttosto standard, a 3 colonne con pagina di immagini di eroi.

Mentre sto modificando Bootstrap, mi è venuto in mente che l'80% o più del mio tempo è stato speso per imparare quale classe o ID è stato applicato a qualcosa, trovando poi che nel CSS si adeguasse. È diventato chiaro che Bootstrap non mi avrebbe salvato affatto. In effetti, Bootstrap aumenterebbe notevolmente i tempi di produzione grazie al CSS * eccessivamente basato su modelli.

* ( per "eccessivamente templated" intendo dire che esiste una grande quantità di CSS che probabilmente non userei per un determinato sito Web. Non che nel complesso non ci siano CSS non necessari. )

Capisco che se avessi familiarità con Bootstrap avrei familiarità con i nomi di classe / ID e la posizione generale nei fogli di stile. Quindi, sono disposto a piegarmi un po 'sul tempo che mi stava impiegando, rendendomi conto che in parte era dovuto alla mia non familiarità.

Tuttavia, non posso fare a meno di chiedermi se Bootstrap et. al. sono semplicemente stampelle che stanno paralizzando i designer con un cucchiaio che alimenta loro il proprio marchio di codice. Bloccando così in una base di consumatori che farà affidamento interamente su una soluzione di terze parti ed è funzionalità per tutto, o almeno per la maggioranza. Mi ricorda quelli che possono progettare un sito web solo se possono usare Dreamweaver. E il paradiso proibisce se non hanno accesso a Dreamweaver ed è necessario un cambiamento.

Quando creo un sito uso il mio set di nomi di classe e ID standard. Strutturo CSS come è intuitivo per me. Ho il mio set di modelli pre-build per un'installazione rapida. Pertanto, qualsiasi sito che costruisco posso modificare abbastanza rapidamente. Usare uno dei pacchetti front-end preconfigurati significa semplicemente che devo imparare le loro convenzioni di denominazione e la loro struttura piuttosto che fare affidamento sul mio.

• Qualcuno può esaltare su di me le grandi virtù di tali sistemi di template come Bootstrap o HTML5 Boilerplate ?
• Cosa li rende preziosi per te?
• Hai semplicemente familiarità con il sistema che usi in modo da poterlo navigare facilmente o devi ancora cercare oggetti?
• Potresti costruire un sito senza di loro se dovessi?

Ho studiato molto i framework nell'ultimo mese o giù di lì. In realtà non mi sono tuffato in nessuna delle soluzioni, ma un paio di alternative quadro che sono nella mia lista sono Foundation , Intuit e YAML e Base .

La cosa positiva di questi è che non hanno l'aspetto 'Bootstrap' e sembrano incoraggiare i designer a fare il loro lavoro (design), mentre si prendono cura della reattività.

Ecco un grande elenco di framework e maggiori informazioni in questo articolo .

Come accennato, ho svolto il lavoro di ricerca sulla legenda, ma non ho iniziato a testarli, quindi qualsiasi commento a sostegno di uno dei quadri sarebbe utile.

I vantaggi tendono ad essere principalmente:

• Prototipazione rapida (ovvero velocità)
• Coerenza tra browser integrata

Se devi creare una griglia e la griglia che devi creare si adatta al framework CSS pre-costruito, allora la logica è che sei a metà strada usando il framework.

Detto questo, tendo ad essere d'accordo con te. I framework CSS, IMHO, sono come modelli di visual design in quanto se soddisfano il 90% del tuo obiettivo, sono fantastici, ma se non lo fanno, stai spendendo molto più tempo e fatica a modificare il valore predefinito anziché semplicemente costruire il tuo da zero.

APPENDICE:

Dovrei aggiungere un ulteriore vantaggio potenziale:

• è un sistema documentato

In un ambiente aziendale, in cui è possibile avere diversi sviluppatori front-end e il progetto può durare diversi anni con diversi team di sviluppatori front-end, avere un framework di livello di presentazione sottostante documentato può aiutare.

Questo non vuol dire che il tuo framework domestico non possa essere documentato, è solo che la documentazione spesso non è una priorità.

Ho familiarità con HTML5 Boilerplate, ma ho più familiarità con Bootstrap, quindi ne parlerò. Ricorda che entrambi sono orientati verso due diverse attività (H5BP è un modello normalizzato reattivo, Bootstrap è una raccolta di widget HTML / CSS / JS e una griglia reattiva.) In effetti possono essere utilizzati insieme .

Tuttavia, non posso fare a meno di chiedermi se Bootstrap et. al. sono semplicemente stampelle che stanno paralizzando i designer con un cucchiaio che alimenta loro il proprio marchio di codice. Bloccando così in una base di consumatori che farà affidamento interamente su una soluzione di terze parti ed è funzionalità per tutto, o almeno per la maggioranza. Mi ricorda quelli che possono progettare un sito web solo se possono usare Dreamweaver. E il paradiso proibisce se non hanno accesso a Dreamweaver ed è necessario un cambiamento.

L'analogia non riesce qui perché hai pieno accesso alla fonte Bootstrap. Se non ti piace come funziona qualcosa, puoi cambiarlo. Per me è l'opposto di una stampella: puoi usare il codice sorgente per imparare le tecniche CSS.

Non sono d'accordo sul fatto che "progettare un sito Web" debba essere così vicino al metallo non più di quanto credo che i programmatori C debbano avere una conoscenza intima del linguaggio assembly. Anche se anche tale analogia non si adatta perché la regolazione di HTML / CSS è semplicemente una questione di estensione dei selettori e aggiunta di ciò di cui hai bisogno.

Qualcuno può esaltare su di me le grandi virtù di tali sistemi di template come Bootstrap o HTML5 Boilerplate?

La caratteristica killer di Bootstrap, per me, è la coerenza e la semplicità di applicazione dei widget e dei componenti Javascript. Vuoi che un link assomigli a un pulsante? Aggiungi una classe '.btn'. Vuoi un tavolo? Aggiungi una classe '.table'. Vuoi un elemento di navigazione? Imposta un elenco non ordinato e aggiungi le classi di navigazione.

I menu a discesa, i popup, gli avvisi, ecc. Possono essere facilmente aggiunti agli elementi con attributi di dati. Bootstrap include un set di icone molto bello che può essere facilmente integrato nei widget.

Cosa li rende preziosi per te?

• Può prototipare rapidamente siti
• Tutto il debug di CSS cross-browser e multipiattaforma è stato fatto per me.
• CSS facilmente personalizzabile con un'ampia selezione di variabili in modo da poter sperimentare e prototipare rapidamente i layout.
• Widget di navigazione standard
• Codice sorgente aperto e gratuito, posso sporcarmi le mani e personalizzare MENO se ho bisogno di un nuovo mixin o cambiare il comportamento nel modo che mi serve.

Hai semplicemente familiarità con il sistema che usi in modo da poterlo navigare facilmente o devi ancora cercare oggetti?

Una delle maggiori funzionalità di Bootstrap è la sua eccellente documentazione . Posso navigare facilmente e i selettori CSS sono intuitivi e facili da ricordare.

Potresti costruire un sito senza di loro se dovessi?

Sì, ma è chiaramente più lavoro. Posso concentrarmi su UX e rapidamente prototipare layout con widget belli e rifiniti e funzionalità coerenti.

La cosa bella dei sistemi e dei framework di template è che possono farti risparmiare un sacco di tempo se lavori nel modo che preferiscono. Quindi, con Bootstrap, una volta imparata la loro semantica per fare una giostra JS, è quasi criminalmente semplice da implementare. Inoltre, Bootstrap sembra diventare molto più semplice se esegui il rollup del tuo prima di iniziare o usi qualcosa come bootstrap-sass in Rails per cambiare quelle variabili al volo; ti salverà dal cambiare tutto in seguito.

DA01 parla della coerenza del browser ... questo è un grande fattore per me. Ecco perché uso jQuery anche se un numero qualsiasi di persone di SO mi ricorderà che l'aggiunta di una grande libreria solo per fare alcune cose è uno spreco di risorse. So che quando uso jQuery, funzionerà su un certo set di browser, e quindi anche se probabilmente posso ottenere una soluzione più leggera da solo, ho trovato più utile imparare come jQuery vuole che scriva JavaScript e poi farlo a modo suo.

Alla fine, tendo a trovare restrittivi i framework HTML / CSS; Sono abbastanza un maniaco del controllo che mi piace ancora programmare a mano quando posso. Ma rispetto il fatto che le persone più intelligenti e più avanzate di me hanno impiegato molto tempo per impostare questi template / framework.

Per interesse, qualcuno di voi lavora in una grande squadra per una grande azienda?

Frame come bootstrap sono fantastici per la creazione di uno standard coerente di codice in un progetto, ciò significa anche che quando si reclutano nuovi sviluppatori, quelli con esperienza in un framework popolare avranno già familiarità con la sintassi e possono diventare produttivi molto più rapidamente ... grandi notizie per le grandi aziende.

Inoltre .. con framework come bootstrap, lo tengono costantemente aggiornato supportando più dimensioni dello schermo, più dispositivi e caratteristiche migliori, per una società come la nostra (dove utilizziamo bootstrap) ciò si riduce essenzialmente a risparmi.

Leggendo alcune delle risposte finora, sembrano avere una mentalità molto ristretta, presumo che la maggior parte delle risposte provenga da persone abituate a lavorare da sole o in team molto piccoli e in progetti più piccoli in cui questo genere di cose in genere non è un problema .

Aggiungendo ciò che è stato detto nelle grandi risposte precedenti, un altro vantaggio di questi modelli sarebbe la coerenza tra dispositivi . Le griglie integrate semplificano la progettazione di qualsiasi sistema operativo.

Preferisco ancora scrivere il mio codice, per i seguenti motivi:

• Familiarità con ciò che ho già scritto. Se ho bisogno di cambiare qualcosa, so esattamente dove si trova;

• Struttura incentrata sul progetto. Ogni nuovo sito / app avrà esigenze diverse dalla precedente, pertanto potrebbe essere necessario organizzare separatamente file e risorse.

• Viste personalizzate per diversi dispositivi.

A meno che tu non stia creando una pagina molto limitata, finirai per aggiungere sempre più stili a nuovi elementi e sovrascrivere quelli esistenti.

Poiché mi piace lavorare con progetti reattivi, il motivo principale per cui non li userei è perché preferisco progettare ogni passaggio reattivo "separatamente" e nel suo insieme. E questi modelli di solito funzionano con una griglia più o meno rigida che non è possibile modificare completamente.

Il più grande vantaggio è che puoi sperimentare il ridimensionamento te stesso invece di speculare su come sarebbero le cose.

Ho un approccio allo sviluppo molto "contenuto prima" in cui in realtà codifico la navigazione e aggiungo il contenuto del testo. Tende ad esporti a cose che non avevi previsto quando eri in fase di progettazione.

Utilizzando un framework come Twitter Bootstrap, puoi effettivamente testare le pagine mentre sei ancora in fase di progettazione e potresti persino scoprire problemi di usabilità e altre sfide relative all'esperienza utente. I framework hanno un sacco di classi riutilizzabili che ti faranno conoscere e ti faranno risparmiare tempo.

Hai detto che scrivi molto da zero. Quando ho qualcosa che deve essere molto personalizzato o molto leggero, vado con Skeleton

Per anni ho usato per scrivere a mano tutto, ma oggigiorno tendo a usare Bootstrap. Perché lo faccio?

1. Ottengo un layout reattivo con pochissimo lavoro. In alcuni dei siti Web su cui stavo lavorando, sono necessarie solo alcune piccole modifiche per ottenere un layout ottimizzato per tablet e dispositivi mobili. La reattiva barra di navigazione è uno dei miei componenti di bootstrap preferiti.
2. I controlli predefiniti non sono coerenti tra browser e sistema operativo, per non parlare del fatto che sono sempre brutti a prescindere dal sistema operativo o dal browser in uso. Con bootstrap, ottieni un aspetto decente e coerente e senti poco lavoro. Se vuoi comunque ripristinare tutti i controlli, quindi sì, Bootstrap non ti farà risparmiare molto tempo, ma nella mia esperienza, il più delle volte non avresti abbastanza tempo per ripristinare tutti i controlli ma ti senti comunque irritato dal brutto valore predefinito controlli.
3. Pone un limite a ciò che vuoi fare, il che è una buona cosa, perché quando lavori in CSS puro tendi a voler modificare ogni piccola cosa (il colore, lo spessore del bordo, il gradiente, l'ombra, il raggio del bordo, il transizioni e l'elenco continua), mentre individualmente richiedono poco tempo, nel complesso è un grande spreco di tempo. Quando lavori su progetti con scadenza, vuoi limitare ciò che puoi e non puoi fare; l'utilizzo di framework ti consente di pensare a componenti più grossolani anziché a quali proprietà CSS modificare.
4. Alcuni framework lato server hanno l'integrazione con bootstrap. Ad esempio, quando si utilizza django-bootstrap, è possibile semplicemente {{ form|as_bootstrap }}ottenere moduli in stile bootstrap, incluso l'evidenziazione rossa sui messaggi di errore, ecc.

Mentre sto modificando Bootstrap, mi è venuto in mente che l'80% o più del mio tempo è stato speso per imparare quale classe o ID è stato applicato a qualcosa, trovando poi che nel CSS si adeguasse.

Ecco dove sbagli. Se vuoi beneficiare di Bootstrap, non dovresti personalizzare troppo; si rinuncia alla flessibilità di dover e di poter modificare tutto quando si utilizzano componenti pre-costruiti. Non dovresti passare il tempo a segare o intagliare le assi di legno quando decori una stanza dai componenti IKEA.

Bootstrap è utile quando è necessario aggiornare rapidamente un sito Web funzionante da componenti predefiniti; i loro componenti sporgono come il pollice dolente se li metti in siti con disegni fantasiosi, quindi di solito lancio Bootstrap per quel tipo di progetti.

Usare uno dei pacchetti front-end preconfigurati significa semplicemente che devo imparare le loro convenzioni di denominazione e la loro struttura piuttosto che fare affidamento sul mio.

Questo è in realtà un vantaggio dell'utilizzo di un pacchetto popolare. È più facile consegnare un progetto a un altro sviluppatore quando entrambi sapete cosa fa "btn-group", "btn btn-large", con framework personali dovrebbero imparare le vostre peculiarità (o più comuni, sarebbero semplicemente in cascata i tuoi css con le loro modifiche e non preoccuparti di provare a decifrare o modificare il tuo codice).

Hai semplicemente familiarità con il sistema che usi in modo da poterlo navigare facilmente o devi ancora cercare oggetti?

Quelli comuni come btn, table, row *, span *, etc sarebbero naturali. Ma per l'html per i componenti principali, è molto più veloce semplicemente copiare e incollare dai loro esempi piuttosto che digitarli.

Potresti costruire un sito senza di loro se dovessi?

Ci sono stato, l'ho fatto, molte volte.

sono buoni solo per:

1. designer che non hanno familiarità con la programmazione ma vogliono una soluzione per portare i loro progetti in un sito.
2. un modo per trasmettere in streaming la produzione per qualcuno che non vuole costruire il proprio framework.

personalmente ho i miei metodi e non desidero seguire questa strada perché ho già imparato a programmare CSS, HTML e jQuery. Vedo un vantaggio in questi per le persone che non hanno idea e stanno cercando di imparare a programmare. Sarebbe stato bello vedere qualcosa del genere circa cinque anni fa. Inoltre, come hai affermato, ci vorrebbe più tempo per implementarlo nei tuoi attuali metodi di produzione.

EDIT: non sto provando a fare il highjack alla tua discussione ma anch'io mi chiedo la stessa cosa ma per quanto riguarda WordPress. Ho usato leggermente WordPress ma non so se un framework sia vantaggioso. Ho pianificato di andare alla vecchia maniera fino a quando non troverò un grande vantaggio.

Bootstrap è un buon punto di partenza per un layout reattivo. Ma per quanto riguarda il design, penso che sia piuttosto carente. Fa il suo aspetto un po '"bootstrappy", che perché è un modello estremamente utilizzato.

Ma devi tenere a mente per cosa è stato creato bootstrap, è stato quello di portare coerenza alle app in-house create da Twitter, e se dovessi usarlo per quello, o anche se sei uno sviluppatore che vuole attecchire rapidamente sul web un'app senza pensarci troppo, forse come mvp o prototipo è uno strumento davvero eccezionale.