Tailwind CSS: Prvotný rámec CSS a API pre rýchly a responzívny dizajn

Rámec CSS Tailwind

Aj keď sa denne venujem technológiám, nemám toľko času, koľko by som chcel, aby som sa podelil o komplexné integrácie a automatizáciu, ktoré moja spoločnosť implementuje pre zákazníkov. Tiež nemám veľa času na objavovanie. Väčšina technológií, o ktorých píšem, sú spoločnosti, ktoré hľadajú Martech Zone pokrývať ich, ale z času na čas - najmä prostredníctvom služby Twitter - vidím nový zvuk okolo novej technológie, o ktorú sa musím podeliť.

Ak pracujete vo webdizajne, vývoji mobilných aplikácií alebo dokonca len nastavujete systém na správu obsahu, pravdepodobne ste zápasili s frustráciou z konkurenčných štýlov vo viacerých štýloch. Aj keď sú v každom prehliadači zabudované úžasné vývojové nástroje, sledovanie a čistenie CSS môže vyžadovať príliš veľa času a energie.

Rámce CSS

V posledných rokoch urobili dizajnéri celkom úžasnú prácu pri vydávaní zbierok štýlov, ktoré sú pripravené a pripravené na použitie. Tieto hárky štýlov CSS sú známejšie ako rámce CSS a pokúšajú sa prispôsobiť všetkým rôznym štýlom a schopnostiam reagovať, aby vývojári mohli odkazovať iba na rámec, a nie budovať súbor CSS od začiatku. Niektoré obľúbené rámce sú:

  • Bootstrap - rámec, ktorý sa vyvíjal viac ako desať rokov a ktorý prvýkrát predstavil Twitter. Ponúka nespočetné množstvo funkcií. Má nevýhody, vyžadujúce SASS, ťažko prehnateľné, závislé od JQquery a načítanie je dosť náročné.
  • nájsť -čistý rámec, ktorý je vhodný pre vývojárov a nezávisí od JavaScriptu.
  • Nadácia - všeobecnejší a použiteľnejší rámec CSS, ktorý má veľa komponentov, ktoré je možné ľahko prispôsobiť. Okrem toho existuje Nadácia pre e -mail a Motion UI pre animácie.
  • Súprava používateľského rozhrania -kombinácia HTML, JavaScript a CSS na rýchle a jednoduché vytvorenie vášho klientskeho rozhrania.

Rámec CSS Tailwind

Zatiaľ čo ostatné rámce zvládajú prácu s obľúbenými prvkami používateľského rozhrania skvele, Tailwind používa metodológiu známu ako Atómový CSS. Stručne povedané, Tailwind geniálne usporiadal názvy tried pomocou prirodzeného jazyka, aby robil to, čo hovorí. Aj keď teda Tailwind nemá knižnicu komponentov, schopnosť jednoducho vybudovať výkonné a responzívne rozhranie pomocou odkazov na názvy tried CSS je elegantná, rýchla a neporovnateľná.

Tu je niekoľko skutočne skvelých príkladov:

Mriežky CSS

Štartové mriežky stĺpcov css stĺpce

Prechody CSS

prechody css

Podpora CSS pre tmavý režim

css tmavý režim

Tailwind má tiež fantastické k dispozícii rozšírenie pre kód VS, aby ste mohli ľahko identifikovať a vkladať triedy z editora kódu spoločnosti Microsoft.

Ešte dômyselnejšie je, že Tailwind automaticky odstraňuje všetky nepoužité CSS pri vytváraní výroby, čo znamená, že váš konečný balík CSS je najmenší, aký môže byť. V skutočnosti väčšina projektov Tailwind dodáva klientovi menej ako 10 kB CSS.

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.