Inne

Nazywam się Twitter Bootstrap 3 i niestety niczym nie zaskakuję

Od kilku dni mamy możliwość pobrania (chociaż właściwie już nie mamy, bo serwery Twittera zgłaszają błąd podczas próby ściągnięcia paczki) wersji Release Candidate, która jest już stabilnym fundamentem dla wydania wersji ostateczniej wersji znanego nam wszystkim frameworka Twitter Bootstrap. Niestety już na samym początku muszę powiedzieć, że Bootstrap 3 zawodzi, szczególnie pod kątem redesignu. Przyjrzałem się wprowadzonym zmianom i mogę szczerze stwierdzić, że najświeższe wydanie jest po prostu kiepskie. Co więcej, nie są to tylko moje spostrzeżenia.

Kiedy tylko przyjrzymy się dokumentacji, bez problemu zauważymy, że pod względem "kodu" dość sporo się zmieniło. Raczej to nie dobrze, bo będziemy zmuszeni do gruntownej przebudowy naszych aplikacji czy stron www w wypadku ewentualnej migracji frameworka. Główna, podstawowa struktura pozostała prawie bez zmian. Jedynym wyjątkiem jest opcjonalna możliwość dodania responsywnych elementów dla przeglądarki Internet Explorer 8. Zasadność tej praktyki pozostawię bez komentarza. Biorąc pod uwagę procentowy udział w rynku dla IE8 jest to kosmetyczne usprawnienie.

{source}
<pre xml:lang="html5">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;!– Bootstrap –&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;

    &lt;!– JavaScript plugins (requires jQuery) –&gt;
    &lt;script src=&quot;http://code.jquery.com/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;!– Include all compiled plugins (below), or include individual files as needed –&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

    &lt;!– Optionally enable responsive features in IE8 –&gt;
    &lt;script src=&quot;js/respond.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>
{/source}

Twitter Bootstrap nie wspiera starych przeglądarek. Jeżeli jednak koniecznie chcemy włączyć możliwie najstarszy tryb zgodności dla IE, powinniśmy w meta tagach witryny dodać następujący kod.

{source}
<pre xml:lang="html5">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</pre>
{/source}

Zestaw ikon Glyphicons

Ikony ze zbioru Glyphicons są nadal wykorzystywane. Pełny ich podgląd mamy na zdjęciu poniżej.

Grid system

Wydaję mi się, że największym zmianom został poddany grid system Bootstrapa. W dokumentacji widnieją nowe nazwy CSS‚owych klas. Wprawiły mnie one w lekkie zakłopotanie, jednak przy dłuższej zabawie nabrały one dość logicznego sensu. Nie zmienia to jednak faktu, że takowy ruch może wprowadzić sporo zamieszania i wymusić "przestawienie się" na nowe nazewnictwo. Więcej o Grid System przeczytacie w oficjalnej dokumentacji.

Typografia

Na szczęście wszelkie widoczne poprawki typograficznych elementów nie zostały wprowadzone. Możemy cieszyć się tekstem (przynajmniej w skompilowanej wersji) rodem z Twitter Bootstrap 2.3.2.

Formularze i buttony

Są to elementów, który osobiście podobają mi się najmniej. Wiem, że najświeższe trendy wyolbrzymiają większość elementów, jednak ogromne inputy tekstowe są po prostu mało poręczne. Drugą zmianą jest usunięcie wypukłości z kolorowych buttonów. O ile te w "starej" były całkiem ładne, w tej chwili stały się monotonne i jednokolorowe. Porównajcie sami.

JavaScript’owe dodatki

Te pozostały w większości bez zmian. Oczywiście poprawiono ich design, który jednym jak zwykle będzie się podobał, a innym już nie. Dla przykładu spójrzcie na nowy slider.

Podsumowanie

Kończąc ten niedługi wpis chciałbym zwrócić Wam również uwagę na ewidentny brak konsekwencji autorów Twitter Bootstrap. Z jednej strony idziemy w minimalizm (płaskie buttony), a z drugiej wciąż pozostawiamy cienie wielu elementów. Jak to razem się komponuje? Nijak.

Cienie - Twitter Bootstrap

Mam wciąż jednak nadzieję, że wraz z pojawieniem się kolejnej wersji Release Candidate kwestia wyglądu wielu elementów zostanie lepiej dopracowana. Tym czasem zapraszam Was do przejrzenia oficjalnej dokumentacji Twitter Botstrap 3 oraz podzielenia się z nami swoimi spostrzeżeniami. Jest lepiej? Gorzej? Zachęcam do dyskusji.

Bootstrap 2.3.2

Bootstrap 3

 

komentarzy 17

  • Awatar
    Miłosz Poręba

    29 lipca 2013 15:59

    Też nie jestem przekonany do nowej wersji… No ale cóż, żeby było lepiej czasem musi być przez chwilę gorzej i miejmy nadzieję że to chwilowe;)

    Odpowiedz
  • Awatar
    Mr.Mr

    29 lipca 2013 16:00

    Teraz generalnie webdesign idzie w stronę tego tzw. „flat design’u”. Ludziom od Twittera coś mogło nie wyjść… a szkoda bo takie wizualne wpadki psują całość pomysłu.

    Odpowiedz
  • Awatar
    Radek Suski

    29 lipca 2013 16:20

    Bootstrap implementuje flat design co w moim przekonaniu w przypadku stron internetowych niekoniecznie ma sens.
    Jak się nie mylę to nie wszystko co było w 2.3 jest także w 3. Nie widzę na przykład „typeahead” w dziale JavaScript.

    Zmiana nazw klas nawet jeśli być może ma sens jest dobijająca i praktycznie uniemożliwia aktualzację do tej wersji.
    Chyba że ktoś sobie zada trud i przekompiluje pliki LESS przywracając poprzednie nazewnictwo.

    Odpowiedz
    • Awatar
      Michał Kortas

      29 lipca 2013 18:12

      Dokładnie Radek. Niestety z „trójki” jest bardzo mało pożytku w przypadku przesiadki ze starszej wersji… A flat design.. Hmm, jeżeli jest dobrze zrobiony to mi się podoba. W Bootstrap 3 raczej skopali ten element.

      Odpowiedz
      • Awatar
        DMati

        30 lipca 2013 22:56

        W moim mniemaniu nie skopali. Wyszło coś pomiędzy kompletnym flat a tym co było wcześniej. Efekt końcowy jest o niebo lepszy od tego co zaoferował np: Foundation.

        Odpowiedz
      • Awatar
        Michał Kortas

        31 lipca 2013 19:30

        Dziękuję za komentarz. Zależy jednak na co patrzeć. Każdy z frameworków oferuje coś bardziej dopracowanego niż u innych. Ostatnio po namowach znajomego zainteresowałem się własnie grid’em Foundation i muszę powiedzieć, że przebija Bootstrapa o głowę.

        Odpowiedz
      • Awatar
        DMati

        31 lipca 2013 22:06

        A u mnie na odwrót. Przez dłuższy czas Foundation, rozeznanie w Bootstrapie i wybranie do dalszej pracy tego drugiego. Brakuje mi jedynie gotowych przykładowych szkieletów jakie ZURB dodał do Foundation, kopiuj/wklej i wuala.

        Odpowiedz
      • Awatar
        Michał Kortas

        31 lipca 2013 22:12

        Czyli wiele zależy i tak od indywidualnych predyspozycji. Co do gotowców Bootstrap’a… Faktyczne, nie licząc kilku przykładowych mini-stron, brakuje przykładów. A może to okazja, aby samemu przygotować coś takiego dla szerszej społeczności? Hmm…

        Odpowiedz
      • Awatar
        DMati

        1 sierpnia 2013 10:01

        „A może to okazja, aby samemu przygotować coś takiego dla szerszej społeczności? Hmm…”

        No ba! Takie gotowe układy/szkielety Bootstrapa jak ma Foundation w dokumentacji mile widziane :)

        Odpowiedz
      • Awatar
        Mr.Mr

        1 sierpnia 2013 10:32

        Bomba :) ale pamiętasz jak chcieliśmy zrobić coś własnego w ramach webroad? :P

        Odpowiedz
      • Awatar
        Michał Kortas

        1 sierpnia 2013 10:49

        Taaak, ale tu mamy już gotowy framework :D Tak czy inaczej, mam urlop, to może coś zacznę dłubać… :)

        Odpowiedz
      • Awatar
        Mr.Mr

        1 sierpnia 2013 10:59

        Hahaha! :) Ja niestety nie mam urlopu :P

        Odpowiedz
  • Awatar
    Piotr Nalepa

    29 lipca 2013 18:39

    Należy pamiętać o tym czym jest Bootstrap (przynajmniej w założeniach). On ma być narzędziem do prototypowania interfejsu i funkcjonalności stron WWW, a nie gotowcem dla stron WWW.

    Odpowiedz
    • Awatar
      Michał Kortas

      29 lipca 2013 18:45

      Piotrek, święta racja, chociaż sam często i gęsto wykorzystuję go jako fundament strony (głównie grid). Tak czy inaczej można zauważyć, że 30% (strzelam) nowych stron to Bootstrap, który zabija myślenie podczas projektowania stron.

      PS co jest złego w tytule, bo nie mogę się doszukać literówki? ;)

      Odpowiedz
      • Awatar
        Piotr Nalepa

        29 lipca 2013 18:58

        Nic nie ma złego w tytule. To ja źle przeczytałem go (chyba ten upał) i wyedytowałem komentarz ;)

        Odpowiedz
  • Awatar
    abra

    20 sierpnia 2013 11:49

    „monotonne i jednokolorowe”? Chyba ktoś nie za bardzo śledzi ostatnie trendy w projektowaniu..

    Odpowiedz
  • Awatar
    Darek

    8 czerwca 2014 18:00

    Wygląd to kwestia gustu. Jednemu podoba się to, innemu tamto. Ani jedno nie jest złe, ani drugie. Dlatego o gustach nie bardzo jest sens dyskutować.

    Odpowiedz

Zostaw odpowiedź