Niezalogowany [ logowanie ]
Subskrybuj kanał ATOM Kanał ATOM    Subskrybuj kanał ATOM dla tagu css Kanał ATOM (tag: css)

Autor wpisu: zleek, dodany: 13.12.2016 09:00, tagi: css

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

Autor wpisu: cichy, dodany: 03.12.2016 06:25, tagi: css, javascript

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.

Autor wpisu: zleek, dodany: 18.05.2016 08:38, tagi: css, javascript

Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor. All

Autor wpisu: zleek, dodany: 05.01.2016 14:04, tagi: css

Usually we use quite plain structure of content on the website. Sometimes we have to point out some paragraphs on the website. If the structure is not complicated we can use unordered lists ul or ordered lists ol. Let’s think

Autor wpisu: batman, dodany: 08.10.2015 10:00, tagi: css, javascript

Odkąd kupiłem pierwszy „mądry” telefon, czas jaki spędzam przeglądając strony internetowe na urządzeniach mobilnych, mniej więcej dorównuje czasowi przeglądania sieci na komputerze. I już pierwszego dnia zauważyłem, że przeglądanie to jest dalekie od wygodnego. Pomijając fakt, że wiele serwisów nie potrafi/nie chce dostosować swoich stron do urządzeń mobilnych, małe komputerki po prostu nie radzą sobie ze skomplikowanymi stronami, upakowanymi licznymi skryptami, obrazkami i wideo. Problem ten dostrzegło Google i przygotowało Accelerated Mobile Pages. AMP jest nowym frameworkiem... [[ This is a content summary only. Visit my website for full links, other content, and more! ]]

Autor wpisu: zleek, dodany: 07.10.2015 14:09, tagi: css

If you have a dynamic content on your page, sometimes is the case to align this content vertically in the div container. As you know, this could be painful. However with this short CSS styling you can reach this goal

Autor wpisu: kicaj, dodany: 09.06.2015 22:51, tagi: css

Jako, że RWD stało się już standardem w projektowaniu stron, a budowanie stron na tabelkach jest już mocno nieprofesjonalne, to do prezentowania danych należy używać jednak tabel. Jak zatem zbudować tabelę aby była prawidłowo wyświetlana np. na telefonie? Rozwiązanie są co najmniej dwa, a istniejącej tabeli zasadniczo nie trzeba przebudowywać. Poniżej zaprezentuje dwa rozwiązania dla poniższej
Wszystkie wpisy należą do ich twórców. PHP.pl nie ponosi odpowiedzialności za treść wpisów.