Bootstrap & spol. Proč?

2. 8. 2018 16:38:22

Zdravím,

mám otázku na kodéry a na ty, co je poptávají: Proč při kódování webů používáte nebo požadujete použití Bootstrapu (nebo jakéhokoliv jiného CSS FW)?

Byl jsem asi třikrát nucen ho použít a vždycky jsem se u toho chtěl zastřelit :). Je ale možné, že jsem ho používal nějak špatně. Je fakt, že postupně to bylo čím dál lepší, ale to mohlo být tím, že jsem se mu snažil čím dál tím víc vyhýbat (že jsem ho vlastně nakonec skoro ani nepoužil).

Podle mě má univerzální CSS FW víceméně tři případy využití:

Děláte tutorial na kódování.

Web nemá žádný grafický návrh. (Administrace webu.)

Grafik přímo navrhne web tak, aby byl založený na daném FW.

První dva body jsou jasné. Co se týče toho třetího, tak to je dost problém, protože ani v jednom případě grafik evidentně netušil, co to takový CSS FW vůbec je. Ostatně taky není důvod, aby se o to zajímal. Takže grafika zpravidla s nějakým FW vůbec nepočítá.

Ve výsledku tak člověk násilím musí ten FW ohýbat, což se dělá dost těžko, protože mnohdy vůbec netušíte, jak jsou věci nastylované (třeba nevíte, že je tam varianta i pro selektor ":active", nebo jestli je ta mezera udělaná marginem nebo paddingem, apod.).

Nějak jsem tak do teď úplně nepochopil, jak přesně to má šetřit práci. (Upozorňuji, že mluvím o univerzálních FW, nikoliv o specifických FW vytvořených přesně pro daný design.) V minulosti byly vymyšleny věci jako CSS Reset, které odstranily stylování ze všeho, aby přepisování výchozích stylů bylo co nejsnazší. Tohle je oproti tomu skok úplně extrémě na opačnou stranu.

Chápu, že je tam ten grid, ale tak nějak mi přijde, že ve většině případů je stejně snazší si to udělat sám. (Nevím, kdo potřebuje grid, aby udělal dva sloupce a na mobilu z toho udělal jeden.)

Taky jsou tam ty JS komponenty, ale z toho se použije co? Dialog a to je tak všechno. Zbytek je třeba nevhodný a nebo je snadné si to udělat sám (třeba přepínání tabů), popř. se to musí nějak zase ohýbat. Tak to si tam můžu dát A11y Dialog a nemusím se otravovat se zbytkem. Jako určitě je dobré, že je to všechno vyřešené i včetně přístupnosti (WAI-ARIA), což je mnohdy těžké si udělat sám.

Pak je tam taky výchozí stylování základního obsahu, ale to si stejně ale člověk musí vždycky upravit. (V případě CSS Resetu to může být celkem zdlouhavé, ale tak můžu použít Normalizer nebo něco.) Neupravené CSS komponenty pak navíc působí strašně amatérsky, přitom se z toho použijí mnohdy zase jenom nějaké alerty, které bych mohl nakódovat za deset minut.

Možná, že všechny ty výhody nějak dohromady ty nevýhody překonají, ale já jsem to tedy neodhalil. Mně přijde, že to všichni používají, protože je to moderní a na nějakém super zahraničním (!) webu někdo, kdo měl přednášku na nějaké konferenci, řekl, že on používá grid nebo nějaký FW, a tak je lepší než všichni ostatní, ale že by u toho někdo nějak moc přemýšlel, se mi nezdá. Hype kolem toho mi přijde podobně absurdní jako kolem Reactu, který lidi používají na jakoukoliv kravinu.

Díky za odpovědi.

2. 8. 2018 16:38:22

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359339

MCZ

(4 hodnocení)

2. 8. 2018 16:42:48

Jediný CSS FW, který dává smysl, je SASS.

2. 8. 2018 16:42:48

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359338

Tom

(7 hodnocení)

2. 8. 2018 16:56:33

imho protože:

- většina lidí jsou bastliči a vlastní řešení od nich není spolehlivé (TB je prostě funkční takřka všude)

- je přenositelné, nový kodér se nemusí hrabat v kódu a "učit" se celou kostru nové aplikace

pokud by existoval ustálený, většinou používaný systém, jak dělat kostru a nazývat classy, pak by možná přestal dávat TB smysl, do té doby smysl mít bude

2. 8. 2018 16:56:33

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359337

Michal Jeřábek

2. 8. 2018 16:57:11

Napsal LerainSoft;1477755
Jediný CSS FW, který dává smysl, je SASS.

A nechcete se mnou založit nějakou skupinu, kde budeme proti těm Bootstrapům bojovat. Člověk by pak sehnal víc práce. :D

---------- Příspěvek doplněn 02.08.2018 v 17:02 ----------

Napsal double;1477759
- je přenositelné, nový kodér se nemusí hrabat v kódu a "učit" se celou kostru nové aplikace

No nevím, protože vy tam stejně máte vlastní kód, protože design nebyl pro FW většinou navržen, který je navíc (nevhodně*) namontovaný na jiný univerzální kód, takže je to všechno mnohem komplikovanější. Výsledek pak bude zbastlený ještě více.

*protože to musíte dělat ne podle toho, jak to dává smysl, ale podle toho jak to "sežere" ten FW

2. 8. 2018 16:57:11

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359336

MCZ

(4 hodnocení)

2. 8. 2018 17:02:39

Napsal mjerabek;1477760
A nechcete se mnou založit nějakou skupinu, kde budeme proti těm Bootstrapům bojovat. Člověk by pak sehnal víc práce. :D

Nemá smysl proti tomu bojovat.

Jakmile vidím, že se v projektu používá bordel jako Wordpress, Bootstrap a jemu podobné, odmítám na tom pracovat.

Pokud byl projekt vytvořen na podobných věcech, tak byl budget podprůměrný, což znamená, že i úpravy na něm budou mít podprůměrný budget.

Dělej dobře svou práci a nebudeš mít potřebu tohle řešit.

2. 8. 2018 17:02:39

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359335

Michal Jeřábek

2. 8. 2018 17:16:57

Napsal LerainSoft;1477764
Dělej dobře svou práci a nebudeš mít potřebu tohle řešit.

V tomhle směru dělám, co můžu, ale potřebu to řešit mám. Jedna věc je, že někde se začít musí a pokud nemáte dost referencí, tak vám nikdo žádný důležitý projekt nedá. A druhá věc, proč to řeším, je ta, jestli "dobře udělaná práce" neznamená, že tam použijete ten Bootstrap.

2. 8. 2018 17:16:57

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359334

Dominik Hašek

(12 hodnocení)

2. 8. 2018 17:24:53

LerainSof: SASS není FW, ale preprocessor. Motáš tu 2 úplně jiný věci. Použití bootstrapu je známka malého budgetu? Ale prosímtě :-D

mjerabek: Bootstrap je dobrý sluha, ale špatný pán. Jeho použití má svojí logiku, obzvláště pokud je web responzivní. Většinou chceš použít něco, co nějak funguje a je k tomu dokumentace a ne nějaký "samo domo" responzivní "systém", který bude muset jiný kodér při nějaké malé úpravě rozšifrovávat - pár jsem jich viděl a bylo to vždy docela peklo, zlatej bootstrap. Nicméně souhlasím že někdy by bylo rozumější použít nějaký trošku "lehčí" FW který řeší třeba jen responzív - ale není problém bootstrap ořezat tak, že tomuhle vyhovuje, sám to tak často dělám.

Je nicméně pravda že spousta klientů si neuvědomuje že je třeba myslet na to už při navrhování grafiky, kdy grafik navrhuje minimálně do připravených gridů. Já osobně pokud není grafika připravená na bootstrap ale klient ho vyžaduje, používám pouze media queries (@media(max-widht: @screen-xs-max) a modalní okna, taby, prostě co se zrovna hodí. Pro dalšího kodéra bude nějaká úprava šablony jednodužší, pokud bootstrap zná. Určitě nepracuji tak, že se snažím grafiku za každou cenu nějak nahňácat do gridů a předpřipravených komponenet bootstrapu (menu atd), prostě pokud tomu grafika neodpovídá, komponentu zakomentuji a udělám si ji sám, je to i méně časově náročné. Praktikuji tento postup již několik let a nikdy s tím neměl žádný klient problém.

2. 8. 2018 17:24:53

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359333

MCZ

(4 hodnocení)

2. 8. 2018 17:30:41

Napsal Toliceek;1477767
LerainSof: SASS není FW, ale preprocessor. Motáš tu 2 úplně jiný věci. Použití bootstrapu je známka malého budgetu? Ale prosímtě :-D

mjerabek: Bootstrap je dobrý sluha, ale špatný pán. Jeho použití má svojí logiku, obzvláště pokud je web responzivní. Většinou chceš použít něco, co nějak funguje a je k tomu dokumentace a ne nějaký "samo domo" responzivní "systém", který bude muset jiný kodér při nějaké malé úpravě rozšifrovávat - pár jsem jich viděl a bylo to vždy docela peklo, zlatej bootstrap. Nicméně souhlasím že někdy by bylo rozumější použít nějaký trošku "lehčí" FW který řeší třeba jen responzív - ale není problém bootstrap ořezat tak, že tomuhle vyhovuje, sám to tak často dělám.

Je nicméně pravda že spousta klientů si neuvědomuje že je třeba myslet na to už při navrhování grafiky, kdy grafik navrhuje minimálně do připravených gridů. Já osobně pokud není grafika připravená na bootstrap ale klient ho vyžaduje, používám pouze media queries (@media(max-widht: @screen-xs-max) a modalní okna, taby, prostě co se zrovna hodí. Pro dalšího kodéra bude nějaká úprava šablony jednodužší, pokud bootstrap zná. Určitě nepracuji tak, že se snažím grafiku za každou cenu nějak nahňácat do gridů a předpřipravených komponenet bootstrapu (menu atd), prostě pokud tomu grafika neodpovídá, komponentu zakomentuji a udělám si ji sám, je to i méně časově náročné. Praktikuji tento postup již několik let a nikdy s tím neměl žádný klient problém.

Sorry, ale když vidím web postavenej komplet na Bootstrapu, tak to pro mě značí, že klient si najal někoho levného a tudíž počítá s tím, že se i já budu pohybovat cenově na stejné úrovni.

Když vidím, že byl Bootstrap využit tak, aby to dávalo smysl - jako například ty, tak to pochopím, nicméně o takových lidech se my nebavíme.

Za SASS se omlouvám, chtěl jsem tim říci, že je to jediná CSSková věc, která se vyloženě vyplatí používat.

2. 8. 2018 17:30:41

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359332

Dominik Hašek

(12 hodnocení)

2. 8. 2018 17:39:14

Napsal LerainSoft;1477769
Sorry, ale když vidím web postavenej komplet na Bootstrapu, tak to pro mě značí, že klient si najal někoho levného a tudíž počítá s tím, že se i já budu pohybovat cenově na stejné úrovni.

Může být, ale určitě to není pravidlo. Mám za sebou dost projektů, některé maj jen rozpočet na kódování v řádech desítek tisíc a požívá se tam bootstrap. Je ale pravda že to většinou bez pohledu do kódu nepoznáš. Pokud jsou někde použity komponenety úplně "čistě" bez jakékoliv grafické úpravy, může to být známka "šetřílství" klienta.

Určitě souhlasím s tím, že pokud někdo neumí použít bootstrap tam, kde to na něj není úplně předpřipravené, tak je lepší ho raději nepoužívat vůbec, protože to práci jen stěžuje. Už jsem pár takových projektů viděl a vyznat se v tom bylo prakticky nemožné. Lahůdka je použití gridů a jejich následné kompletní přepsání pomocí přidaných class, v tom bych se taky hrabat nechtěl :-D

2. 8. 2018 17:39:14

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359331

Michal Jeřábek

2. 8. 2018 17:51:22

Napsal Toliceek;1477767
Bootstrap je dobrý sluha, ale špatný pán. Jeho použití má svojí logiku, obzvláště pokud je web responzivní. Většinou chceš použít něco, co nějak funguje a je k tomu dokumentace a ne nějaký "samo domo" responzivní "systém", který bude muset jiný kodér při nějaké malé úpravě rozšifrovávat - pár jsem jich viděl a bylo to vždy docela peklo, zlatej bootstrap. Nicméně souhlasím že někdy by bylo rozumější použít nějaký trošku "lehčí" FW který řeší třeba jen responzív - ale není problém bootstrap ořezat tak, že tomuhle vyhovuje, sám to tak často dělám.

Je nicméně pravda že spousta klientů si neuvědomuje že je třeba myslet na to už při navrhování grafiky, kdy grafik navrhuje minimálně do připravených gridů. Já osobně pokud není grafika připravená na bootstrap ale klient ho vyžaduje, používám pouze media queries (@media(max-widht: @screen-xs-max) a modalní okna, taby, prostě co se zrovna hodí. Pro dalšího kodéra bude nějaká úprava šablony jednodužší, pokud bootstrap zná. Určitě nepracuji tak, že se snažím grafiku za každou cenu nějak nahňácat do gridů a předpřipravených komponenet bootstrapu (menu atd), prostě pokud tomu grafika neodpovídá, komponentu zakomentuji a udělám si ji sám, je to i méně časově náročné. Praktikuji tento postup již několik let a nikdy s tím neměl žádný klient problém.

Tak to ale nemá moc význam, když použijete jenom @media a modály... Ale tak tedy nabízet, že to uděláte "s Bootstrapem kompatibilní", tedy že ho vložíte do stránky, ale víceméně ho ignorujete, je možné. To by mohlo být v pohodě.

Jinak chápu, že mít dokumentaci je dobré, ostatně vždycky k šablonám dodávám texťák, kde je popsaná obecně metodologie, na jakých media query je to založené, jaké jsou tam použité pluginy, knihovny, kde jsou jaké soubory a tak. Ale nějak nejsem přesvědčený o tom, že ty úpravy jsou pak snazší. Už jenom ze zkušenosti toho, když upravuji nějaké weby, tak mi nepřijde, že by to něčemu pomohlo. Protože prostě nemohu tušit, co tam původní kodér změnil a tak to stejně musím procházet, abych viděl, jak je to udělané. (Snad jedině ten JS, ale tak stejně tam dám plugin, který má dokumentaci.) Pokud se jedná o FW (komponenty), který byl navržen přímo pro daný web, tak to nepochybně pomáhá, ale u těch univerzálních, nevím... (Samozřejmě uvažuji, že se bavíme o práci kodéra, který ví, co dělá, a umí vyrobit znovupoužitelné CSS komponenty a umí udělat JS, ve kterém se dá vyznat.)

2. 8. 2018 17:51:22

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359330

sentosa

(1 hodnocení)

2. 8. 2018 18:20:54

Zrovna bootstrap je robustni FW, ktery kdyz se naucis, usetri ti hromadu prace. Proc znovu vymyslet kolo nejakym svym resenim, kdyz FW uz to resi. Vsechny mozne komponenty co clovek pouziva tam jsou uz pripravene. Muzes si jednoduse upravit defaultni promene (vlastne sass definice vsech komponent, ktere se dedi napric celym systemem komponent) a vysledkem je rychle nastaveny core "feel" tveho dizajnu.

Hodne lidi dela tu chybu, ze si nalinkujou bootstrap v defaultu a pak kazdou classu prestylovavaj ve vlastnim css a to se pak ani nedivim, ze nato nadavaj. Ale kdyz tomu das cas, chytnes to do ruky, je z toho mocny nastroj. Skvele se v tom prototypuje, nablijes komponenty do html, ladis defaulti promene a definice, prekompilujes a cely web ma behem chvile zas jiny dizajn. Ale chce to mit zmaknute a venovat tomu ten cas.

Zaroven to muze slouzit jako nejaky standard pro praci v tymu nebo kdyz neco predavas nekam dal. Nikdo se nemusi ucit tve suprove vymozenosti, staci umet BS a hodne rychle dokazes prebrat praci po nekom jinym - za predpokladu ze to nezprasil svyma CSS.

Tech lepsich css frameworku neni tolik, treba ti nejaky lightweight typu Pure CSS bude vyhovovat lip.

Vesmes jde o to, ze mas uz pripravene tridy, komponenty, atd, ktere si muzes libovolne nastavovat a velice pohodlne rozsirovat o vlastni customizace. Ale reknu to jeste jednou - je potreba si nad tim sednout a experimentovat, ponorit se do dokumentace, zkouset a ucit se.

2. 8. 2018 18:20:54

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359329

Jiří Šubr

(23 hodnocení)

2. 8. 2018 18:38:19

...

2. 8. 2018 18:38:19

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359328

Michal Jeřábek

2. 8. 2018 18:42:30

Napsal sentosa;1477775
Zrovna bootstrap je robustni FW, ktery kdyz se naucis, usetri ti hromadu prace. Proc znovu vymyslet kolo nejakym svym resenim, kdyz FW uz to resi. Vsechny mozne komponenty co clovek pouziva tam jsou uz pripravene. Muzes si jednoduse upravit defaultni promene (vlastne sass definice vsech komponent, ktere se dedi napric celym systemem komponent) a vysledkem je rychle nastaveny core "feel" tveho dizajnu.

Hodne lidi dela tu chybu, ze si nalinkujou bootstrap v defaultu a pak kazdou classu prestylovavaj ve vlastnim css a to se pak ani nedivim, ze nato nadavaj. Ale kdyz tomu das cas, chytnes to do ruky, je z toho mocny nastroj. Skvele se v tom prototypuje, nablijes komponenty do html, ladis defaulti promene a definice, prekompilujes a cely web ma behem chvile zas jiny dizajn. Ale chce to mit zmaknute a venovat tomu ten cas.

Zaroven to muze slouzit jako nejaky standard pro praci v tymu nebo kdyz neco predavas nekam dal. Nikdo se nemusi ucit tve suprove vymozenosti, staci umet BS a hodne rychle dokazes prebrat praci po nekom jinym - za predpokladu ze to nezprasil svyma CSS.

Tech lepsich css frameworku neni tolik, treba ti nejaky lightweight typu Pure CSS bude vyhovovat lip.

Vesmes jde o to, ze mas uz pripravene tridy, komponenty, atd, ktere si muzes libovolne nastavovat a velice pohodlne rozsirovat o vlastni customizace. Ale reknu to jeste jednou - je potreba si nad tim sednout a experimentovat, ponorit se do dokumentace, zkouset a ucit se.

Mně přijde, že je to ale tak dobré jenom v případě, že skutečně je design navržený pro daný FW. Nebo když kašlete na to, že se odchýlíte od návrhu (pokud s nějakou věci FW nepočítá). Což je možná právě ta moje "chyba", že se snažím, aby to bylo všechno vyladěné tak, jako kdyby existoval grafický návrh pro každých 10px viewportu. Jenže, když se člověk podívá právě na ty reponzivní verze webů, tak je právě vidět, jaký jsou ty FW problém. Buďto musíte věci přestylovávat a pak je v tom bordel a nebo využijete pouze možností FW a pak je to mnohdy zase tragédie na straně designu.

Ono ale nejde o to, co by vyhovovalo mně, ale o to, co chtějí klienti. Kdyby to záleželo na mně, tak chci vždycky použít svoje "startovací CSS", které vychytávám už pár let.

Napsal jste jinak v zásadě hezkou reklamu. :) Zní to jako hodně super.

Ale tak je to asi tím, že jsem s tím skutečně moc nepracoval, takže to tak neznám a tak mě to pořád obtěžuje a nevím, jak to využít tak, aby mi to nějak pomohlo. Ale pořád nejsem přesvědčený, že má smysl tomu věnovat nějaký čas (když ponecháme stranou, že poptávka si to žádá).

Můžete nějak dokázat tu úsporu času? Nebo máte jenom takový pocit?

2. 8. 2018 18:42:30

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359327

sentosa

(1 hodnocení)

2. 8. 2018 19:00:13

Napsal mjerabek;1477779
Mně přijde, že je to ale tak dobré jenom v případě, že skutečně je design navržený pro daný FW. Nebo když kašlete na to, že se odchýlíte od návrhu (pokud s nějakou věci FW nepočítá). Což je možná právě ta moje "chyba", že se snažím, aby to bylo všechno vyladěné tak, jako kdyby existoval grafický návrh pro každých 10px viewportu. Jenže, když se člověk podívá právě na ty reponzivní verze webů, tak je právě vidět, jaký jsou ty FW problém. Buďto musíte věci přestylovávat a pak je v tom bordel a nebo využijete pouze možností FW a pak je to mnohdy zase tragédie na straně designu.
Ono ale nejde o to, co by vyhovovalo mně, ale o to, co chtějí klienti. Kdyby to záleželo na mně, tak chci vždycky použít svoje "startovací CSS", které vychytávám už pár let.
Napsal jste jinak v zásadě hezkou reklamu. :) Zní to jako hodně super.
Ale tak je to asi tím, že jsem s tím skutečně moc nepracoval, takže to tak neznám a tak mě to pořád obtěžuje a nevím, jak to využít tak, aby mi to nějak pomohlo. Ale pořád nejsem přesvědčený, že má smysl tomu věnovat nějaký čas (když ponecháme stranou, že poptávka si to žádá).
Můžete nějak dokázat tu úsporu času? Nebo máte jenom takový pocit?

Tezko soudit usporu vuci "startovacim CSS", nicmene kdyz clovek vi jak a kam sahnout, urcite je to rychlejsi nez to psat komplet vlastni od nuly - a kdyz nekdo dlouho ladni vlastni reseni, kde ma mraky znovupouzitelnych konfigurovatelnych komponent, jaky je pak rozdil oproti frameworku? Snad jen, ze ho perfetkne zvladne pouze on. Nechtel jsem, aby to vyznelo jako reklama, spis jsem se snazil odpovedet na onu otazku "Proc?".

2. 8. 2018 19:00:13

https://webtrh.cz/diskuse/bootstrap-spol-proc/#reply1359326

Michal Jeřábek

2. 8. 2018 19:03:13

Napsal Jiří Šubr;1477778
Pokud to zadavatel vyžaduje, tak to je pravděpodobně z důvodu, že až tam bude za 2 roky potřeba něco změnit a ty nebudeš zrovna moct, tak lépe najde náhradu.

A nebo slyšel, že je to moderní a "potřebuje" mít web založený na moderních technologiích.

Napsal Jiří Šubr;1477778
U větších firem je Framework základ

A používají třeba SUPERKODERS nějaký FW? Byl jsem se teď podívat na nějaké významnější agentury v ČR a nepřijde mi, ale ono se to těžko pozná, protože odstraňují nepoužité CSS apod.

Napsal Jiří Šubr;1477778
údržba, nadstavba atd.. je pak mnohem snazší.

Ale proč? Čím? Vždyť ten kód nakonec tomu FW stejně neodpovídá. Ta dokumentace k tomu webu nepasuje. Je ve skutečnosti zavádějící. (Když chci třeba udělat na stránce podobný komponent, tak si prostě zkopíruju kód toho původního a nějak ho upravím. Stejně jako to udělám v tom FW — vezmu jejich kód a upravím ho. Všechny cizí (klidně i vlastní) JS komponenty, které použiju, mají vlastní dokumentaci a navíc mohou být vhodnější.)