Pisałam ostatnio o tym jak można edytować projekt zdalnie, jednak doskonale wiem, że to nie jest najlepsze rozwiązanie i o wiele lepiej jest pracować na lokalnym serwerze a dopiero ukończoną wersję umieszczać na serwerze produkcyjnym. Do pracy na serwerze lokalnym potrzebny jest pakiet oprogramowania zwany w skrócie LAMP. L jak Linux A jak Apache (serwer […]

Today I have found an interesting code snippet with changing layout of radio buttons using only css. Snippet is available on codepen. All code and view is available on the codepen. However I put a code snippets here in case

Dobrych kilka lat temu, lubiłem zaglądać na polskie strony poświęcone tzw. współczesnym technologiom, ponieważ oferowały one coś więcej niż suche fakty i oderwane od rzeczywistości „testy”. Dosyć często można było znaleźć rzeczowa opinię, kompletny test usługi, wartościowe komentarze do opisywanej usługi. Taki stan rzeczy utrzymywał się dosyć długo i spośród dostępnych źródeł informacji na temat nowych technologii, miałem co najmniej kilkanaście polskich. Do czasu. W mediach tzw. mainstreamu zaobserwowałem to już dawno i liczyłem, że nigdy nie trafi do blogów o tematyce IT.... [[ This is a content summary only. Visit my website for full links, other content, and more! ]]

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.