„Tailwind CSS“: „Utility-First CSS Framework“ ir API greitam, reaguojančiam dizainui

„Tailwind“ CSS sistema

Nors kasdien gilinuosi į technologijas, neturiu tiek laiko, kiek norėčiau pasidalyti sudėtingomis integracijomis ir automatizavimu, kurį mano įmonė taiko klientams. Be to, aš neturiu daug laiko atradimams. Dauguma technologijų, apie kurias rašau, yra įmonės, kurios ieško Martech Zone dengdamas juos, bet retkarčiais - ypač per „Twitter“ - matau šurmulio apie naują technologiją, kuria turiu pasidalyti.

Jei dirbate kurdami žiniatinklį, kurdami programas mobiliesiems ar net kurdami turinio valdymo sistemą, tikriausiai susidūrėte su nusivylimu dėl konkuruojančių stilių įvairiuose stilių lapuose. Net ir naudojant nuostabius kūrimo įrankius, sukurtus kiekvienoje naršyklėje, CSS stebėjimas ir išvalymas gali pareikalauti per daug laiko ir energijos.

CSS rėmai

Pastaraisiais metais dizaineriai padarė gana nuostabų darbą išleisdami paruoštų ir paruoštų naudoti stilių kolekcijas. Šios CSS stiliaus lentelės yra geriau žinomos kaip CSS rėmai, bandant pritaikyti visus skirtingus stilius ir reagavimo galimybes, kad kūrėjai galėtų tiesiog nurodyti sistemą, o ne kurti CSS failą nuo nulio. Kai kurios populiarios sistemos yra:

  • Bootstrap - sistema, kuri buvo sukurta per dešimtmetį, pirmą kartą pristatyta „Twitter“. Jis siūlo daugybę funkcijų. Jis turi neigiamų pusių, reikalaujančių SASS, sunkiai perkraunamas, priklausantis nuo „JQquery“, ir jį įkelti yra gana sunku.
  • rasti -švari sistema, pritaikyta kūrėjams ir nepriklausanti nuo „JavaScript“.
  • Pagrindas - bendresnė ir tinkamesnė CSS sistema, kurioje yra daugybė lengvai pritaikomų komponentų. Be to, yra El. Pašto fondas ir Judesio vartotojo sąsaja animacijoms.
  • Vartotojo sąsaja -HTML, „JavaScript“ ir CSS derinys, kad jūsų sąsaja būtų sukurta greitai ir lengvai.

„Tailwind“ CSS sistema

Nors kitos sistemos puikiai atlieka populiarius vartotojo sąsajos elementus, „Tailwind“ naudoja metodiką, žinomą kaip Atominis CSS. Trumpai tariant, „Tailwind“ išradingai organizavo klasių pavadinimus naudodami natūralią kalbą, kad padarytų tai, ką jie sako. Taigi, nors „Tailwind“ neturi komponentų bibliotekos, galimybė lengvai sukurti galingą, reaguojančią sąsają vien tik nurodant CSS klasių pavadinimus yra elegantiška, greita ir nepalyginama.

Štai keletas tikrai puikių pavyzdžių:

CSS tinkleliai

css stulpelio pradžios tinklelių stulpeliai

CSS gradientai

css gradientai

CSS tamsaus režimo palaikymui

css tamsus režimas

„Tailwind“ taip pat turi fantastišką galimas plėtinys „VS Code“, kad galėtumėte lengvai identifikuoti ir įterpti klases iš „Microsoft“ kodų rengyklės.

Dar išradingesnis „Tailwind“ automatiškai pašalina visas nepanaudotas CSS, kurdamas gamybai, o tai reiškia, kad galutinis CSS paketas yra mažiausias, koks tik gali būti. Tiesą sakant, dauguma „Tailwind“ projektų klientui siunčia mažiau nei 10 KB CSS.

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.