Album Szablony CSS

Elastyczne szablony CSS dla albumów

Style decydują o odbiorze strony albumu na długo przed tym, jak ktokolwiek naciśnie odtwarzanie. Określają rozmiar okładki, zagęszczenie listy utworów oraz układ długich tytułów piosenek. Szablony CSS dla albumów zawierają te reguły w standardzie, dzięki czemu nowe wydanie wymaga jedynie dostosowania kilku wartości. Kolor akcentujący może pochodzić z grafiki okładki, a numery utworów i metadane mogą mieć bardziej stonowany odcień niż tytuły.

Budowanie siatki wokół okładki

Na szerokim ekranie CSS Grid umieszcza okładkę po lewej stronie, a szczegóły wydania po prawej. Flexbox sprawdza się w mniejszych wierszach, takich jak przyciski odsłuchu pod grafiką, które wymagają czytelnych stanów najechania i fokusu. Na telefonie kolumny łączą się w jedną, umieszczając okładkę na samej górze, a listę utworów poniżej tytułu.

Lista utworów wymaga kilku dedykowanych reguł:

1. Kolumny numeru, tytułu i czasu trwania zachowują wyrównanie czasów, nawet gdy strony winyla oznaczone są jako A1 lub B4.
2. Długie tytuły, często wydłużone przez dopiski o gościnnych wykonawcach w nawiasach, zawijają się do drugiego wiersza bez przesuwania czasu trwania.
3. Obramowanie, dodatkowy odstęp lub mniejszy krój pisma wyraźnie wskazują, gdzie kończy się ostatni utwór, a zaczynają opisy twórców.

Palety zaczerpnięte z każdej płyty

Każda płyta wnosi własną kolorystykę. Gdy paleta wydania jest zapisana w kilku zmiennych CSS, zremasterowane wznowienie wymaga jedynie zmiany tych wartości, a wszystkie powiązane reguły dostosowują się automatycznie. W Nicepage globalne Theme Colors pełnią podobną funkcję w całym projekcie. Typografia sprawdza się najlepiej na stałej skali, ze zdefiniowanymi stopniami dla tytułu albumu, nazwy wykonawcy i tytułów poszczególnych ścieżek.

Rzeczywiste katalogi obejmują również wydania odbiegające od standardowych proporcji:

1. Wydanie deluxe z dwudziestoma utworami, w którym odstępy między wierszami są mniejsze, aby lista nie przytłoczyła okładki.
2. Singiel z zaledwie trzema piosenkami, który wciąż powinien wyglądać kompletnie w tej samej siatce.
3. Wyjątkowo ciemne lub jasne okładki, które zmieniają kontrast tekstu umieszczonego bezpośrednio na grafice.

Trudne szerokości i wysokie okładki

Na tabletach układy albumów bywają ściśnięte, ponieważ dwie kolumny zmniejszają okładkę do rozmiaru miniatury. Punkt przerwania, który przenosi metadane pod okładkę, rozwiązuje ten problem. Grafiki kaset magnetofonowych są wyższe od tradycyjnego kwadratu, a stałe proporcje boków chronią kolumnę przed nienaturalnym rozciągnięciem. Funkcja Responsive Modes w Nicepage pozwala sprawdzić każdą szerokość przed publikacją wydania. Niezawodny szablon zachowuje tę samą hierarchię wizualną zarówno dla monochromatycznego wznowienia jazzowego, jak i neonowego albumu elektronicznego. W ramach jednego zestawu reguł krótkie EP i rozbudowany box set prezentują się równie naturalnie.