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


29 lipca 2013 / Michał Kortas


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

 


17 odpowiedzi na “Nazywam się Twitter Bootstrap 3 i niestety niczym nie zaskakuję”

  1. Miłosz Poręba pisze:

    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;)

  2. Mr.Mr pisze:

    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.

  3. Radek Suski pisze:

    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.

    • 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.

      • DMati pisze:

        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.

      • 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ę.

      • DMati pisze:

        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.

      • 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…

      • DMati pisze:

        „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 :)

      • Mr.Mr pisze:

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

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

      • Mr.Mr pisze:

        Hahaha! :) Ja niestety nie mam urlopu :P

  4. Piotr Nalepa pisze:

    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.

    • 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? ;)

  5. abra pisze:

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

  6. Darek pisze:

    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ć.

Pozostaw odpowiedź Mr.Mr Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *