Średni Szablony CSS

Elastyczne szablony CSS o średnim układzie dla zróżnicowanych kompozycji wizualnych

Stylizacja to warstwa, nad którą masz największą kontrolę w szablonie CSS. Kolory, wielkości liter i odstępy są wstępnie zdefiniowane w każdym projekcie. Dotyczy to również sposobu, w jaki bloki zmieniają swoje ułożenie na wąskich ekranach. Projekty w kolekcji Medium obejmują zarówno proste sekcje typograficzne, jak i układy wydarzeń oparte na dużych fotografiach, dlatego wczesne porównanie ich stylów pozwala uniknąć późniejszych poprawek.

Jak bardzo różnią się gotowe style

Większość decyzji wizualnych w tych projektach dzieli się na trzy kategorie:

1. Kolor nadaje główny nastrój. „Średni tekst z przyciskiem” stawia na czarny tekst na białym tle z pojedynczym niebieskim przyciskiem jako akcentem, podczas gdy Fashion & Music wypełnia pomarańczem całe sekcje.
2. Typografia w równym stopniu kształtuje charakter witryny. Pogrubione słowa w nagłówku „Średni tekst z przyciskiem” dodają wyrazistości bez konieczności wprowadzania dodatkowego koloru, a Fashion & Music wykorzystuje skondensowane nagłówki przypominające liternictwo plakatowe.
3. Karty pokazują, jak prezentowana jest powtarzalna treść. Modern Technology Devices umieszcza trzy białe karty z miękkimi cieniami wzdłuż dolnej krawędzi fioletowo-magentowego tła.

Kiedy zastępujesz materiały demonstracyjne

Krótki test z wykorzystaniem własnych materiałów pozwala sprawdzić, jak radzi sobie stylistyka szablonu:

1. Zastąp nagłówek demonstracyjny swoim najdłuższym tekstem. W „Średni tekst z przyciskiem” nagłówek łamiący się na trzy wiersze zmienia balans kompozycji, przez co wysokość linii oraz szerokość bloku tekstu mogą wymagać korekty.
2. Umieść własne zdjęcia pod tekstem. Białe litery, które są doskonale czytelne na zdjęciu demonstracyjnym w Fashion & Music, mogą zanikać na jasnym tle. Ciemniejsza nakładka lub jednolity pasek pod tekstem pomagają przywrócić odpowiednią czytelność.
3. Zmień paletę w Kolorach motywu. Elementy powiązane z kolorystyką motywu automatycznie przyjmą nową barwę, jednak przycisk przekolorowany ręcznie zachowa swój pierwotny odcień.
4. Przejdź przez tryby responsywne od dużych monitorów po ekrany smartfonów. Odstępy między kartami i rozmiary czcionek często wymagają w nich odrębnych wartości, a nakładanie się elementów w Modern Technology Devices wymaga szczególnej uwagi.

Rzędy kart mogą korzystać z CSS Grid lub Flexbox, a wybór ten decyduje o sposobie ich zawijania przy ograniczonej przestrzeni. W każdym trybie można osobno dostosować rozmiary oraz marginesy.

Własny CSS uzupełnia brakujące ustawienia

Standardowe elementy sterujące pozwalają na wprowadzenie większości zmian w kolorach, fontach i odstępach. Własny CSS pomaga dopracować detale, które nie posiadają gotowych opcji w panelu, na przykład wyrównać podziały wierszy w długim nagłówku. Nicepage obsługuje reguły niestandardowe dla pojedynczego elementu lub dla całej witryny. Reguły te mogą kolidować ze stylami domyślnymi, dlatego warto sprawdzić efekt w Podglądzie oraz ponownie na opublikowanej stronie. Odpowiednio dobrany projekt zachowuje przemyślany wygląd również wtedy, gdy Twoje nagłówki, zdjęcia i paleta barw zastąpią materiały demonstracyjne — nawet na wąskim ekranie telefonu.