Верстка главной страницы Infostart на tailwind

08.09.22

Интеграция - WEB-интеграция

+29 –
Сверстал главную страницу infostart на framework tailwind css.

TailwindCSS – это постепенно набирающий популярность CSS-фреймворк, позволяющий вносить изменения в оформление сайтов и приложений, не покидая HTML-разметку

Подробнее: tailwindcss.ru

 
 Пример

 

Верстка infostart

Отвечу сразу на вопрос, зачем я это сделал?

1. Для практики работы с tailwindcss.

2. На главной странице infostart присутствуют множество динамических элементов, потому верстка предстояла не скучной.

Результат можно посмотреть тут: verstka-infostart.web.app

 

Выпадающие меню (по иконке, корзине, плюсику, трубке)

 

 

 1234

 

Левая панель (пункты меню открываются как аккордеон). Два варианта открывания по кнопке "гамбургер" и наведение мыши на левый край экрана

 

 

 1.2.

 

Правая панель (открывается по нажатию на конверт и на колокольчик).

 

 

 1.2.

 

Адаптация под экран.(чтобы посмотреть, можно в chrome нажать f12)

Центральные блоки автоматически переносятся вниз, если не вмещаются.

 

 

 

 

xl

 

 

md

 

 

sm

 

 

Две темы (светлая и темная)

 

 

 12

1234

12

 

п.с.: Это была технически интересная задача. Я получил необычный опыт и рад, что у меня все получилось)

Спасибо за внимание. 

Вступайте в нашу телеграмм-группу Инфостарт

+29 –

См. также

Infostart Dashboard: Монитор показателей, виджеты и дашборды в 1С 8.3

Работа с интерфейсом Анализ учета Мониторинг 1С:Предприятие 8 1С 8.3 1C:Бухгалтерия 1С:Бухгалтерия 3.0 1С:ERP Управление предприятием 2 1С:Управление холдингом 1С:Зарплата и Управление Персоналом 3.x 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Управление торговлей 11 Платные (руб)

Создайте свой функциональный интерфейс в любой конфигурации 1С с помощью расширения Infostart Dashboard. Настраивайте панели виджетов с метриками, индикаторами и показателями на начальном экране. Узнайте возможность внедрения подсистемы у себя в конфигурации с помощью бесплатной обработки "Анализ внедрения подсистемы 1С Infostart Dashboard"!

31720 руб.

27.03.2025    78107    53    40    

63
REST API для интеграции 1С:Бухгалтерия предприятие 3.0 (3.0.177.30) с внешними системами через HTTP-запросы. Создание контрагента, счёта и реализации (услуг). Получение этих сущностей в виде JSON, и печатных форма счета и акта

WEB-интеграция 1С:Предприятие 8 1С:Бухгалтерия 3.0 Платные (руб)

Мощная интеграция ваших систем с 1С:Бухгалтерия предприятия 3.0 через современный HTTP-интерфейс

137250 руб.

31.07.2025    4370    3    2    

1
Интеграция Альфа Авто 5 и 6 и AUTOCRM + LOGICSTARS

Сайты и интернет-магазины WEB-интеграция Системный администратор Программист Пользователь 1С:Предприятие 8 1C:Бухгалтерия 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM / LOGICSTARS. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM / LOGICSTAR разных брендов в одной информационной базе в ручном и автоматическом режиме.

42700 руб.

03.08.2020    23767    36    24    

28
Интеграция Vetmanager с 1С: автоматизация учета для ветеринарных клиник. Синхронизация документов, справочников и оплат через API

WEB-интеграция Программист 1С:Предприятие 8 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Расширение для автоматизации передачи данных между сервисом Vetmanager с 1С: Бухгалтерия 3.0. Решение позволяет загружать документы и справочники из Ветменеджер в 1С:Бухгалтерию, сокращая время на ручной ввод данных и минимизируя ошибки.

24000 руб.

02.02.2021    22497    67    52    

42
Выгрузка товаров в VK маркет из 1С

WEB-интеграция Загрузка и выгрузка в Excel Программист Пользователь 1С:Предприятие 8 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

Расширение освободит вас от необходимости вручную обновлять товары в группах ВКонтакте. Достаточно задать правила один раз, и система автоматически синхронизирует ваш каталог. Вы сможете легко выбирать, какие товары публиковать, создавая гибкие критерии отбора. Например, можно добавить важные для покупателей параметры: цвет, размер или другие характеристики.

12200 руб.

29.08.2025    2260    7    6    

9
Экспортер — автоматизация выгрузки данных из 1С в Spot2D

WEB-интеграция Программист Бизнес-аналитик 1С:Предприятие 8 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Оптовая торговля, дистрибуция, логистика ИТ-компания Платные (руб)

Модуль "Экспортер" — это расширение для 1С, предназначенное для автоматизации процессов выгрузки данных. Оно позволяет эффективно извлекать, преобразовывать и передавать данные из систем 1С в интеграционную платформу Spot2D. Подсистема упрощает настройку, снижает количество ручных операций и обеспечивает удобный контроль данных.

17568 руб.

20.12.2024    5779    25    4    

27
Интеграция 1С с API СДЭК, Деловые Линии, ПЭК, Boxberry, Почта России и др. Управление доставками в 1С 8.3

WEB-интеграция Рабочее место Оптовая торговля Розничная торговля Логистика, склад и ТМЦ Пользователь 1С:Предприятие 8 1С:Бухгалтерия 2.0 1С:Бухгалтерия 3.0 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 1.6 1С:Управление нашей фирмой 3.0 1С:Управление торговлей 10 1С:Управление торговлей 11 1С:Розница 2 1С:Розница 3.0 Оптовая торговля, дистрибуция, логистика Россия Управленческий учет Платные (руб)

Программный продукт "Управление доставками в 1С" позволяет обмениваться с личным кабинетом СДЭК, Деловые Линии, ПЭК, DPD, Почта России и другими транспортных компаниями. Упрощает создание заявок и резервирование заказов прямо в интерфейсе 1С

18300 руб.

10.03.2016    71498    315    100    

71
Дизайнер форм 1С

Разработка Инструментарий разработчика Работа с интерфейсом Адаптация типовых решений Нейросети 1C:Бухгалтерия 1C:ERP 1С:ЗУП 1С:КА 1С:УНФ 1С:УТ 1С:Розница 1С:ДО 1С:ERP Управление предприятием 2 Платные (руб)

Разработка "Дизайнер форм 1С" реализована в виде расширения 1С и является универсальным инструментом для разработки прототипа форм с целью демонстраций, технических заданий и т.д. Без участия разработчика с возможностью экспорта в файл внешней обработки и генерации формы используя искусственный интеллект.

36600 руб.

28.08.2025    7175    2    2    

6
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. dsdred 4214 08.09.22 12:06 Сейчас в теме
Предлагаю переименовать статью:
"Как сделать фишинговый сайт"
klaus38; maksa2005; mrChOP93; JohnyDeath; Silenser; корум; ong1990; Irwin; serg-lom89; SerVer1C; user621724_Dimav1979; a_a_burlakov; Aspire1C; Denis_CFO; +14 – Ответить
6. John_d 6094 08.09.22 14:01 Сейчас в теме
(1) про как сделать я не рассказывал
+ – Ответить
2. Aspire1C 877 08.09.22 12:16 Сейчас в теме
Приокольно. У вас левая основная панель с меню не скролится вверх, вниз)
keln; +1 – Ответить
9. John_d 6094 08.09.22 14:12 Сейчас в теме
(2) Знаю) Спасибо за внимательность) С прокруткой зашел в тупик, может со временем решу эту задачу.
+ – Ответить
3. SerVer1C 1062 08.09.22 12:25 Сейчас в теме
Интересно! Темная тема зашла! (ждем-с от команды ИС такое). Вот только я не понял, что кроме темной темы вы сделали?
+ – Ответить
7. John_d 6094 08.09.22 14:02 Сейчас в теме
(3) там все сделано с нуля, очень похоже на оригинал.
+ – Ответить
4. Vo-Va 1102 08.09.22 12:28 Сейчас в теме
Можно ли с его помощью оформить публикацию на инфостарте? Ничего не понимаю в веб дизайне, но инструменты редактирования публикации довольно убогие.
+ – Ответить
8. John_d 6094 08.09.22 14:03 Сейчас в теме
(4) нельзя
+ – Ответить
5. biimmap 2114 08.09.22 12:35 Сейчас в теме
Ссылок на мои статьи нет на фишинговой странице))) Так не интересно.
+ – Ответить
10. RocKeR_13 1469 08.09.22 14:29 Сейчас в теме
На "лисичке" немного поехала менюшка)
Прикрепленные файлы:
rom-x; +1 – Ответить
13. John_d 6094 08.09.22 16:01 Сейчас в теме
(10) да, это сложный элемент два переключателя стилизованные под кнопки. Видимо что-то не понравилось firefox
+ – Ответить
11. Asmody 08.09.22 15:30 Сейчас в теме
(0) Есть преимущества в использовании tailwind по сравнению с традиционной версткой?
К примеру, у пункта в боковом меню в оригинале 1 класс: mlmenu-item-colored, у вас - 9 классов.
При традиционном подходе если понадобится поменять какое-то свойство у всех пунктов меню, мы меняем его (условно) в одном месте. Вам придется поменять ~12 мест, стараясь при этом не перепутать пункты "боковика" с чем-то ещё.
Просто есть популярное мнение, что tailwind "переизобрёл" атрибут style (использование которого считается чуть ли не дурным тоном).
+ – Ответить
20. sttt 116 10.09.22 22:05 Сейчас в теме
(11) Если я правильно понял, все тяготы. Вы можете использовать директиву @apply в Tailwind для извлечения повторяющихся служебных шаблонов в пользовательские классы CSS, когда часть шаблона кажется неудобной.
Например поменять: 
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Сохранить
</button>


На такой компактный вариант.

Добавить в стилях: 
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}
Показать

Использовать по назначению: 
<button class="btn-primary">
  Save changes
</button>


Вполне компактно получается.
+ – Ответить
12. John_d 6094 08.09.22 15:59 Сейчас в теме
(11) Просто очень удобно что вся верстка в html. Через какое-то время начинаешь на лету понимать как ведет себя элемент по его классам. Не нужно выдумывать названия классам и переходить постоянно в css файл.
Есть отличие от style:
1.JS легко работает с классами добавить, удалить, проверить есть такой класс или нет.
2.Некоторые классы это набор css-свойств к примеру text-xl - это ({ font-size: 1.25rem; line-height: 1.75rem;})
3.В style тяжеловато будет написать адаптивность, светлую и темную тему

tailwind предоставляет возможность добавить свой класс в настройках и тогда можно всем похожим элементам давать один класс к примеру btn
@layer components {
.btn {
@apply max-w-fit inline-block mt-6 px-8 shadow-castomred bg-lightred rounded-2xl text-white
}
}
+ – Ответить
18. Asmody 09.09.22 10:53 Сейчас в теме
(12) @apply нет в стандарте. Какая-то отсебятина?
+ – Ответить
21. John_d 6094 12.09.22 09:23 Сейчас в теме
(18) https://tailwindcss.ru/docs/reusing-styles/#izvlechenie-klassov-s-pomoshhyu-apply
+ – Ответить
14. Silenser 621 08.09.22 16:19 Сейчас в теме
Не очень понял, а для чего это в принципе? ИМХО на данном портале мы все же обсуждаем вопросы автоматизации бизнес логики, а не механизмы управления свойствами элементов веб страниц. По идее, большинству обитателей этого сайта будет достаточно чего-то вроде WordPress или Drupal при создании своих сайтов. Это не в упрек, просто мне не очень ясна цель этого упражнения. Так то все это выглядит вполне понятно, это вам не с divами мучатся.
Fox-trot; user1831019; +2 – Ответить
16. user1831019 08.09.22 22:12 Сейчас в теме
(14) Говорят, что некоторые даже СуперМарио на 1С написали...
+ – Ответить
15. Steelvan 316 08.09.22 17:52 Сейчас в теме
Хех, приветствую коллегу по Попутке (так оно примерно переводится).
Мы сейчас для Ленкодо взяли скрипты с бутстрапа и переводим на попутку.

Да, смысл в том, чтобы всю работу со стилями делать чисто из js в любых комбинациях.
И в css не залезать от слова совсем :)
Загрузить css на клиента и закешировать в обозревателе для ускорения загрузки странички.
John_d; +1 – Ответить
17. John_d 6094 09.09.22 10:03 Сейчас в теме
(15) переводить сложнее, чем с нуля писать?
+ – Ответить
19. baracuda 2 09.09.22 11:24 Сейчас в теме
Сам сейчас перешел на tailwind, нравитя все кроме того, что html разметка становится монструозной из за раздутых классов.
+ – Ответить
Для отправки сообщения требуется регистрация/авторизация