Szablony CSS dla siatek talentów i kart profilowych

Odstępy, proporcje obrazów i stany wizualne decydują o tym, czy lista będzie wyglądać jak pojedynczy zestaw kart, czy jak stos niedopasowanych profili. Szablony CSS dla talentów są dostarczane z gotowymi zasadami, pozostawiając wartości otwarte. Trzykolumnowa siatka kart wykonawców wygląda przekonująco w wersji demonstracyjnej, dopóki jedna karta nie będzie zawierała długiej listy osiągnięć, a kolejna karty będzie miała tylko dwie linijki.

Stylizacja kart o nierównej treści

Żadne dwa profile talentów nie mają takiej samej wagi, a styl musi i tak sprawić, by lista wyglądała jak jeden zestaw. Cztery zasady wykonują większość tej pracy:

• Stałe proporcje obrazu w obszarze zdjęcia portretowego. Pionowe portrety studyjne i szersze zdjęcia wypełniają to samo miejsce, a kadrowanie pozostaje przewidywalne w dół strony.
• Skala czcionek, która klasyfikuje kartę. Nazwisko wykonawcy znajduje się na górze, rola lub specjalizacja stopień niżej, a linijka z osiągnięciami jest jeszcze cichsza. - Odstępy, które przetrwają zagęszczenie. Szerokości kart, odstępy między liniami siatki i wewnętrzne wypełnienia utrzymują wiersz razem, gdy jeden profil jest długi, a limit wierszy w biografii zapobiega rozciągnięciu gadatliwej karty przed rozciągnięciem wszystkiego, co znajduje się obok.
• Stany najechania kursorem i fokusowania. Wyróżniona karta zazwyczaj musi wyglądać inaczej niż wiersz, w którym się znajduje.

Punkty przerwania i wyjątki lokalne

Liczba kolumn to najłatwiejsza połowa responsywnej pracy: cztery na szerokim ekranie, dwie na tablecie, jedna na telefonie. To, co w wąskim układzie pozostaje na górze, ma większe znaczenie, dlatego portret, nazwa i akcja kontaktu znajdują się nad długą listą napisów końcowych, z mniejszym współczynnikiem proporcji obrazu i mniejszymi odstępami na urządzeniach mobilnych.

Nicepage rozwiązuje ten problem dzięki trybom responsywnym, od dużych ekranów po telefony w orientacji pionowej, oraz dzięki niestandardowemu kodowi CSS, który dotyczy pojedynczego elementu, pojedynczej strony lub całej witryny. Funkcja „Eksportuj minimalny CSS na stronę” ogranicza opublikowany arkusz stylów do reguł faktycznie używanych przez stronę.

CSS określa wygląd listy, gdy ktoś ją przewija. Zanim zatwierdzisz, wypróbuj szablon o największej gęstości, z najdłuższą listą autorów, jaką publikujesz, i najszerszym kadrem w swojej bibliotece. Jeśli siatka nadal wyświetla się tam poprawnie, będzie się tak zachowywać wraz ze wzrostem listy.