Dziś wszystkie strony jakie powstają powinny być „responsywne” i wyświetlać się poprawnie na wszystkich urządzeniach począwszy od telewizorów / telebimów a na telefonach skończywszy. Takie podejście w 2016 roku nie powinno nikogo dziwić, jednak co ze starymi projektami, no cóż trzeba je przepisać według nowych zasad. Właśnie podczas pracy nad nową wersją jednego z projektów, którym zajmuje się w pracy, przyszło mi zmierzyć się z koniecznością użycia różnego kodu JavaScript w zależności od aktualnych styli używanych przez twitter bootstrap. W tym poście chciałbym przedstawić pokrótce jak można to osiągnąć za pomocą biblioteki Responsive Bootstrap Toolkit.
Biblioteka do której link umieściłem we wstępie jak sam jej opis mówi, jest narzędziem pozwalającym na łatwe kontrolowanie przepływu kodu JavaScript w zależności od aktualnie aktywnego „breakpointu”.
Można by zapytać czym w takim razie są owe breakpointy postaram się wyjaśnić to jak najdokładniej potrafię. Wyobraźmy sobie sytuację w której piszemy stronę internetową, jednak aby wyświetlała się ona poprawnie musimy mieć mechanizm pozwalający na ukrycie lub wyświetlenie niektórych elementów tylko i wyłącznie dla określonego rozmiaru ekranu, jest to naturalna potrzeba i większość frameworków CSS takich jak bootstrap taki mechanizm posiada.
Przykładowe breakpointy mogłyby wyglądać tak:
@media (max-width: 180px) {
.pokaz-dla-malych-urzadzen { display: block; }
.ukryte-na-malych-urzadzeniach { display: none; }
}
@media (min-width: 181px){
.pokaz-dla-malych-urzadzen { display: none; }
.ukryte-na-malych-urzadzeniach { display: block; }
}
podsumowując powyższy zapis oznacza, że dla ekranu o szerokości <=180 pikseli elementy z klasą pokaz-dla-malych-urzadzen mają ustawioną właściwość display na block dla ekranów o szerokości >=181 pikseli te same elementy będą ukryte (display:none) w zasadzie to cała teoria i magia owych breakpointów.
Przejdźmy zatem do rzeczy, co z kodem JavaScript, tutaj wkracza przytoczona przeze mnie biblioteka Responsive Bootstrap Toolkit.
Myślę że nie ma sensu rozwodzić się nad tym jak ta biblioteka działa, najważniejsze to stwierdzić o niej 2 zasadnicze rzeczy: po pierwsze biblioteka naprawdę działa, po drugie choć w nazwie biblioteki widnieje bootstrap to możemy jej używać z każdym frameworkiem CSS. Na stronie repozytorium, widnieją doskonałe przykłady tego jak biblioteki używać, więc uznałem, że nie ma sensu w przepisywaniu tego jeszcze raz.
Kanał ATOM
