responzivny web

neopagan · Napísal **neopagan**: 09.05.2015 17:27

co je podla vas lepsie pouzit pre responzivny web?

bootstrap css, ktory sa postara o resizing vsetkych prvkov podla rozmeru zariadenia, alebo definovat zvlast css pre rozmery pomocou @media min a max-width ?

Zda sa mi ze web kde sa vyuziva bootstrap sa akosi dlhsie nacitava, kedze zrejme nacitava to mega css a vsetky scripty, kdezto zvlast definovane css sa nacita len ak sa zobrazi na definovanej sirke zariadenia...

killer · Napísal **killer**: 09.05.2015 17:36

Lepšie v čom? Každé riešenie má svoje pre a proti. To je ako keby si chcel vedieť, či je lepšie programovať v assembleri, alebo v jave :rolleyes:

Johnnny · Napísal **Johnnny**: 09.05.2015 17:38

Myslim, ze z otazky je zrejme, ze mu ide o rychlost nacitania, resp optimalizáciu...

neopagan · Napísal autor témy **neopagan**: 09.05.2015 17:44

skor chcem vediet ktorou cestou ist aj pre buducnost... s responzivnym webom len zacinam, co by ste odporucili, ktory sposob, ktoreho by som sa potom drzal... co je vyhodnejsie, aj z hladiska rychlosti nacitavania atd...

myslim, ze bootstrap uz obsahuje mnozstvo veci, ktore len pouzijem prislusnou clasou na elementy, a pri druhom sposobe pomocou media, musim vytvarat zvlast css pre vsetky zariadenia... tak mozno ten bootsrap je z tohto hladiska vyhodnejsi, avsak mozno narocnejsi na rychlost nacitania atd.

walther · Napísal **walther**: 09.05.2015 17:47

Bootstrap je výhodný len vtedy, ak potrebuješ zbúchať webstránku veľmi rýchlo. Na nejaké reálnejšie využívanie v praxi by som ho nikomu neodporúčal. Je s tým spojených viacero problémov.
Pokiaľ ťa zaujíma táto tematika, skôr by som odporúčal kombináciu Sass + Bourbon/Neat alebo Susy.

Johnnny · Napísal **Johnnny**: 09.05.2015 17:51

Bootstrap bude narocnejsi na loading, kedze je pomerne rozsiahly. Ked som v bootstrape robil web ja, vyuzival som aj "responzivne classy", aj stylovanie cez @media. CSS pre konkretne zariadenie som ale nedefinoval. Ked pouzijes minifikovane subory, nacitaniu to pri beznom pripojeni nijak neublizi.

chrono · Napísal **chrono**: 09.05.2015 22:05

1. Prehliadače s knižnicami s veľkosťou podobnou Bootstrap, jQuery... už dávno problém nemajú a ak tvoj server nedokáže poslať 20kB (takú veľkosť má ten súbor, ak sa použije gzip kompesia) v rozumnom čase, asi by si mal riešiť server a nie veľkosť knižnice.
2. Bootstrap používa media query a poskytuje aj nejaké css selektory, pomocou ktorých sa dá napr. skryť nejaká časť v prípade, že je rozlíšenie príliš malé (podrobnosti sú v dokumentácii), takže často v css kóde netreba použiť žiadne media query.
3. Vyskúšaj rôzne možnosti a uvidíš, čo ti bude najviac vyhovovať.

walther · Napísal **walther**: 09.05.2015 22:16

Pri bootstrape nie je problém veľkosť samotného bootstrapu, ale grcný kód, ktorý vďaka bootstrapu získaš a z toho vyplývajúce ešte aj nafúknutie HTML.
Nie je vôbec výnimkou vidieť napr niečo takéto:

Kód:

class="col-xs-6 col-md-3 subnav main-menu-item menu-item-even menu-item-depth-0 menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-has-children"

Toto v HTML nemá čo robiť, nech sa na mňa nikto nehnevá. Pri väčších stránkach to dokáže urobiť dosť podstatný rozdiel. Samozrejme takéto classy človek nemusí využívať, ale potom sa naskytá otázka, načo je vlastne potom človeku 90% knižnice a prečo nepoužiť niečo vhodnejšie.

chrono · Napísal **chrono**: 10.05.2015 0:52

Z bootstrap je tam len to col-xs-6 col-md-3 (a je to len spôsob, ako sa dá vyhnúť používaniu media query, nikomu nič nebráni použiť priamo media query priamo cez CSS alebo prípadne s pomocou Sass/Less).

walther · Napísal **walther**: 10.05.2015 1:44

Viem, ale keď si pozrieš stránky založené na bootstrape, hento je presne štýl, akým sa to zvykne uberať. Je to potom naozaj zážitok upravovať alebo nebodaj keď treba neskôr nahradiť framework iným.

chrono · Napísal **chrono**: 10.05.2015 10:51

Ak niekto použije také niečo v Bootstrap, určite by to použil aj v Bourbon/Neat, Susy, ... (napr. preto, lebo Bourbon/Neat, Susy neobsahujú žiadnu podporu pre menu).

walther · Napísal **walther**: 10.05.2015 13:18

Akože nie? Máš od nich Refills, kde máš dokonca možnosť aj nenaštýlovaných komponentov so zachovanou funkcionalitou a ten výsledok je úplne niekde inde, bez zasierania html milión classami. Taktiež neincluduješ celý framework, ale do výsledného css sa dostanú len tie veci, ktoré si pred kompiláciou použil.
Bootstrap je super, ak vážne potrebuješ niečo veľmi rýchlo a nechceš sa s tým moc hrať. V každom inom prípade ale vyhráva Sass/Less.

chrono · Napísal **chrono**: 10.05.2015 15:11

Aj v Bootstrap si môžeš skompilovať len to čo chceš (navyše na ich stránkach majú kompilovanie integrované, takže to môžu použiť aj tí, čo nemajú Ruby).

Mimochodom porovnával si html kód vyžadovaný pre navbar v Bootstrap a Refills? (pretože tých atribútov class a tried v nich použitých je tam približne rovnaký počet)

walther · Napísal **walther**: 10.05.2015 16:05

Práveže porovnával, však si vezmi už len blbý Accordion komponent.

Refills:

Kód:

<ul class="accordion">
  <li>
    <a href="javascript:void(0)" class="js-accordion-trigger">Accordion Item</a>
    <ul class="submenu">
      <li>
        <a href="javascript:void(0)">Sub Item 1</a>
      </li>
      <li>
        <a href="javascript:void(0)">Sub Item 2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0)" class="js-accordion-trigger">Another Item</a>
    <ul class="submenu">
      <li>
        <a href="javascript:void(0)">Sub Item 1</a>
      </li>
      <li>
        <a href="javascript:void(0)">Sub Item 2</a>
      </li>
    </ul>
  </li>
</ul>

Bootstrap:

Kód:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Samozrejme, nenarážam na dĺžku kódu, ale na celkovú štruktúru html. Čo je preboha napr class="in" ??? Skúšal si prerobiť takúto stránku na iný framework? Alebo povedzme aspoň na inú štruktúru html? Však to je grc, keď to už mám tak povedať. Radšek človek zahodí nielen css, ale aj html a urobí to potom nanovo.

Vieš, pri Bourbon/Neat/Refills/Compass/Susy/bohviečo, je jedna obrovská výhoda oproti Bootstrapu - máš väčšiu kontrolu. Nemusíš vyrábať špeciálne verzie css a hlavne, nezasieraš toľko html. Nie je problém jeden deň fičať na Susy a o deň neskôr nato si povedať, že by bol lepší Bourbon. Dokážeš takto prerobiť Bootstrap? Silne pochybujem.
A áno, pri bootstrape je myslím možnosť využiť aspoň Less, ale úprimne, reálne to využíva málokto, lebo keď niekto už siahne po bootstrape, ide väčšinou o človeka, ktorému ide o rýchlosť a nie o kvalitu. Ten nebude skúmať výsledný kód. Česť výnimkám.

hatto13 · Napísal **hatto13**: 11.05.2015 12:28

suhlas s waltherom. a ja by som este dodal, ze aj potom ti vznikne aj z tvojho custom css kodu obrovsky bordel, lebo musis prepisovat pravidla, tisic indentov, !important a podobne... staci ze graficky navrh trosku nesedi na to co ponuka bootstrap a uz musis pisat viac kodu ako by si pisal keby si to robil bez bootstrap.

ja by som uz bootstrap na nic ine ako na rozhranie pre aplikaciu/administraciu/intranet nepouzil.

chrono · Napísal **chrono**: 11.05.2015 16:57

walther píše:

Bootstrap nemá accordion, obsahuje len podporu pre rozbaľovanie a zbaľovanie nejakého elementu. Pomocou toho sa dá accordion vytvoriť, a ak používateľ nepotrebuje všetky možnosti, čo poskytuje panel, môže urobiť aj oveľa jednoduchší html kód (viac menej len nejaké tlačidlo/link + element, ktorý sa má rozbaľovať/zbaľovať).

Ako sa v Refills orobí to, aby bola niektorá položka rozbalená pri načítaní stránky bez toho, aby sa tam použila nejaká css trieda? Ak je odpoveď javascript, tak aj v Bootstrap nemusíš použiť tú triedu in a môžeš to urobiť pomocou javascriptu.

Keď už porovnávame náhodné komponenty, čo tak dropdown.

Bootstrap:

Kód:

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown trigger <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Dropdown Menu Item</li>
      <li>Another Item</li>
      <li>Item Three</li>
      <li>The Last One</li>
  </ul>
</div>

Refills HTML:

Kód:

<div class="dropdown">
  <div class="dropdown-container">
    <p class="dropdown-description">Description</p>
    <p class="dropdown-button">Click to Select</p>
    <ul class="dropdown-menu dropdown-select">
      <li>Dropdown Menu Item</li>
      <li>Another Item</li>
      <li>Item Three</li>
      <li>The Last One</li>
    </ul>
  </div>
</div>

Refills SCSS:

Kód:

.dropdown {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  $dropdown-color: $base-font-color;
  $dropdown-description-color: lighten($dropdown-color, 40%);
  $dropdown-border: 1px solid silver;
  $dropdown-background: $base-background-color;
  $dropdown-background-hover: darken($dropdown-background, 3%);
  $dropdown-inner-border: 1px solid silver;
  $dropdown-height: 40px;
  $dropdown-padding: 1em;
  $dropdown-distance-from-menu: 50px;
  $dropdown-arrow-top-distance: 0;

  line-height: $base-line-height;

  .dropdown-container {
    display: inline-block;
    position: relative;
    text-align: center;
  }

  .dropdown-description {
    background: $dropdown-background;
    border-bottom-left-radius: $base-border-radius;
    border-bottom: $dropdown-border;
    border-left: $dropdown-border;
    border-top-left-radius: $base-border-radius;
    border-top: $dropdown-border;
    color: $dropdown-description-color;
    float: left;
    font-size: 0.7em;
    line-height: $dropdown-height;
    margin: 0;
    padding: 0 ($dropdown-padding / 2) 0 $dropdown-padding;

    @include media($large-screen) {
      font-size: 1em;
    }
  }

  .dropdown-button {
    background: $dropdown-background;
    border-bottom-right-radius: $base-border-radius;
    border-top-right-radius: $base-border-radius;
    border-top: $dropdown-border;
    border-right: $dropdown-border;
    border-bottom: $dropdown-border;
    cursor: pointer;
    float: right;
    font-size: 0.7em;
    font-weight: 800;
    line-height: $dropdown-height;
    margin: 0;
    padding: 0 ($dropdown-padding * 2.5) 0 ($dropdown-padding / 2);
    position: relative;

    @include media($large-screen) {
      font-size: 1em;
      padding: 0 ($dropdown-padding * 2.5) 0 ($dropdown-padding / 2);
    }
  }

  .dropdown-button:hover {
    background-color: $dropdown-background-hover;
  }

  .dropdown-button:after {
    color: $base-font-color;
    content: "\25BE";
    display: block;
    position: absolute;
    right: $dropdown-padding;
    top: $dropdown-arrow-top-distance;
  }

  .dropdown-menu {
    @include transition (all 0.2s ease-in-out);
    background: $dropdown-background;
    border-radius: $base-border-radius;
    border: $dropdown-border;
    box-shadow: 0 2px 2px transparentize(black, 0.8);
    color: $dropdown-color;
    cursor: pointer;
    display: none;
    margin: 0;
    overflow: show;
    padding: 0;
    position: absolute;
    right: 0;
    top: $dropdown-distance-from-menu;
    width: 228px;
    z-index: 99999;

    &:before {
      @include position(absolute, 0 1em 0 0);
      color: $dropdown-background;
      content: "\25b2";
      font-size: 1.4em;
      pointer-events: none;
      text-shadow: 0 -2px 2px transparentize(black, 0.7);
      top: -0.7em;
    }
  }

  .dropdown-menu li {
    border-bottom: $dropdown-inner-border;
    color: $dropdown-color; 
    list-style: none;
    padding: $dropdown-padding / 2;
  }

  .dropdown-menu li:hover {
    background: $dropdown-background-hover;
  }

  .dropdown-menu li:first-child {
    border-top-left-radius: $base-border-radius;
    border-top-right-radius: $base-border-radius;
  }

  .dropdown-menu li:last-child {
    border: none;
    border-bottom-left-radius: $base-border-radius;
    border-bottom-right-radius: $base-border-radius;
  }

  .show-menu {
    display: block;
  }
}

Refills JS:

Kód:

$(document).ready(function(){
  $(".dropdown-button").click(function() {
    $(".dropdown-menu").toggleClass("show-menu");
    $(".dropdown-menu > li").click(function(){
      $(".dropdown-menu").removeClass("show-menu");
    });
    $(".dropdown-menu.dropdown-select > li").click(function() {
      $(".dropdown-button").html($(this).html());
    });
  });
});

Naozaj niekto používa značku <p> ako tlačidlo?

Pri Bootstrap sa dá používať Less a Sass (podľa toho, čo používateľovi viac zapadne do celkového systému) a výhoda je, že ak niekto nepotrebuje ponúkané možnosti úprav, tak, na rozdiel od Bourbon/Neat/Refills/Compass/Susy môže použiť css a js súbory, ktoré sa dajú na ich stránkach nájsť a ak potrebuje (alebo chce) môže použiť Less/Sass verziu (čo je pravdepodobne nevyhnutné, ak chce napr. vytvoriť komponenty, ktoré nie sú štandardnou súčasťou Bootstrap).

hatto13 píše:

suhlas s waltherom. a ja by som este dodal, ze aj potom ti vznikne aj z tvojho custom css kodu obrovsky bordel, lebo musis prepisovat pravidla, tisic indentov, !important a podobne... staci ze graficky navrh trosku nesedi na to co ponuka bootstrap a uz musis pisat viac kodu ako by si pisal keby si to robil bez bootstrap.

ja by som uz bootstrap na nic ine ako na rozhranie pre aplikaciu/administraciu/intranet nepouzil.

Predpokladám, že si nikdy nerobil s Less/Sass.

Napr. ak chcem môj vlastný komponent, tak pri Bootstrap (rovnako ako pri podobných knižniciach), použijem funkcie (mixin), ktoré mi tá knižnica poskytuje, takže vzhľad môjho komponentu bude rovnaký, ako je vzhľad štandardných komponentov (môžem bez problémov použiť rovnaké farby, polomer okraja, ...). Ak potrebujem upraviť nejaké farby, rozostupy, ... tak nadefinujem pár premenných a naimportujem bootstrap (a z toho vygenerujem css kód, v ktorom budú potrebné zmeny).

Ak nepotrebuješ urobiť príliš veľkú zmenu vo vzhľade, tak stačí vytvoriť vlastný súbor, v ktorom budú premenné (tie, ktoré chceš meniť, nemusia byť všetky), ktoré sa nachádzajú v súbore _variables.scss. Ak budeš chcieť meniť niečo iné, budeš pravdepodobne musieť nadefinovať vlastné verzie mixins, prípadne aj scss kód pre jednotlivé elementy.

hatto13 · Napísal **hatto13**: 11.05.2015 17:22

podla coho predpokladas?

robil som s bootstrapom uz viackrat, tiez som bol nazoru ze ake je to skvele ale pomaly som zistil, ze ma to viac obmedzuje ako pomaha a zbytocne je kod menej prehladny (ci uz css alebo html). takto ked robim(e) tak ma css/html menej a hlavne je cistejsi, bez potreby zbytocnych overridov.
inak uz si robil s drupalom? kde je dost html kodu aj generovaneho a teda si nemozes len tak vlozit triedu tam kde potrebujes?
alebo ked potrebujes dva rozdielne skiny pre jedno a to iste html nejakeho prvku na stranke? (napr. ked teaser clanku ma dve rozne zobrazenia)

walther · Napísal **walther**: 11.05.2015 17:33

Nehovorím, že Refills je odpoveďou na všetko, uviedol som to len ako príklad

Refills nie je ani knižnica ako taká, je to v podstate len pár komponentov vytvorených pomocou Bourbon+Neat. Nič ti nebráni si samozrejme miesto toho <p> použiť <button> alebo čokoľvek iné.
Ja netvrdím, že sa bootstrap nedá použiť aj "dobre". Pokiaľ to ty robíš takto, ako to opisuješ, SUPER! Pravdou ale je to, že drvivá väčšina ľudí ho používa preto, aby sa nemuseli kašľať s css. Nahodia classy do html a neriešia. Upraviť potom taký web je naozaj zážitok. Častokrát využívajú nezmyselné classy, ktoré sa inak ako pri bootstrape nevyužijú. Však si stačí pozrieť už len tie ukážky, ktoré sú na oficiálnej Bootstrap stránke ako "showcase". Taký lyft.com mieša nielen neviem koľko bootstrap tried, ale ešte aj angular do toho. Chcem vidieť toho človeka, čo by robil potom redesign. Alebo taký newsweek.com, riotdesign.eu... Môžeš sa staviť o čo chceš, že sa celé html zahodí akonáhle by mali prejsť na iný framework alebo urobiť trošku väčší redesign.
Tak, ako sa kedysi písalo inline css a javascript, tak dnes ľudia používajú class="nopad left center ng-scope ng-isolate-scope width300" a tvárime sa, že je to ok. Miesto toho, aby boli štýly a JS oddelené od obsahu, zasa sa to vracia späť do html, len prezlečené do armády tried.

neopagan · Napísal autor témy **neopagan**: 12.06.2015 12:10

ako prvy moj resp. web som zacal teda bootstrapom, aspon som sa trochu naucil co obsahuje a na co sa da vyuzit. Ale ako mnohi pisete, musel som vytvarat kopec vlastnych CSS s important, plus aj ten bootstrap som si customizoval, vyhodil nepotrebne, upravil atd. Ale je to riadny bordel to hej...

V buducnosti vyuzijem z bootstrapu len par veci, ale inak budem zrejme robit s vlastnymi CSS.

don jebot · Napísal **don jebot**: 12.06.2015 12:36

Chlapci nekydajte na bootstrap ked v nom neviete robit, to nieje jeho chyba ale vasa ...

walther · Napísal **walther**: 12.06.2015 12:44

Ach, samozrejme, takže je to naša neschopnosť, že výsledný kód je v drvivom počte prípadov proste grc. Že ma to po tých 7 rokoch praxe nenapadlo!
Keby ľudia používali bootstrap spôsobom, ako to opísal chrono, OK. Bohužiaľ realita je niekde inde a upraviť taký projekt je zážitok a kľudne sa zastávaj bootstrapu koľko chceš.

don jebot · Napísal **don jebot**: 12.06.2015 13:03

Co stym ma tvoja prax? Ja robim tiez cez 6 rokov weby a nemienim sa z toho teraz p..... Skor sa cudujem ze s tymi 7mimi rokmi praxe si sem buchol priklad preco je zly koli classam a pritom 3/4 class tam bolo z wordpressu a bs s tym nemal nic spolocne. Trosku objektivity. Taktiez to porovnavanie kodu buchnes precisteny kod z jedeho FW a potom z bootstrapu kod s obsahom a inymi prvkami, take prikraslovanie svojich tvrdeni.
Ale preco to hadzete na bootstrap ked v jedej vete napises ze to tak pouzivaju ludia... co stym ma bootstrap?

walther · Napísal **walther**: 12.06.2015 13:35

Ono trošku chápania písaného textu by nezaškodilo. Vysvetľoval som, prečo som dal hento ako príklad, takže ak sa chceš o tom doťahovať, odporúčam prečítať predchádzajúce príspevky, nebudem to vysvetľovať každému zvlášť.
Čo sa týka tvojej poslednej otázky, detto. Stačí si prečítať môj predchádzajúci príspevok, posledná veta.
Ťažko diskutovať, ak vypichneš len niektoré tvrdenia ako sa ti zapáči, zvyšok odignoruješ a pritom napíšeš "trošku objektivity". Ibaže by si to teda myslel sebakriticky.

Faktom je proste to, že keď napr zákazník požaduje bootstrap, ide mu v prvom rade o rýchlosť, nie o kvalitu. Takisto neskutočné množstvo programátorov ho používa tak, že sa človeku chce grcať pri pohľade na výsledok. Nehovoriac ešte o tom, že samotný bootstrap so svojimi classami v html nejako nepodporuje práve najlepšie programátorské návyky, skôr naopak. A potom neskutočné množstvo kóderov má pocit, že ten spôsob je vlastne super a prenášajú to ďalej (viď napr tá ukážka s wordpressom).

don jebot · Napísal **don jebot**: 12.06.2015 13:47

ale za to ako to pouzivaju ludia nemoze bootstrap, classy mozes pouzivat ake chces a iba v lessku preniest property na selektory.

chrono · Napísal **chrono**: 12.06.2015 22:14

neopagan píše:

ako prvy moj resp. web som zacal teda bootstrapom, aspon som sa trochu naucil co obsahuje a na co sa da vyuzit. Ale ako mnohi pisete, musel som vytvarat kopec vlastnych CSS s important, plus aj ten bootstrap som si customizoval, vyhodil nepotrebne, upravil atd. Ale je to riadny bordel to hej...

V buducnosti vyuzijem z bootstrapu len par veci, ale inak budem zrejme robit s vlastnymi CSS.

Priamo na stránkach Bootstrap si môžeš vygenerovať css a js súbory, ktoré budú obsahovať len to, čo potrebuješ.

Každopádne rozumné by bolo naučiť sa používať Less/Sass a v takom prípade si vlastný css súbor s bootstrap, ktorý bude obsahovať len to, čo potrebuješ, môžeš vygenerovať aj sám. (ja zvyčajne používam sassc pretože je to jeden program, ktorý nepotrebuje nič iné a používam spolu s Makefile).

Mimochodom čo presne si robil, keď si musel používať important?

JustMe · Napísal **JustMe**: 18.06.2015 17:03

Aj ak použiješ bootstrap tak pravdepodobne budeš musieť vytvoriť nejaké vlastné media query. Bootstrap nie je nejaké zázračné riešenie, sú to len preddefinované niektoré bežné veci. To znamená, že ti to napr dá grid systém ktorý nebudeš musieť riešiť sám (nie, že by si musel ak nepoužiješ bootstrap) alebo si ho len trocha doladíš podľa seba. Musíš sa rozhodnúť sám či ti to stojí za http request a/alebo veľkosť projektu (v prípade optimalizácie assetov) alebo nie. Môžeš si vytvoriť custom build kde budeš mať len to čo potrebuješ a ostatok si nastyluješ sám.

neopagan · Napísal autor témy **neopagan**: 03.07.2015 14:51

chrono: diky za tip, pozriem na to.. a ani ma nenapadlo, ze si mozem vygenerovat co bs ma obsahovat... dobre vediet.

Co sa tyka tych important veci - tak kedze mam vlastne media query v niektorych pripadoch, tak tam som to pouzival, a tiez som si definoval nejake UL ci odkazy a mnohe ine veci, co sa mi nechcelo zase vsetko menit v bootstrape, lebo editovat taky mega file v editore dost trvalo.

Ale ako som pisal, zredukoval som ho potom a v kombinacii s mojim css to funguje dobre.

chrono · Napísal **chrono**: 03.07.2015 16:57

Important je takmer vždy zbytočné, treba ale nedefinovať vlastné pravidlá, ktoré sú aspoň tak špecifické, ako tie v bootstrap (takže napr. ak oni definovali nejaký štýl pre li.big tak ten štýl sa nedá zmeniť len pomocou .big).

responzivny web

Podobné témy