Content MarketingИмейл маркетинг и автоматизация

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

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

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

CSS рамки

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

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

CSS рамка на Tailwind

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

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

CSS решетки

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

CSS градиенти

css градиенти

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

css тъмен режим

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

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

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.