Szablony CSS dla półek na książki, które zachowują spójność

Półka z okładkami wygląda schludnie tylko wtedy, gdy stylizacja ją scala. Skany w twardej oprawie, zdjęcia w miękkiej oprawie i stare wydania nigdy nie występują w tym samym rozmiarze, a szablon półki musi je pomieścić w jednej ramce, a jednocześnie zapewnić czytelność tytułów i nazwisk autorów pod spodem.

Grafika na okładkach pojawia się w nierównych proporcjach

Obrazy książek rzadko mają takie same proporcje. Przedruk może być niski, tom grafik prawie kwadratowy, a skan klasycznego dzieła przycięty u góry. Jednakowe rozmiary kartek nie dają jednakowych okładek, a ta przerwa sprawia, że półka wygląda nieporządnie. Stały „proporcje” na okładce, z regułą „dopasowania obiektu”, która pozwala obrazowi wypełnić cały obszar, utrzymuje każdą kartę na tej samej wysokości i przycina grafikę na krawędziach, zamiast ją rozciągać.

Długie tytuły powodują kolejne rozbieżności. Dwa wiersze tekstu pod jedną okładką i cztery pod kolejną przesuwają nazwiska autorów na różne wysokości w całym rzędzie.

Kilka decyzji stylistycznych odpowiada za większość wizualnego obciążenia kolekcji książek:

• stały stosunek powierzchni okładki, dzięki czemu niski reprint i wysoki tom ilustracyjny zajmują tyle samo miejsca;
• limit wierszy w tytułach, który utrzymuje wiersz autora na jednej wysokości na każdej karcie;
• duże odstępy między grupami, dzięki czemu nowości i propozycje redakcji czytają się jak oddzielne półki;
• stan najechania kursorem, który wyświetla ocenę lub jeden wiersz streszczenia.

Nicepage obsługuje większość tych funkcji w swoich elementach sterowania wizualnego, a element Siatka ustawia kolumny i odstępy.

Kolumny Siatki Zmniejszają Się na Wąskich Ekranach

Szeroki ekran wygodnie mieści długi rząd okładek. Ten sam rząd na telefonie zazwyczaj mieści się w jednej lub dwóch kolumnach, a to, co dzieje się pomiędzy tymi skrajnościami, warto sprawdzić w każdym trybie responsywnym.

Utrzymuj okładkę, tytuł i autora czytelnymi na każdej szerokości. Etykiety gatunków i notatki o wydaniach mogą być mniejsze na małych ekranach, ponieważ czytelnik przeglądający półkę na telefonie najpierw patrzy na grafikę. Biblioteka osobista uchodzi za bardziej zagęszczoną niż wybór w księgarni, gdzie każda okładka jest jednocześnie produktem.

Reguły niestandardowe dla pojedynczej półki

Czasami jedna grupa potrzebuje tego, czego nie oferują standardowe elementy sterujące, na przykład złotego konturu dla zwycięzców nagród. Nicepage obsługuje niestandardowe elementy sterujące CSS dla pojedynczego elementu, pojedynczej strony lub całej witryny, co eliminuje takie wyjątki.

Ocena szablonu na podstawie jego najbardziej zajętej półki powie Ci więcej niż ekran główny wersji demonstracyjnej. Wczytaj go z najdłuższym tytułem, najgorszym skanem okładki i największą opublikowaną grupą, a następnie sprawdź, czy wiersze nadal się zgadzają.