Tailwind CSS: Okvir CSS in API za hitro in odzivno oblikovanje

Okvir CSS Tailwind

Čeprav sem vsak dan globoko v tehniki, nimam toliko časa, kot bi si želel deliti kompleksne integracije in avtomatizacijo, ki jih moje podjetje izvaja za stranke. Prav tako nimam veliko časa za odkrivanje. Večina tehnologije, o kateri pišem, so podjetja, ki iščejo Martech Zone ki jih pokrivajo, vendar občasno - še posebej prek Twitterja - vidim kakšno vrvež okoli nove tehnologije, ki jo moram deliti.

Če se ukvarjate s spletnim oblikovanjem, razvojem mobilnih aplikacij ali celo samo vzpostavite sistem za upravljanje vsebine, ste se verjetno spopadli s frustracijami konkurenčnih stilov v več slogovnih listih. Tudi z neverjetnimi razvojnimi orodji, vgrajenimi v vsak brskalnik, lahko sledenje in čiščenje CSS -ja zahtevata preveč časa in energije.

Okviri CSS

V zadnjih letih so oblikovalci opravili precej neverjetno delo pri izdaji zbirk slogov, ki so pripravljeni in pripravljeni za uporabo. Te slogovne liste CSS so bolj znane kot ogrodja CSS, ki poskušajo prilagoditi vse različne sloge in odzivne zmogljivosti, tako da se lahko razvijalci sklicujejo le na okvir, ne pa na gradnjo datoteke CSS iz nič. Nekateri priljubljeni okviri so:

  • Bootstrap - okvir, ki se je razvijal v desetletju, prvič ga je predstavil Twitter. Ponuja nešteto funkcij. Ima slabosti, zahteva SASS, ki ga je težko preoblikovati, odvisno od JQquery, in naložiti ga je precej zajetno.
  • najti -čist okvir, ki je prijazen razvijalcem in ni odvisen od JavaScript.
  • Fundacija - bolj splošen in uporaben okvir CSS, ki vsebuje na tone komponent, ki jih je enostavno prilagoditi. Poleg tega obstaja Fundacija za e -pošto in UI za gibanje za animacije.
  • Komplet uporabniškega vmesnika -kombinacija HTML, JavaScript in CSS za hitro in enostavno razvijanje vašega vmesnika.

Okvir CSS Tailwind

Medtem ko se drugi okviri odlično prilagajajo priljubljenim elementom uporabniškega vmesnika, Tailwind uporablja metodologijo, znano kot Atomski CSS. Skratka, Tailwind je iznajdljivo organiziral imena razredov z uporabo naravnega jezika, da bi naredil to, kar pravijo. Torej, čeprav Tailwind nima knjižnice komponent, je zmožnost enostavnega ustvarjanja močnega, odzivnega vmesnika le s sklicevanjem na imena razredov CSS elegantna, hitra in neprimerljiva.

Tukaj je nekaj res odličnih primerov:

Mreže CSS

css stolpci začetne mreže stolpcev

Gradienti CSS

css gradienti

CSS za podporo temnega načina

temni način css

Tailwind ima tudi fantastično razširitev na voljo za VS Code, tako da lahko preprosto prepoznate in vstavite razrede iz Microsoftovega urejevalnika kod.

Še bolj domiselno je, da Tailwind samodejno odstrani ves neuporabljen CSS pri izdelavi za proizvodnjo, kar pomeni, da je vaš zadnji sveženj CSS najmanjši, kar bi lahko bil. Pravzaprav večina projektov Tailwind odjemalcu pošlje manj kot 10 KB CSS.

Kaj menite?

Ta stran uporablja Akismet za zmanjšanje nezaželene pošte. Preberite, kako se vaš komentar obravnava.