EFFORT_LESS

REM SETTINGS

REM — jednostka względna w CSS, która pomaga tworzyć bardziej dostępne oraz skalowalne strony internetowe. Odnosi się do wartości rozmiaru czcionki w elemencie HTML, która jest pobierana z głównych ustawień rozmiaru czcionki przeglądarki. Domyślnie wartość ta wynosi 16px.

Przykład zapisu w CSS:

W EFFORT_LESS domyślny font-size dla elementu HTML w CSS został ustawiony na 62.5%. Dzięki temu domyślna wielkość czcionki wynosi teraz 10px (zamiast standardowych 16px).

Korzyści tej zmiany:

Łatwiejsze przeliczanie jednostek REM oraz czytelniejszy kod. Zamiast przeliczać wielkości, możesz wpisać wartość w rem jako dziesiętne odpowiedniki pikseli, np.:
font-size: 16px → font-size: 1.6rem font-size: 24px → font-size: 2.4rem max-width: 1440px → max-width: 144rem padding: 48px → padding: 4.8rem
Możliwość ustawienia domyślnegofont-size na body na 1.6rem lub inny, co ułatwia dziedziczenie rozmiaru czcionki przez inne elementy tekstowe.
Lepsza współpraca z projektantami — w narzędziach takich jak Figma wielkości czcionek są podawane w pikselach.

Należy pamiętać:

Pamiętaj o nowej wartości font-size: 62.5% dla elementu HTML. Szczególną uwagę zwróć na miejsca, w których będzie implementowany zewnętrzny kod firm trzecich osadzany na stronie, np. chatboty, banery cookie itp., które mogą korzystać z domyślnej wartości 1rem = 16px. Może to powodować pomniejszenie ich rozmiarów.

Popularne narzędzia, takie jak CookieBot czy chatboty, wyświetlają prawidłowo rozmiary, ponieważ używają jednostek pikseli zamiast rem. Dlatego będą to sporadyczne przypadki. Jeśli natkniesz się na problem z nieprawidłowym skalowaniem, możesz nadpisać style CSS używając !important. W ostateczności możesz użyć transform: scale(1.6) oraz odpowiedniego transform-origin — co nie zawsze się to sprawdzi.

Jeżeli Twoje komponenty korzystają z domyślnego font-size przeglądarki, będziesz musiał je dostosować do nowej wartości rem, czyli przemnożyć przez 1.6.

Class Naming

Wyróżniamy trzy rodzaje nazewnictwa klas:

Class global — są to klasy ogólnego zastosowania, używane wielokrotnie w różnych częściach projektu. Nazwy klas zapisujemy z myślnikami (" - "), np.: text-align-center , spacer-36 . Mogą być stosowane jako combo class.

Class custom — stosowane do określenia struktury sekcji, komponentów i specyficznych elementów. Nazwy klas zapisujemy z podkreśleniem (" _ "), np.: about, about_content, about_cards, about_cards_item.

Combo class — to dodatkowa klasa, którą dodaje się do istniejącej już klasy bazowej, dziedziczy style klasy bazowej, a następnie rozszerza je o kolejne właściwości, pozwalając na modyfikację wyglądu bez zmieniania stylów klasy bazowej, np.: button, is-large. . Zapisujemy ją z is-"name".

Reguła nazewnictwa sekcji (tag semantyczny) i ich pierwszych elementów / first-child

Sekcja — najlepiej nazywać jednym słowem. W przypadku, gdy jest to header, dodaj klasę header lub hero. Jeżeli jest to sekcja "o nas", dodaj klasę about.

Pierwszy element / first-child — zapisujemy jako "name"_content. Jeżeli jest to header, dodaj div z klasą header_content lub hero_content . W przypadku, gdy jest to about, dodaj div z klasą about_content.

Auto Container

page container / kontener strony - dla strony internetowej to element strukturalny, który służy do organizowania i ograniczania szerokości treści na stronie.

Tagi semantyczne w HTML - to elementy, które opisują znaczenie swojej zawartości zarówno dla przeglądarek, jak i dla programistów. Tagi semantyczne jasno określają funkcję sekcji w dokumencie, oraz wspomagają SEO.

Do tagów semantycznych należą:

nav , header , section , footer

oraz pozostałych, na których nie będziemy się skupiać w tym rozdziale

main , articles , aside , figure , mark , figcaption

Automatyczny system dodawania containerów. Polega na dodawaniu odpowiednich stylów CSS do tagu semantycznego [ nav, header, section, footer ] oraz pierwszego elementu/first-child, bez konieczności ręcznego dodawania dodatkowych klas czy struktur. Umożliwia tworzenie czystego kodu HTML i łatwiejszą jego obsługę.

Działanie auto container na przykładzie sekcji header

1. do header zostanie dodany padding-left i padding-right

2. do header_content zostanie dodany width, max-width, margin-left, margin-right

Korzyści

Brak potrzeby tworzenia dodatkowych div dla containerów, które tworzyły zagnieżdżenia, utrudniające czytanie warstwy HTML.
Możliwość nadawania stylów CSS w pierwszym elemencie/first-child tagu semantycznego
Prawidłowe działanie position: absolute w pierwszym elemencie/first-child.
Łatwiejsze tworzenie przypinania zawartości w sekcji przy użyciu sticky

Auto container CSS (1/2):

1. dodaje style padding-left, padding-right do tagów semantycznych nav, header, section, footer, które nie zawierają klasy .no-container.

2. dodaje style width, max-width, margin-left, margin-right do pierwszego elementu/ first-child.

3. nawigacja nav ma ustawioną oddzielną zmienną do max-width. Może przyjmować taką samą wartość jak zmienna container-large

4. możliwość zmiany szerokości container max-width dla unikatowych sekcji poprzez dodanie combo class container-medium lub container-small do pierwszego elementu/ first-child.

Zmienne var(--name) deklarujemy w Variables.

Należy pamiętać (1/2)

1. Jeżeli tagiem rozpoczynającym jest div, to style auto container nie zostaną przypisane. Dodaj odpowiedni tag w panelu po prawej stronie: Settings > Tag > [ Nav, Header, Section, Footer ]. Sekcję można dodać od razu jako section zamiast div.

2. Style auto container zostaną dodane tylko do pierwszego elementu/ first-child wewnątrz tagu semantycznego. Dlatego musi się on znajdować na samej górze z wyjątkiem klas sticky i pin-spacer.

3. Jeżeli chcesz, aby style auto container nie zostały dodane, dodaj do sekcji klasę no-container.

Auto container CSS (2/2):

1. Style auto container zostają nadane również na siatkę pomocniczą z klasą layout_grid

2. Zabezpieczenie dla sticky oraz pin-spacer (GSAP) , które nadaje style na pierwszym elemencie/ first-child nie zawierającym klas sticky lub pin-spacer.

3. Jeżeli pierwszy element/ first-child zawiera klasę .sticky, to padding-left , oraz padding-right, , które zostały przypisane do tagu semantycznego, zostaną wyzerowane i nadane bezpośrednio na div , z klasą sticky

Należy pamiętać (2/2)

1. Jeżeli korzystasz z innych bibliotek do animacji, sprawdź, czy nie dodają dodatkowych div , które będą wtedy pierwszym elementem tagu semantycznego, następnie je wyklucz dodając :not(".name-class") w regule CSS

2. Nazwa klasy sticky jest zarezerwowana. Nie używaj jej do innych rzeczy niż przypinanie zawartości sekcji

Przykład ze sticky

Klasa sticky została utworzona, aby w łatwy sposób zarządzać przypinanymi sekcjami na sticky. Dzięki zastosowanym wyżej regułom CSS. Możesz w łatwy sposób przypinać całą zawartość sekcji np. z nadanym background-image, który będzie miał całą szerokość strony i uwzględniał odpowiedni padding-left i padding-right.

1. Utwórz sekcję header z klasą header, w panelu po prawej stronie dodaj tag semantyczny Settings > Tag > Header. Dodaj style height: 200vh

2. Wewnątrz header utwórz div z klasą sticky, oraz dodaj combo class — is-sticky-header. Dodaj style height: 100vh , position top: 0, background-image:

3. Wewnątrz sticky utwórz div z klasą header_content,

4. Utwórz nową sekcję about dodaj style height: 100vh , background-color: white , z-index: 2 oraz margin-top: -100vh

Variables

Zaczynając pracę nad stroną, rozpocznij od uzupełnienia zmiennych Responsive. Katalog ten zawiera wszystkie zmienne potrzebne do utworzenia stylów Auto Container oraz te, które mogą ulegać zmianie w zależności od breakpointów strony.

padding-global → właściwość padding-left i padding-right, w Auto Container.

container-nav → właściwość max-width w Auto Container.

container-large → właściwość max-width w Auto Container.

container-medium → właściwość max-width w Auto Container.

container-small → właściwość max-width w Auto Container.

padding-section → właściwość padding-top oraz padding-bottom wykorzystywana w sekcji lub jej pierwszym elemencie/first-child (więcej w rozdziale Spacer / Padding / Margin).

Należy pamiętać

1. container-medium oraz container-small są wariantami głównego container-large. Dodawaj je jako Combo class do pierwszego elementu/ first-child, jeżeli któraś z sekcji posiada inny max-width.

2. Możesz dodawać własne zmienne oraz usuwać niepotrzebne.

3. W przypadku stron full-width , zmienną container-large zamień na wersję procentową.

W kolekcji zmiennych Text Style, ustaw pozostałe zmienne dla tekstu.

Pozostałe style, takie jak np.: text-transform, deklarujesz w Style Guide.

Wszystkie zmienne typograficzne mają już przypisane zmienne do odpowiednich tagów:
Body (All Pages), All H1 Headings - All H6 Headings
oraz klas:
display1, display2, text-small, text-large.
Reszta stylów tekstowych dziedziczy style z body.

Proces ustawiania zmiennych (h6)

1. Utwórz heading h6, następnie w Style selector wybierz All h6 Headings i ustaw text style na h6.

2. Ustaw Font, Weight, Size, Height (line-height), Letter-spacing, klikając w fioletowe kółko, które otworzy panel z dostępnymi zmiennymi. Wybierz odpowiednie zmienne z Text Style.

Variables / Colors

Wszystkie zmienne kolorów są zdefiniowane w jednej kolekcji Variables / Colors. Wyróżniamy dwie grupy: Main oraz Color Vars.

Main - to grupa zmiennych, do której są przypisane zmienne kolorów z Color Vars z trybem Invert Mode. To z tej grupy będziesz ustawiać zmienne kolorów w głównym panelu stylowania po prawej stronie w Webflow.

Color Vars - to grupa wszystkich kolorów, które będą wykorzystywane w projekcie, a które będą przypisane do grupy odpowiednich zmiennych z grupy Main.

Ustawienie Invert Mode dla wybranych sekcji

1. Utwórz sekcję about > about_content > heading 2 + paragraph.

2. W stylach about ustaw Backgrounds, dodając zmienną poprzez kliknięcie fioletowego kółka i z grupy Main wybierz background.

3. Następnie do sekcji about dodaj Variable modes / Color i ustaw Invert Mode.

Efektem jest odwrócenie kolorów dla wybranej sekcji

Spacer / Padding / Margin

EFFORT_LESS został stworzony w taki sposób, aby jak najwięcej styli oraz klas globalnych tworzyć na bieżąco, bez wcześniejszego deklarowania ich właściwości. Każdy spacer, padding oraz margin deklarujesz podczas budowy projektu.

Wyjątek

padding-section → zmienna jest zadeklarowana w Variables / Responsive. Odnosi się do stałych odstępów wewnątrz sekcji poprzez nadanie padding-top oraz padding-bottom.

Sposób ustawienia: zaznacz klasę pierwszego elementu (first-child) np. header_content i dodaj zmienną w spacing > padding-top i padding-bottom, klikając fioletowe kółko. Otworzy się panel z dostępnymi zmiennymi, wybierz padding-section.

Należy pamiętać

Odstępy padding-top oraz padding-bottom w sekcjach możesz dodawać poprzez zmienną padding-section lub bezpośrednio wpisując wartość, np. 16.4rem = 164px.

Spacer

Spacer to klasa globalna , którą tworzysz, jeżeli chcesz dodać odstępy między elementami. Polega na utworzeniu div i ustawieniu padding-top na wybraną wartość.

Cyfry → w nazwie klasy odpowiada za ilość pikseli, np.: 27 = 27px = 2.7rem

Litery → w nazwie klasy: d - desktop, t - tablet, l - landscape (Mobile L), m - mobile

Ustaw

(padding-top)

nazwa klasy

spacer-36

Nazwa klasy,
zmienny dla mobile

spacer-d48-m16

Nazwa klasy,
zmienny dla breakpointów
(to się raczej nie zdarza)

spacer-d48-t38-l32-m16

Padding / Margins

W innych frameworkach dość powszechnym rozwiązaniem jest tworzenie podobnych zastosowań do padding oraz margin. Jeżeli widzisz korzyść z tego rozwiązania, to możesz takie klasy globalne tworzyć w podobny sposób jak spacer.

Ustaw padding

(top, bottom, left, right)

(top, bottom) - Vertical

(left, right) - Horizontal

(Vertical, Horizontal)

(top)

(bottom)

(left)

(right)

nazwa klasy

padding-36

padding-vert-36

padding-hor-36

padding-verthor-36-18

padding-t-36

padding-b-36

padding-l-36

padding-r-36

Margins tworzysz w ten sam sposób.

Należy pamiętać

1. Jeżeli spacer będzie taki sam między wszystkimi elementami wewnątrz rodzica z flex oraz grid, dodaj gap.

2. Tworzenie globalnych klas padding oraz margin jest raczej sporadyczne. Zamiast tworzenia tych klas, lepiej dodać bezpośrednio style dla wybranej klasy.

Style Guide

Style Guide jest plikiem do nadawania stylów, które nie zostały uwzględnione w Variables - tutaj możesz ustawić np. text-transform: uppercase oraz inne style dla klas i tagów.

W Code Embed o nazwie draft-style, został dodany system podpowiedzi.

text-style-h1/h6 → to klasy, które mają te same style co ich odpowiedniki h1-h6, dodajesz je, jeżeli chcesz nadpisać wybrane style tekstowe.

Jeżeli potrzebujesz, aby h1 jednorazowo miał takie same style co h2, to do h1 dodaj klasę text-style-h2. Dzięki temu nie nadpiszesz bazowej wartości h1.

Style Button oraz jego warianty tworzone przy użyciu combo class.

Layout Grid

W EFFORT_LESS została dodana siatka, ułatwiająca sprawdzanie rozmieszczenia elementów.

Jeżeli masz już ustawione wszystkie zmienne, w tym containery strony, to zaznacz div z klasą .layout_content, na której jest nadany display: grid, i ustaw ilość kolumn dla odpowiednich breakpointów. Dodaj odpowiedni gap.

Base (Desktop)

Mobile

Należy pamiętać

1. Kolor siatki możesz dostosować w zakładce Variables / Colors cl-layout-block

2. Siatkę można tymczasowo wyłączyć, nadając display: none na .layout_grid

3. Po ustawieniu wszystkich stylów layout grid, utwórz komponent i umieść go na pozostałych podstronach.

4. Po zakończeniu pracy nad stroną, usuń layout grid.

Zanim zaczniesz

Zrozumienie EFFORT_LESS oraz przyswojenie nowych zasad może zająć trochę czasu, dlatego bądź cierpliwy/a, eksperymentuj i staraj się odtwarzać nowo poznane założenia. Dokumentacja została napisana w taki sposób, aby umożliwić chronologiczne przyswajanie wiedzy. Jednak część tematów jest ze sobą powiązana, dlatego czasami trzeba przeskoczyć do innego rozdziału, aby lepiej zrozumieć kontekst. W razie konieczności szukaj informacji w innych częściach internetu, na przykład odnośnie Variable Modes lub tagów semantycznych HTML.

Nad dokumentacją nadal pracuję, aby była jak najbardziej przystępna. Jeżeli zechcesz wspomóc moją pracą oraz aby dotarła do reszty społeczności, polub mój post na Instagramie — tam również będę informował o postępach prac.