Tailwind CSS: Първа от помощните програми CSS рамка и API за бърз и отзивчив дизайн

Tailwind CSS Framework

Докато съм задълбочен в технологиите ежедневно, не получавам толкова време, колкото бих искал да споделя сложните интеграции и автоматизация, които моята компания прилага за клиентите. Освен това нямам много време за откриване. Повечето от технологиите, за които пиша, са компании, които търсят Martech Zone покривайки ги, но от време на време - особено чрез Twitter - виждам някакъв шум около нова технология, която трябва да споделя.

Ако работите в уеб дизайн, разработка на мобилни приложения или дори просто сте създали система за управление на съдържанието, вероятно сте се борили с разочарованията от конкуриращите се стилове в множество таблици със стилове. Дори и с невероятните инструменти за разработка, вградени във всеки браузър, проследяването и почистването на CSS може да изисква твърде много време и енергия.

CSS рамки

През последните години дизайнерите свършиха доста невероятна работа, като пуснаха колекции от стилове, които са подготвени и готови за използване. Тези таблици със стилове на CSS са по -известни като CSS Frameworks, опитвайки се да приспособят всички различни стилове и отзивчиви възможности, така че разработчиците да могат просто да се позовават на рамка, вместо да създават CSS файл от нулата. Някои популярни рамки са:

  • Bootstrap - рамка, която се развива в продължение на десетилетие, въведена за първи път от Twitter. Той предлага безброй функции. Той има недостатъци, изисква SASS, трудно се презаписва, зависи от JQquery и е доста тежък за зареждане.
  • намирам -чиста рамка, която е удобна за разработчици и няма зависимост от JavaScript.
  • фундамент - по -обща и използваема CSS рамка, която има много компоненти, които лесно се персонализират. Освен това има Фондация за имейл и Потребителски интерфейс за движение за анимации.
  • UI комплект -комбинация от HTML, JavaScript и CSS, за да развиете вашия интерфейс бързо и лесно.

Tailwind CSS Framework

Докато други рамки вършат чудесна работа за настаняване на популярни елементи на потребителския интерфейс, Tailwind използва методология, известна като Атомен CSS. Накратко, Tailwind гениално организира имената на класовете, използвайки естествен език, за да прави това, което казват, че правят. Така че, докато Tailwind няма библиотека с компоненти, възможността за лесно изграждане на мощен, отзивчив интерфейс само чрез препратка към имената на класове CSS е елегантна, бърза и несравнима.

Ето някои наистина страхотни примери:

CSS решетки

css колони за начална мрежа колони

CSS градиенти

css градиенти

CSS за поддръжка на тъмен режим

css тъмен режим

Tailwind също има фантастика налично разширение за VS Code, за да можете лесно да идентифицирате и вмъкнете класове от редактора на кодове на Microsoft.

Още по -гениално, Tailwind автоматично премахва всички неизползвани CSS, когато се създава за производство, което означава, че крайният ви CSS пакет е най -малкият, който би могъл да бъде. Всъщност повечето проекти на Tailwind изпращат на клиента по -малко от 10kB CSS.

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.