Zmiany w V2
Wszystko jest lepiej wyjaśnione w V2
Opisujemy koncepty zgodnie z zasadą [Temat] strategia.
Najbardziej znaczącą zmianą w Client-First V2 jest sposób, w jaki wyjaśniamy koncepcje Client-First. W V1 brakowało organizacji treści i jasnego wyjaśnienia niektórych tematów.
V2 wprowadza nowy sposób organizacji treści, który pomoże nam lepiej zrozumieć Client-First. Każdy temat ma dokładniejsze wyjaśnienie.
Bardziej istotne tematy są zorganizowane jako "strategie” —
Foldery
Foldery zdefiniują na nowo sposób wizualizacji klas wewnątrz projektu w Webflow.
Foldery Client-First pozwolą nam zorganizować klasy w elastycznej strukturze folderów.
Użyj podkreślnika, aby utworzyć niestandardowy folder. Organizuj klasy użytkowe tylko za pomocą łączników.
Foldery będą działać tylko z Client-First + Finsweet Extension. Dowiedz się więcej o Folderach.
Komponenty są lepiej zdefiniowane
W V2 będziemy bardziej konkretni, gdy będziemy używać komponentów - i bardziej konkretni, gdy będziemy używać podkreślników!
V1 wersja początkowa
podkreślnik w nazwie klasy = component
V2 wersja z Folderami
podkreślnik w nazwie klasy = folder
[folder-name]_component = component
Użycie podkreślnika w nazwie klasy nie musi oznaczać, że folder jest komponentem. Obecnie używamy podkreślników do organizacji lub grupowania elementów w Folderach.
Komponenty mają teraz specyficzną klasyfikację. Jeśli chcemy, aby element był uważany za komponent, używamy słowa "component" dla identyfikatora elementu.
Dowiedz się więcej w Strategii Folderów.
Typy klas są lepiej zdefiniowane
Klasa niestandardowa, klasa użytkowa, klasa globalna, combo klasa są lepiej zdefiniowane i wyjaśnione w Strategii klas 1.
Poprzez lepsze zrozumienie typów klas, możemy podejmować lepsze decyzje podczas budowania.
page-padding to teraz padding-global
Najważniejsza wartość paddingu w naszym projekcie nazywa się teraz padding-global. Ta zmiana skutkuje lepszą organizacją naszego systemu folderów.
Zamiast umieszczać naszą klasę padding w folderze page-, umieszczamy ją w folderze padding-.
Dowiedz się więcej w Strategii Głównej Struktury.
section-[identyfikator] to teraz section_[identyfikator]
Klasy sekcji używają teraz znaku podkreślnika zamiast łącznika.
Nasza nowa aktualizacja folderów zapewnia, że klasy użytkowe są jedynymi klasami, które używają łączników. Klasy niestandardowe używają podkreślników. Klasy sekcji są klasyfikowane jako "klasy niestandardowe", co oznacza, że potrzebują podkreślnika w nazwie klasy.
Podkreślnik umieszcza klasy “section” wewnątrz jednego folderu klas niestandardowych - section_
Wszystkie klasy sekcji znajdą się w folderze “section”. Dowiedz się więcej w Strategii Głównej Struktury.
Nowy padding-section-[size] ustala globalne paddingi sekcji.
Dodaliśmy nowy system klas użytkowych do zarządzania globalnymi odstępami w sekcjach. Ma to na celu ograniczenie liczby opcji odstępów, które mamy dla sekcji + utrzymanie ich jednolitych w całym projekcie.
Dowiedz się więcej w Strategii Głównej Struktury.
Nowy heading-style-[h#] utrzymuje ujednolicone style nagłówków
Kiedy style Heading tag muszą być wyświetlane jako inny Heading tag, możemy użyć naszej klasy heading-style-[h#].
Na przykład, jeśli potrzebujemy H2 dla celów SEO, ale tekst powinien podążać za stylami H3, możemy zastosować heading-style-h3 do H2, aby zmienić jego styl, zachowując odpowiedni semantyczny tag HTML.
Dowiedz się więcej w Strategii Typografii.
Nowa klasa użytkowa display-inline-flex
Zastosuj właściwość display: inline-flex, która nie jest obsługiwaną właściwością CSS w Webflow.
Przypadek użycia: Użycie właściwości CSS display: flex jest zazwyczaj ważne w naszym projekcie. Jednak display: flex powoduje, że elementy domyślnie zajmują 100% dostępnej przestrzeni. Utrudnia to stosowanie flexboxa dla przycisków. display: inline-flex pozwala elementom zachowywać się jak inline, zachowując jednocześnie możliwości flexa wewnątrz nich.
Dowiedz się więcej w Systemach Klas Użytkowych.
Usunięcie klas użytkowych show-
Usunięcie klas użytkowych show-. Klasy show- stosowały display: block na różnych breakpointach.
Stwierdziliśmy, że klasy show- były bardzo ograniczające, działały tylko dla niewielkiej liczby przypadków użycia i mogą prowadzić do niepożądanych problemów z responsywnością.
Zamiast stosować klasy "show" do elementów, możemy zastosować właściwości display bezpośrednio do klasy niestandardowej.
Dodatkowo możemy zastosować dowolne właściwości display do combo klasy. Na przykład modal_component is-visible-tablet.
Nowe strategie dla spacingu
V2 rozszerza sposób, w jaki możemy używać klas użytkowych i klas niestandardowych do rozmieszczania elementów w całym projekcie. Dodaliśmy nowe metody implementacji spacingu.
Spacing w systemie klas użytkowych
- spacing wrappers (V1)
- spacing blocks (nowe w V2)
Spacing w systemie klas niestandardowych
- na elemencie (V1)
- CSS Grid na rodzicu (nowe w V2)
Ulepszony CSS w Global Styles embed
Pełne omówienie każdego fragmentu CSS znajduje się na stronie Global Styles embed.
Całkowicie nowe strony w V2
W V2 dodano nowe strony dla tematów, które nie zostały ujęte w V1.
- Wprowadzenie przedstawia najważniejsze zagadnienia związane z Client-First.
- Big docs pomaga nam zmotywować się do nauki Client-First w całości.
- Foldery i Strategia Folderów dają nam pełne wyjaśnienie naszej nowej metody wizualizacji klas.
Od Client-first do Client-First
Finsweet opublikował nowe logo. Logo to zamienia małą literę "f" na dużą "F".
Ten sam trend będziemy stosować w przypadku Client-First.
Client-First V1 zawiera małą literę "f". W V2 sformalizowaliśmy wielką literę F w całej marce. Ta aktualizacja zmienia Client-First na Client-First.
Zainteresowany przejściem Finsweet z f na F? Oglądaj nasz stream na żywo tutaj.