Mga update sa V2
Ang lahat ay ipinaliwanag nang mas malinaw sa V2
Ipinakilala natin ang “Estratehiya sa [Paska]” na diskarte.
Ang pinaka makabuluhang update sa Client-First V2 ay kung paano natin ipinapaliwanag ang mga konsepto ng Client-First. Ang V1 ay kulang sa pagkakaayos ng nilalaman at malinaw na paliwanag para sa ilang paksa.
Ipinakilala sa V2 ang bagong paraan ng pagsasaayos ng nilalaman upang matulungan tayong mas maunawaan ang Client-First. Ang bawat paksa ay may mas tiyak na pagpapaliwanag.
Ang mas mahahalagang paksa ay isinaayos bilang mga "estratehiya" —
- Estratehiya sa Klase
- Estratehiya ng Pangunahing Istraktura
- Estratehiya sa Tipograpiya
- Estratehiya sa Spacing
- At iba pa
Folders
Babaguhin ng Folders kung paano natin nakikita ang mga klase sa loob ng ating proyekto sa Webflow.
Ang Folders ng Client-First ay magbibigay-daan sa atin na ayusin ang mga klase sa naibabagay na istrakturang polder.
Gamitin ang salungguhitan na titik para gumawa ng pasadyang polder. Ayusin ang mga klase na utility ayon sa mga gitling lamang.
Ang Folders ay gagana lamang sa Client-First + Finsweet Extension. Matuto pa sa Folders.
Ang mga Komponent ay mas mahusay na tinukoy
Sa V2, magiging mas tiyak tayo kapag gumagamit tayo ng mga komponent — at mas tiyak kapag gumagamit ng mga salungguhitan!
V1 Paunang paglabas
salungguhitan sa pangalan ng klase = komponent
V2 paglabas na may Folders
salungguhitan sa pangalan ng klase = polder
[polder-ngalan]_component = komponent
Ang paggamit ng salungguhitan sa pangalan ng klase ay hindi nangangahulugang ang polder ay bahagi. Gumagamit na tayo ngayon ng mga salungguhitan para sa pagkakaayos o pagpapangkat ng mga elemento sa Folders.
Ang mga komponent ay mayroon na ngayong tiyak na pag-uuri. Kung gusto nating ituring na komponent ang elemento, ginagamit natin ang salitang "component" para sa pagtitiyak ng elemento.
Matuto pa sa Estratehiya sa Folders.
Mas mahusay na tinukoy ang mga uri ng klase
Ang kustom, utility, global, at kombo na mga klase ay mas mahusay na tinukoy at ipinaliwanag sa Estratehiya sa Klase 1.
Sa pamamagitan ng mas mabuti na pag-unawa sa mga uri ng klase, makakagawa tayo ng mas maayos na mga desisyon habang gumagawa.
page-padding ay ngayon padding-global
Ang pinakamahalagang halaga ng padding ng ating proyekto ay tinatawag na ngayong padding-global. Ang pagbabago ng pangalan na ito ay nagbibigay ng mas mahusay na pagkakaayos ng ating systema ng polder.
Sa halip na ilagay ang ating klase na padding sa page- na polder, inilalagay natin ito sa padding- na polder.
Matuto pa sa Estratehiya ng pangunahing istraktura.
section-[pangtiyak] ay ngayon section_[pangtiyak]
Ginagamit na ngayon ng mga seksyon na klase ang salungguhitan na titik sa halip na ang gitling.
Tinitiyak ng ating bagong update sa Folders na ang mga klaseng Utility ay gumagamit lamang ng mga gitling. Gumagamit ang mga klaseng kustom ng mga salungguhitan. Ang mga klase sa seksyon ay inuri bilang "custom classes", na nangangahulugang kailangan nila ng salungguhitan sa pangalan ng klase.
Inilalagay ng salungguhitan ang mga seksyon na klase sa loob ng klaseng kustom na sistema ng polder — section_.
Ang lahat ng mga klase ng seksyon ay nasa polder ng seksyon. Matuto pa sa Estratehiya ng Pangunahing Istraktura.
Ang bagong padding-section-[sukat] ay nagtatatag ng global na padding na pang-seksyon
Nagdagdag tayo ng bagong sistema ng klaseng utility para pamahalaan ang global na spacing sa mga seksyon. Ang pagbago ng sistema ng spacing na ito ay naglalayong limitahan ang bilang ng mga pagpipili sa spacing na mayroon tayo para sa mga seksyon at panatilihing nagkakaisa ang mga ito sa buong proyekto.
Matuto pa sa Estratehiya ng Pangunahing Istraktura.
Ang bagong heading-style-[h#] ay nagpapanatili ng pinag-isang istilo ng Heading
Kapag ang mga estilo ng Heading na tag ay kailangang ipakita bilang ibang Heading na tag, maaari nating gamitin ang ating heading-style-[h#] na klase.
Halimbawa, kung kailangan natin ng H2 para sa mga layunin ng SEO, ngunit dapat sundin ng text ang mga istilo ng H3, maaari nating ilapat ang heading-style-h3 sa H2 upang baguhin ang istilo nito habang pinapanatili ang wastong semantikong HTML na tag.
Matuto pa sa Estratehiya sa Tipograpiya.
Bagong display-inlineflex na mga klaseng utility
Ilapat ang CSS property display: inline-flex, na hindi sinusuportahang CSS property sa Webflow.
Kagamitang-kaso: Gamit ang CSS property na display: flex ay karaniwang mahalaga sa ating proyekto. Gayunpaman, ang display: flex ay nagiging sanhi ng mga elemento na kunin ang 100% ng espasyo bilang nakasadya. Ginagawa nitong mahirap gamitin ang flexbox para sa mga pindutan. display: inline-flex ay nagbibigay-daan sa mga elemento na kumilos bilang inline, habang pinapanatili ang flex na kakayahan sa loob ng mga ito.
Matuto pa sa Mga sistema ng klaseng Utility.
Inalis ang mga klaseng utility show-
Inalis ang mga utility klase na show-. Ang nagpapakita na mga klase na inilapat na display: block sa iba't ibang antas ng pagtugon.
Nalaman namin na ang mga klaseng show- ay napakalimitado, gumagana lamang para sa maliit na halaga ng mga kaso ng paggamit, at maaaring humantong sa mga hindi gustong isayo sa pagtutugon.
Sa halip na ilapat ang mga "show" na klase sa mga elemento, maaari nating ilapat ang mga katangian ng display nang direkta sa klaseng kustom.
Bilang karagdagan, maaari nating ilapat ang anumang mga katangian ng display sa isang klaseng kombo. Halimbawa, ang modal_component is-visible-tablet.
Mga bagong estratehiya para sa spacing
Lumalawak ang V2 sa kung paano natin magagamit ang mga klaseng utility at kustom sa mga elemento ng spacing sa buong proyekto. Nagdagdag tayo ng mga bagong pamamaraan para sa pagpapatupad ng espasyo.
Spacing gamit ang sistema ng klaseng utility
- Spacing wrappers (V1)
- Spacing blocks (bago sa V2)
Spacing gamit ang sistema ng klaseng kustom
- Sa elemento (V1)
- CSS Grid sa parent na elemento (bago sa V2)
Pinahusay na kustom na CSS sa Global Styles embed
Mayroong buong pangkalahatang-ideya ng bawat snippet ng CSS na kasama sa pahina ng Global Styles na embed.
Mga bagong pahina sa V2
Nagdaragdag ang V2 ng mga bagong pahina ng nilalaman para sa mga paksang hindi sakop sa V1
- Ang Panimula ay binabalangkas ang pinakamahalagang paksa ng Client-First.
- Ang Landas ng pag-aaral ay nagbibigay sa amin ng 7-araw na landas sa pag-aaral ng Client-First.
- Nakakatulong ang Malaking dokumentasyon na mag-udyok sa atin na matuto nang buo sa Client-First.
- Ang Folders at Estratehiya sa Folders ay nagbibigay sa atin ng buong paliwanag sa ating bagong paraan ng paggunita ng klase.
- Ang Semantikong HTML na mga tag ay nagbibigay sa atin ng mas mahusay na pag-unawa sa kung paano maayos na bumuo sa HTML.
- Ipinapaliwanag ng Especificidad ng CSS kung bakit hindi gumagana ang mga klase ng margin at padding kapag kinopya at i-paste mo.
- Tinutulungan tayo ng Global Styles na embed na maunawaan ang layunin ng kustom na CSS na idinagdag sa Client-First cloneable.
- Ang Estratehiya sa Pagbebenta ay nagbibigay sa atin ng mga paraan upang magamit ang Client-First sa ating proseso ng pagbebenta upang makapanalo ng higit pang mga proyekto.
- Ang Pag-convert ng nakaraang proyekto ay nagbibigay sa atin ng kaalaman tungkol sa pag-convert ng mga nakaraang proyekto sa Client-First.
Mula Client-first papuntang Client-First
Ang Finsweet ay naglabas kamakailan ng bagong logo. Pinapalitan ng logo na ito ang lowercase na "f" sa uppercase na "F".
Susundan namin ang parehong pagkahilig para sa Client-First.
Nagtatampok ang Client-first V1 ng lowercase na "f". Sa V2, ginagawa nating pormal ang kapital na F sa buong brand. Binabago nito ang Client-first sa Client-First.
Interesado sa paglipat ni Finsweet mula f hanggang F? Panoorin ang aming live stream dito.