Świeże zasoby dla projektantów stron internetowych i programistów (luty 2016 r.)

Rok 2015 był wspaniałym rokiem dla internetu: technologie internetowe były przyjęty w wielu aspektach poza budowaniem strony internetowej lub aplikacji internetowej. Wiele aplikacji mobilnych i desktopowych jest teraz zbudowanych przy użyciu HTML, CSS i JavaScript. Jest to możliwe dzięki przenośności technologii internetowych i bibliotek, takich jak React.js, Angular i Node.js.

Tak więc w dzisiejszej odsłonie tej serii zebraliśmy garść bibliotek JavaScript i CSS.

Kliknij, aby uzyskać więcej zasobów

Znajdź całą naszą kolekcję zalecanych zasobów oraz najlepsze dostępne narzędzia do projektowania i tworzenia stron internetowych.

Płaski suwak

jQuery UI zawiera zbiór wspólnego interfejsu internetowego, w tym suwak - interfejs użytkownika, który umożliwia użytkownikowi wybór zakresu wartości liczbowych. The Płaski suwak to narzędzie internetowe, które sprawia, że dostosowywanie stylu interfejsu użytkownika JQUery, który kiedyś był bardzo trudnym zadaniem, teraz jest dużo łatwiejsze.

Narzędzie typu otwartego

Narzędzie typu otwartego to zbiór klas rozwijanych do zastosuj zaawansowane funkcje typograficzne CSS takie ligatury czcionek, mała litera i wiele więcej. Zasadniczo dają one najlepsze możliwe wrażenia czytelnikom z najdrobniejszymi szczegółami. Ładnie rozkłada się na starsze, nieobsługiwane przeglądarki.

ResponsifyJS

Jedną z powszechnie znanych twarzy reagujących na ograniczenia jest zazwyczaj prawidłowe skalowanie obrazu, ale zmienia to główny punkt ogniskowania obrazu, gdy jest on skalowany do bardzo małego rozmiaru rzutni.

ResponsifyJS jest lekką biblioteką JavaScript, z której możesz korzystać ustaw współrzędne, aby utrzymać ostrość obrazu podczas zmiany rozmiaru.

Liniowy

Liniowy to aplikacja linijki dla komputerów Mac. Możesz użyć linijki do pomiaru stron internetowych, dowiedzieć się, jaki jest rozmiar elementu bez konieczności otwierania DevTools lub dowiedzieć się, czy element jest idealnie wyśrodkowany. Możesz mieć wiele linijek i przełączyć jednostkę z PX na EM.

StickyStack

StickyStack jest wtyczką jQuery, która tworzy doświadczenie przewijania stosu, gdy panel dociera do górnej krawędzi rzutni, przywiera tam, podczas gdy kolejne przewijanie powoduje przejście do następnego panelu. Jest to lekka wtyczka z kilkoma opcjami konfiguracji kontenera strony, sekcji stosu, a także cienia stosów. Sprawdź demo.

Widz

Widz jest wtyczką jQuery do lightboxa obrazu - popularnego popularnego sposobu powiększania obrazów w Internecie. Wtyczka jest wyposażona w przytłaczające opcje, które pozwalają na dostosuj każdy element lightbox berło.

Wtyczka zapewnia także zestaw interfejsów API i niestandardowych zdarzeń, które zapewniają pełną kontrolę nad lightbox reakcja i zachowanie. Co więcej, działa do Internet Explorer 8.

DeviceMock

DeviceMock to biblioteka JavaScript, która pozwala na tworzyć ramki lub makiety urządzeń takie jak telefon, tablet i komputer stacjonarny. Podobnie biblioteka udostępnia opcje ustawiania koloru motywu ramki, rozmiaru oraz orientacji ramki.

Może to być dobra alternatywa, aby zaprezentować swoją sieć i aplikację zamiast Photoshopa.

Clrs

Clrs jest inicjatywą zmień domyślne kolory internetowe na bardziej przyjazne dla oka, nowoczesne odcienie kolorów. Ponadto zaleca zestaw kombinacji kolorów dla lepszej dostępności. Możesz wdrożyć te kolory za pomocą NPM, Gem (Ruby) oraz próbek kolorów Photoshop i Illustrator.

Colorify

Colorify to super lekka biblioteka JavaScript (min. 3 KB) wyodrębnić dominujące kolory z obrazu za pomocą mnóstwo interfejsów API do manipulowania kolorami. Możesz użyć wyodrębnionego koloru jako symbolu zastępczego podczas oczekiwania na całkowite załadowanie obrazu, wygenerowania tła gradientu lub dostosowania sąsiedniego interfejsu w celu uzyskania koloru obrazu.

BookBlock

BookBlock to jest wtyczka jQuery do utwórz broszurę z efektem odwracania strony. Jest to piękna alternatywa, aby wyświetlić wiele obrazów na swojej stronie internetowej, szczególnie jeśli jest sekwencja lub przepływ, który chcesz zaprezentować.

Możesz sprawdzić demo tutaj, aby dowiedzieć się, jak działa BookBlock.