50 przydatnych narzędzi do projektowania stron internetowych dla projektantów
Przez ostatnie kilka dni pokazaliśmy Ci niektóre z najlepszych motywów WordPress i Joomla, które możesz pobrać i używać na swojej stronie. Dzisiaj damy ci narzędzia. Są to frameworki, usługi i skrypty do pobrania, uważamy, że będą świetną pomocą, jeśli chodzi o responsywne tworzenie stron internetowych.
Aby ułatwić przechodzenie przez całą listę narzędzi, podzieliliśmy je na następujące sekcje:
- Siatki i ramy
- Arkusze szkiców i szkielety
- Wtyczki JavaScript i jQuery
- Testowanie i podgląd
- Suwaki
- Inni
Siatki i ramy
[Powrót do góry]
Columnal
Columnal to projekt Pulp + Pixels, który został zapożyczony z cssgrid.net, podczas gdy niektóre inspiracje kodem zostały zaczerpnięte z 960.gs. Columnal bardzo pomaga w elastycznym projektowaniu stron internetowych, dzięki czemu siatki zmieniają się dynamicznie po zmianie rozmiaru okna przeglądarki.
Szkielet
Skeleton to prosty i wydajny framework CSS, który jest lubiany przez programistów i projektantów ze względu na jego prostotę i wydajność. Tu nie ma ciężkiego podnoszenia Javascript, tylko dobry i czysty CSS z czystą dokumentacją.
LessFramework 4
Less Framework jest mniej więcej ramą, w imię jej twórcy. Jest to adaptacyjny system gridowy CSS oparty na wykorzystaniu wbudowanych zapytań o media CSS, co znacznie ułatwia tworzenie responsywnych stron internetowych.
System siatki semantycznej
System siatki semantycznej służy do projektowania responsywnych układów siatki. Wykorzystuje wstępnie przetworzone rozszerzenia CSS, takie jak LESS, SCSS lub Stylus, aby zapewnić maksymalną wydajność. Możesz wybrać szerokość kolumny i rynny, wybrać liczbę kolumn i przełączać między pikselami a procentami.
Złoty system siatki
Golden Grid System to system sieci płynnych, który służy jako punkt wyjścia do szybkiego projektowania stron internetowych. Umożliwia stronie internetowej wyświetlanie dobrze wyglądających stron w zakresie od 240 do 2560 pikseli.
320 i wyżej
320 and Up to szablon zapytań o media CSS, który służy jako szablon początkowy dla responsywnego projektu. Jest to podejście całkowicie odwrotne niż kilka innych dostępnych kotłów.
Inuit.css
Inuit.css to framework CSS, który jest niezwykle łatwy w użyciu, nawet dla nowicjuszy. Ma podejście minimalistyczne, więc musisz sobie radzić tylko z rzeczami, które są potrzebne, ale w razie potrzeby można je rozszerzyć za pomocą kilku dostępnych wtyczek.
Gridless
Gridless to podstawa do tworzenia responsywnych i przekrojowych witryn internetowych z piękną typografią. Narzędzie to koncentruje się na stopniowym rozwoju projektu i służy jako punkt wyjścia dla każdego projektu.
1140 CSS Grid
1140 CSS Grid to świetny system siatki CSS zaprojektowany przez projektanta Melbourne Andy'ego Taylora, który pozwala idealnie dopasować projekt do rozmiaru 1140 pikseli w przypadku dużych monitorów, a układ płynów bezproblemowo dostosuje się do innych mniejszych rozdzielczości..
1KBCSSGrid
1KB CSS Grid zaprojektowany przez Tylera Tate, jest prostym i lekkim generatorem siatki CSS. Pozwoli ci to ustawić liczbę kolumn, szerokość kolumn i szerokość rynny, a także zdobyć CSS do pobrania dla swojej siatki stron.
Bootstrap
Bootstrap, stworzony i utrzymywany przez Marka Otto i Jacoba Thorntona na Twitterze, to doskonały zestaw elementów interfejsu użytkownika, układów i narzędzi javascript, dostępnych bezpłatnie do pobrania i wykorzystania w projektach internetowych.
Fluid Grid Calculator
To proste narzędzie pomoże Ci szybko pobrać CSS z projektu strony sieci płynów.
Płynne siatki
Fluid Grid to prosta, ale użyteczna struktura siatki płynnej, która tworzy responsywne układy oparte na 6, 7, 8, 9, 10, 12 lub 16 kolumnach.
Flurid
Flurid to prosta i bardzo użyteczna struktura siatki CSS z wieloma przeglądarkami z maksymalnie 16 kolumnami. Ponadto nie ukrywa pikseli na marginesach.
Gridset
Gridset to narzędzie do tworzenia siatek dowolnego typu, takich jak kolumna, asymetryczny, stały, stosunek, złożony, reagujący i więcej. To narzędzie Marka Boultona jest nadal w fazie beta, ale okazuje się obiecujące. I czy wspomniałem, używanie go jest tak proste, jak osadzenie linku.
Gridpak
Gridpak jest internetowym generatorem siatki, w którym można zmieniać liczbę kolumn, dopełnienie i rynnę, a także dodawać niestandardowe punkty przerwania. CSS jest generowany przez narzędzie i gotowy do pobrania. Udostępnia także szablony siatki PNG, które można wykorzystać do projektowania w programie Photoshop.
SimpleGrid
SimpleGrid, opracowany przez Michaela Kuhna, jest bardzo prostym i prostym frameworkiem CSS do tworzenia nieskończonych układów opartych na siatce. Domyślnie SimpleGrid jest przygotowany na 4 różne zakresy rozmiarów ekranu.
Susy
Susy by Oddbird jest podobna w działaniu do systemu siatki semantycznej. Nie używa żadnych dodatkowych znaczników ani żadnych innych specjalnych klas, ale jest skierowany tylko do użytkowników Saas i jego rozszerzenia Compass.
Tiny Fluid Grid
Tiny Fluid Grid to niesamowita aplikacja internetowa, która może pomóc w interaktywnym określeniu systemu grid Twojej witryny. Możesz ustawić liczbę kolumn, procent rynny, minimalną i maksymalną szerokość układu witryny i uzyskać dla niej CSS do pobrania.
Zmienny system siatki
System Variable Grid został zaprojektowany i opracowany przez SprySoft i jest oparty na systemie 960 Grid System. Pozwala programistom i projektantom wygenerować niestandardową siatkę, a następnie pobrać dołączony plik CSS oparty na tej siatce.
Arkusze szkiców i szkielety
[Powrót do góry]
Responsywne arkusze szkiców do projektowania stron internetowych
To narzędzie jest przydatne w mapowaniu rozmieszczenia różnych elementów w układzie witryny na różnych urządzeniach. Z pomocą tego urządzenia możesz stworzyć pomysł, gdzie umieścić niezbędne elementy strony internetowej dla różnych rozmiarów i rozdzielczości ekranu.
Elastyczne modele szkieletowe
Responsive Wireframes to eksperymentalne narzędzie stworzone przez Jamesa Mellersa z Adobe. Jest zbudowany tylko z HTML i CSS (bez użycia obrazów lub JS), które można wykorzystać do wizualizacji, jak wyglądałby Twój responsywny projekt na rzeczywistych przeglądarkach różnych komputerów i urządzeń mobilnych.
StyleTiles
Kafelki stylów pozwalają rozwinąć wyobrażenie o tym, jak wyglądałaby strona internetowa, niezależnie od skomplikowanych stylów, które wchodzą w grę. Daje to możliwość perfekcyjnego reagowania na zadania projektowe, a także możliwość integracji informacji zwrotnych od klientów.
Wtyczki JavaScript i jQuery
[Powrót do góry]
Adapt.Js
Adapt.js jest rozwiązaniem Javascript i doskonałą alternatywą dla zapytań o media CSS. Korzystanie z podejścia @media jest dobrą praktyką, ale nie działa dla wszystkich przeglądarek. Nathan Smith, twórca 960 Grid System, wydał Adapt.js, bardzo lekką bibliotekę javascript, aby rozwiązać ten problem.
Izotop
Isotope to niesamowita wtyczka jQuery, która okazuje się bardzo przydatna podczas projektowania responsywnego projektu. Pomaga to nie tylko zmienić rozmieszczenie elementów strony po zmianie rozmiaru okna przeglądarki lub zmniejszyć rozmiar ekranu, ale także pomaga filtrować te elementy.
Kamieniarstwo
Masonry to doskonała wtyczka jQuery, która służy do tworzenia dynamicznych i adaptacyjnych układów. Ta wtyczka pomaga zmienić elementy w responsywnym projekcie, dzięki czemu mogą lepiej pasować do otwartych miejsc na siatce.
Respond.js
Respond.js to szybki i lekki (min. 3 Kb i gzipowany 1 Kb) skrypt, którego głównym celem jest umożliwienie responsywnego projektowania stron internetowych w tych, które nie obsługują zapytań Media CSS3, takich jak przeglądarki IE.
TinyNav.js
TinyNav.js to mała i lekka wtyczka jQuery, mająca tylko 362 bajty, która przekształca duże listy nawigacyjne w małe menu rozwijane dla mniejszych ekranów.
Wookmark jQuery Plugin
Wookmark to wtyczka jQuery, która wykrywa rozmiar okna przeglądarki i automatycznie układa elementy strony w kolumny. Możesz również zobaczyć podgląd na żywo na dole strony.
Testowanie i podgląd
[Powrót do góry]
ProtoFluid
ProtoFluid to internetowe narzędzie do prototypowania, które umożliwia testowanie prototypów witryny w różnych rozmiarach i rozdzielczościach. Wystarczy wpisać adres URL, wybrać urządzenie (lub dowolne niestandardowe wymiary) i nacisnąć start. Ponieważ jest to narzędzie internetowe, pozwala także korzystać z innych rozszerzeń, takich jak FireBug.
Responsive.Is
Responsive.Is jest stworzony przez inne narzędzie emulatora przeglądarki TypeCast, którego możesz użyć do przetestowania swojego responsywnego projektu. Po prostu wpisz adres URL, który automatycznie zmieni jego rozmiar w zależności od wybranego urządzenia.
Responsivepx.Com
ResponsivePx to niesamowite narzędzie do testowania responsywnego projektu strony internetowej. Główną cechą, która odróżnia ją od innych, jest możliwość zmiany rozmiaru piksela na piksel. Ta niesamowita funkcja pozwoli ci zidentyfikować punkty przerwania, a także przetestować, w jaki sposób zapytania o media CSS działają w Twojej witrynie.
Responsive Web Design Testing Tool
Wspaniałe narzędzie do testowania, które umożliwia jednoczesne wyświetlanie responsywnej strony internetowej w różnych rozmiarach ekranu na jednym ekranie, podczas ich tworzenia lub projektowania. Lubię to narzędzie głównie dlatego, że pokazuje wszystkie rozdzielczości ekranu obok siebie, co ułatwia debugowanie.
ReView.Js
ReView to dynamiczny system wyświetlania, opracowany w czystym języku JavaScript, który zapewnia fantastyczne wrażenia podczas przeglądania responsywnego projektu sieci Web.
Screenfly
Screenfly by QuirkTools, to niesamowite narzędzie, które umożliwi Ci wyświetlanie responsywnej strony internetowej na różnych urządzeniach: Desktop, Tablet, Mobile i TV. Posiada również opcje włączania lub wyłączania przewijania lub nawet obracania wyświetlacza.
Screenqueri.es
Screenqueri.es to doskonałe narzędzie do testowania projektów, dostosowane do pikseli. Wystarczy wpisać dowolny adres strony internetowej, którą chcesz sprawdzić, a to narzędzie wyświetli stronę w różnych rozmiarach ekranu zgodnie z urządzeniem. Można również ręcznie zmienić rozmiar piksela po pikselu, aby zidentyfikować punkty przerwania.
The Responsinator
Przetestuj swoją witrynę w różnych urządzeniach, od iPhone'a i iPada, przez Kindle i na Androidzie w Responsinator. Pokazuje także Twoją witrynę zarówno w trybie pionowym, jak i poziomym. Lubię to narzędzie o wiele bardziej ze względu na zarysy urządzeń wyświetlanych na stronie, co przynosi więcej znaczenia dla całego procesu.
Suwaki
[Powrót do góry]
Borówka amerykańska
Blueberry to fantastyczny suwak obrazu jQuery o otwartym kodzie źródłowym, napisany specjalnie pod kątem płynnych lub responsywnych układów.
Elastislide
Chcesz karuzelę, która automatycznie dostosuje się do rozmiaru ekranu po zmianie rozmiaru okna przeglądarki lub gdy jesteś na mniejszym ekranie? Elastislide to najbardziej odpowiednia wtyczka jQuery do Twoich potrzeb.
Elastyczny suwak CSS3
Jest to czysty reagujący suwak CSS3, który z łatwością dostosowuje się do dowolnego rozmiaru ekranu i rozdzielczości ekranu. Dobrą rzeczą tego suwaka jest to, że strzałki przechodzą do wnętrza pudełka, gdy rozmiar ekranu urządzenia jest wystarczająco mały. Nie jest potrzebny JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js to bardzo prosta i niezwykle lekka (tylko 1Kb) wtyczka jQuery, która tworzy responsywny suwak za pomocą nieuporządkowanych list. Działa na wielu przeglądarkach, także na IE6 i nowszych.
Inni
[Powrót do góry]
Obrazy adaptacyjne
Adaptive Images to internetowe narzędzie do responsywnego projektowania stron internetowych, które wykrywa rozmiar ekranu odwiedzających i tworzy, buforuje i dostarcza przeskalowane obrazy w oparciu o rozmiar ekranu i rozdzielczość.
FitText.Js
FitText.js to małe narzędzie javascript, które umożliwia automatyczną zmianę rozmiaru tekstu i nagłówków po zmianie rozmiaru okna przeglądarki. Nigdy więcej obaw o niedopasowanie rozmiaru tekstu z tym narzędziem na pokładzie.
FitVid.Js
Chcesz przeskalować osadzone filmy, gdy zmienia się okno przeglądarki lub urządzenie ma mniejszą rozdzielczość? FitVid.Js może pomóc Ci to osiągnąć. Jest to lekka, prosta, łatwa w użyciu wtyczka jQuery używana do uzyskiwania filmów z osadzoną szerokością płynów.
Obrazy siatkówki
Retina Images to niesamowite rozwiązanie javascript, które automatycznie wyświetla @ 2X większe obrazy o wysokiej rozdzielczości podczas oglądania na wyświetlaczu siatkówki. Wszystko, co musisz zrobić, to umieścić każdą pojedynczą wersję w wysokiej rozdzielczości i zajmie się resztą.
Bezproblemowa reagująca siatka zdjęć
Seamless Responsive Photo Grid wyświetla obrazy od brzegu do krawędzi w przeglądarce, bez przerw między obrazami. Zdjęcia są kafelkowane i przepływają od lewej do prawej strony w kolumnach. Liczba kolumn dostosowuje się odpowiednio do zmiany rozmiaru okna przeglądarki.
SlabText
SlabText to wtyczka lub narzędzie jQuery autorstwa Briana McAllistera oparte na algorytmie slabText, który dzieli nagłówki na wiersze przed zmianą rozmiaru każdego wiersza, aby wypełnić dostępną przestrzeń. Jest podobny do wtyczki FitText.Js w akcji.
Zurb - Tabele responsywne
Czy zastanawiałeś się kiedyś, jak poradzić sobie z dużymi tabelami danych w responsywnym projekcie? Zurb, kombi CSS / JS daje odpowiedź; pobiera tabele danych i modyfikuje je, aby nie łamały układu responsywnego na urządzeniach z mniejszym ekranem.
Categorizr
Categorizr to bardzo mały skrypt PHP, zapewniający odwiedzającym bardziej ukierunkowane wrażenia internetowe. Pomoże Ci dostarczać projekty specyficzne dla urządzenia dla tabletu, telewizora, telefonu komórkowego lub komputera stacjonarnego.
Zakładka Media Query
Media Query Bookmarklet pokazuje, jaki rozmiar ma bieżąca rzutnia i jakie zapytanie o media zostało właśnie uruchomione.
Responsive Calculator
Responsive Calculator to bardzo proste narzędzie online, które może pomóc w przekształcaniu pikseli w procenty podczas projektowania responsywnej strony internetowej.
Do następnego tygodnia
W drugim tygodniu tej serii przygotujemy dla Ciebie samouczki, które naprawdę wprowadzą Cię w Responsive Web Design (RWD).
Nie przegap tego.
