TNTWeb — полное название команды Tencent News Front-end. Небольшие партнеры группы практиковались и накапливали опыт работы в таких крупных областях, как веб-интерфейс, разработка NodeJS, дизайн пользовательского интерфейса и мобильные приложения.
В настоящее время команда в основном поддерживает разработку внешнего интерфейса для различных предприятий Tencent News.Помимо развития бизнеса, она также накопила некоторую внешнюю инфраструктуру, позволяющую повысить эффективность бизнеса и внедрять инновации в продукты.
Команда выступает за совместную разработку с открытым исходным кодом и имеет множество технических экспертов.github.com/tnfe
автор этой статьиzhangzheyi1, адрес моего блога:www.zhangzheyi1.com
Превосходный фреймворк css может ускорить разработку, больше не беспокоиться о совместимости и, как правило, иметь разумную компоновку, поскольку разработка позволяет меньше думать о дизайне пользовательского интерфейса. Недавно мы собрали несколько фреймворков CSS, чтобы разработчики могли выбирать и использовать их в произвольном порядке.
1. попутный ветер
Tailwind CSS — это ориентированная на функции CSS-инфраструктура, которая интегрируется сflex, pt-4, text-centerа такжеrotate-90Такие классы, их можно комбинировать прямо в скрипте языка разметки для построения любого дизайна.
Основные характеристики:
- составной
- Небольшой размер, высокая производительность
- Отзывчивый
Портал:tailwindcss.com/
2. Тахионы
Tachyons обладает преимуществами современных популярных фреймворков CSS без самостоятельного написания большого количества CSS. Легкий, настраиваемый и расширяемый и т. д. Тахионы имеют очень мелкие атомарные классы, просто добавьте новый стиль атрибута к имени класса. Не нужно беспокоиться о конфликтах имен или переопределениях стилей, так что конкретное содержимое стиля можно увидеть более интуитивно.
Портал:tachyons.io/
3. Скелет
Если вы работаете над небольшим проектом или просто не чувствуете, что вам нужны все утилиты более крупного фреймворка, вам следует использовать Skeleton.
На официальном сайте Skeleton css представлены три основных преимущества Skeleton:
- Легкий как перышко (~400 строк) и созданный с учетом мобильных устройств.
- Стили, разработанные как отправная точка, а не как основа пользовательского интерфейса.
- Quick to start with zero compiling or installing necessary.
(быстрый старт, нулевая компиляция или установка)
В соответствии с характеристиками и преимуществами Skeleton типичные сценарии его применения можно резюмировать следующим образом:
- изучение CSS и демонстрационные упражнения;
- Создавайте небольшие адаптивные мобильные приложения;
Портал:getskeleton.com/
4. Фонд
Foundation — это адаптивный интерфейсный фреймворк, созданный компанией ZURB, занимающейся дизайном продуктов. По сравнению с другими инструментами того же типа мобильное решение Foundation лучше. Опираясь на идеи и методы адаптивного веб-дизайна, Foundation создала соответствующие пресеты для представления структур контента на различных типах устройств.
Портал:get.foundation/
Пять, бутстрап
Bootstrap остается одним из самых популярных фреймворков CSS. Они предоставляют множество документации, примеров и демонстраций, которые помогут вам ускорить разработку адаптивной веб-страницы. Текущая версия фреймворка — Bootstrap 5 с некоторыми изменениями по сравнению с V4:
- Имеет собственную библиотеку иконок SVG.
- jquery больше не поддерживается
- IE больше не поддерживается
- Добавлены пользовательские свойства css
- Усовершенствованная система сетки
- Формы можно обновлять
Портал:getbootstrap.com/
6. Уайкит
По сравнению с другими CSS-фреймворками общего назначения, UIkit имеет некоторые компоненты, которых нет в этих фреймворках, например:
- Лайтбокс (создайте необычный лайтбокс для изображений и видео с модальными диалогами)
- Parallax (динамическая функция CSS, которая зависит от положения полосы прокрутки страницы)
- Несмотря на (создание вложенных списков можно отсортировать, перетаскивая)
- Сортируемый (создает сортируемые сетки и списки для изменения порядка элементов)
Портал:getuikit.com/
7. Семантический пользовательский интерфейс
Семантика означает семантику, а поскольку классы Semantic UI имеют четкие и простые названия, разработчики не только экономят время на обучении, но и делают разработку проекта более быстрой и интуитивно понятной. Кроме того, разнообразие макетов — еще одно преимущество Semantic UI. Благодаря разным темам вы легко найдете необходимые компоненты для различных проектов.
У семантического пользовательского интерфейса есть некоторые недостатки: он обновляется реже, чем другие популярные фреймворки, и на некоторых устройствах работает хуже.
Портал:semantic-ui.com/
Восемь, бульма
Bulma — это современный CSS-фреймворк, основанный на Flexbox. Он предоставляет готовые к использованию интерфейсные компоненты, которые можно легко комбинировать для создания адаптивных веб-интерфейсов.
По сравнению с бутстрапом, самая большая разница между ними заключается в том, что bulma — это чистый css, без js, а в бутстрапе есть JS. Вот примерРасположение столбцовпример:
- Добавить к
columnsконтейнер - Добавляйте любое количество
columnэлемент
Независимо от количества столбцов,ширинаВсеравный.
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>
Портал:bulma.io/
9. Пикник
Picnic — это легкая структура CSS, размер которой составляет менее 10 КБ. Самая большая особенность платформы заключается в том, что она имеет несколько интерактивных компонентов, включая сетки, формы, вкладки, всплывающие подсказки и многое другое, которые могут помочь разработчикам быстро создавать адаптивные веб-сайты и веб-приложения.
Picnic CSS — этоSassНаписано в облегченной среде пользовательского интерфейса, которая упрощает редактирование и настройку таких переменных, как цвет и длина. Он также имеет некоторые приятные компоненты пользовательского интерфейса на чистом CSS, такие как модальные окна и ползунки содержимого.
Портал:picnicss.com/
10. РЭШ.css
NES.css имитирует 8-битную графику Nintendo Entertainment System для создания ретро-игры:
NES.css требует только CSS и не зависит от JavaScript. Как кричит каждый любитель игр: любовь!
Портал:nostalgic-css.github.io/NES.css/
Гитхаб:GitHub.com/nostalgic — От…