Tailwind CSS: Utility-First CSS Framework un API ātram, atsaucīgam dizainam

Tailwind CSS ietvars

Lai gan ikdienā esmu dziļi iepazinies ar tehnoloģijām, man nav tik daudz laika, cik es vēlētos dalīties ar sarežģītajām integrācijām un automatizāciju, ko mans uzņēmums īsteno klientiem. Tāpat man nav daudz atklājumu laika. Lielākā daļa tehnoloģiju, par kurām es rakstu, ir uzņēmumi, kas meklē Martech Zone tos aptverot, taču ik pa laikam - it īpaši, izmantojot Twitter - es redzu kādu satraukumu ap jaunu tehnoloģiju, ar kuru man ir jādalās.

Ja strādājat tīmekļa dizainā, mobilo lietotņu izstrādē vai pat vienkārši izveidojat satura pārvaldības sistēmu, iespējams, esat cīnījies ar vilšanos, kas rodas dažādu stilu lapās, konkurējot ar stilu. Pat ar pārsteidzošiem izstrādes rīkiem, kas iebūvēti katrā pārlūkprogrammā, CSS izsekošana un tīrīšana var prasīt pārāk daudz laika un enerģijas.

CSS ietvari

Pēdējos gados dizaineri ir paveikuši diezgan pārsteidzošu darbu, laižot klajā stilu kolekcijas, kas ir sagatavotas un gatavas lietošanai. Šīs CSS stila lapas ir labāk pazīstamas kā CSS ietvari, cenšoties pielāgot visus dažādus stilus un reaģēšanas iespējas, lai izstrādātāji varētu vienkārši atsaukties uz ietvaru, nevis veidot CSS failu no nulles. Daži populāri ietvari ir:

  • Sāknēšanas - sistēma, kas ir attīstījusies desmit gadu laikā un kuru pirmo reizi ieviesa Twitter. Tā piedāvā neskaitāmas funkcijas. Tam ir negatīvas puses, kurām ir nepieciešama SASS, grūti pārvarēt, atkarībā no JQquery, un to ir diezgan smagi ielādēt.
  • Bulma -tīrs, izstrādātājiem draudzīgs ietvars un nav atkarīgs no JavaScript.
  • Fonds - vispārīgāka un lietojamāka CSS sistēma, kurā ir daudz viegli pielāgojamu komponentu. Turklāt ir Fonds e -pastam un Kustības UI animācijām.
  • Lietotāja saskarne -HTML, JavaScript un CSS kombinācija, lai jūsu priekšgala sistēma tiktu izstrādāta ātri un viegli.

Tailwind CSS ietvars

Lai gan citi ietvari lieliski veic populāru lietotāja saskarnes elementu pielāgošanu, Tailwind izmanto metodiku, kas pazīstama kā Atomu CSS. Īsi sakot, Tailwind atjautīgi sakārtoja klašu nosaukumus, izmantojot dabisko valodu, lai darītu to, ko viņi saka. Tātad, lai gan Tailwind nav komponentu bibliotēkas, iespēja viegli izveidot jaudīgu, atsaucīgu saskarni, tikai atsaucoties uz CSS klases nosaukumiem, ir eleganta, ātra un nesalīdzināma.

Šeit ir daži patiešām lieliski piemēri:

CSS režģi

css kolonnu sākuma režģu kolonnas

CSS gradienti

css gradienti

CSS tumšā režīma atbalstam

css tumšais režīms

Tailwind ir arī fantastisks pieejams paplašinājums VS kodam, lai jūs varētu viegli identificēt un ievietot klases no Microsoft koda redaktora.

Pat ģeniālāks, Tailwind, būvējot ražošanai, automātiski noņem visus neizmantotos CSS, kas nozīmē, ka jūsu galīgais CSS komplekts ir mazākais, kāds tas varētu būt. Faktiski lielākā daļa Tailwind projektu klientam nosūta mazāk par 10 KB CSS.

Ko jūs domājat?

Šī vietne izmanto Akismet, lai samazinātu surogātpastu. Uzziniet, kā tiek apstrādāts jūsu komentārs.