Верстка главной страницы 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 –

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

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

36000 руб.

03.08.2020    16081    13    18    

13

Управление доставками Boxberry, СДЭК, ЭкстраПочта, Почта России, Энергия, DPD, ПЭК, Grastin, Деловые Линии, КСЕ, Dalli

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

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

18000 руб.

10.03.2016    57064    291    97    

64

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    18164    10    15    

16

SALE! 15%

Все службы доставки в Вашей 1С! Без изменения конфигурации! УТ, ERP, КА, УНФ

WEB-интеграция Рабочее место Оптовая торговля Розничная торговля Логистика, склад и ТМЦ Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Россия Управленческий учет Платные (руб)

40+ служб доставки для 1С в одном модуле! Внешняя обработка, которая НЕ изменяет Вашу конфигурацию! Подписная модель на 1 год.

19200 16320 руб.

22.03.2017    36794    16    47    

77

Интеграция с OpenCart 2.x, 3x

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

Внешняя обработка, позволяет обмениваться данными между OpenCart (самая популярная бесплатная cms для интернет-магазинов) и 1С:Предприятие 8.

6800 руб.

17.11.2015    116455    347    137    

216

Автоматическая загрузка файлов (например, прайс-листов) из электронной почты, FTP, HTTP, их обработка и выгрузка на FTP (на сайт) и для других целей

Прайсы WEB-интеграция Ценообразование, анализ цен Файловый обмен (TXT, XML, DBF), FTP Автомобили, автосервисы Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Программа с заданным интервалом времени (или по ручной команде) скачивает файлы (например, прайс-листы поставщиков) из различных источников: письма электронной почты, FTP или HTTP-адреса, и сохраняет их в каталог упорядоченной структуры. При этом извлекает файлы из архивов, может переименовывать файлы и менять их формат (csv, xls, txt). Можно настроить выгрузку обработанных файлов на сайт (через FTP-подключение). Программа будет полезна компаниям, у которых есть большое количество поставщиков и/или прайс-листы поставщиков обновляются часто (необязательно прайс-листы, файлы могут быть любого назначения). Собранные таким образом актуальные версии прайс-листов можно выгрузить с помощью программы себе на сайт (или на любой FTP-сервер) или выполнить другие необходимые задачи.

25200 руб.

28.05.2015    85385    26    51    

50

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    12991    33    8    

12

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16610    43    49    

23
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. dsdred 3340 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 5433 08.09.22 14:01 Сейчас в теме
(1) про как сделать я не рассказывал
+ – Ответить
2. Aspire1C 858 08.09.22 12:16 Сейчас в теме
Приокольно. У вас левая основная панель с меню не скролится вверх, вниз)
keln; +1 – Ответить
9. John_d 5433 08.09.22 14:12 Сейчас в теме
(2) Знаю) Спасибо за внимательность) С прокруткой зашел в тупик, может со временем решу эту задачу.
+ – Ответить
3. SerVer1C 773 08.09.22 12:25 Сейчас в теме
Интересно! Темная тема зашла! (ждем-с от команды ИС такое). Вот только я не понял, что кроме темной темы вы сделали?
+ – Ответить
7. John_d 5433 08.09.22 14:02 Сейчас в теме
(3) там все сделано с нуля, очень похоже на оригинал.
+ – Ответить
4. Vo-Va 771 08.09.22 12:28 Сейчас в теме
Можно ли с его помощью оформить публикацию на инфостарте? Ничего не понимаю в веб дизайне, но инструменты редактирования публикации довольно убогие.
+ – Ответить
8. John_d 5433 08.09.22 14:03 Сейчас в теме
(4) нельзя
+ – Ответить
5. biimmap 1904 08.09.22 12:35 Сейчас в теме
Ссылок на мои статьи нет на фишинговой странице))) Так не интересно.
+ – Ответить
10. RocKeR_13 1328 08.09.22 14:29 Сейчас в теме
На "лисичке" немного поехала менюшка)
Прикрепленные файлы:
rom-x; +1 – Ответить
13. John_d 5433 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 115 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 5433 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 5433 12.09.22 09:23 Сейчас в теме
(18) https://tailwindcss.ru/docs/reusing-styles/#izvlechenie-klassov-s-pomoshhyu-apply
+ – Ответить
14. Silenser 596 08.09.22 16:19 Сейчас в теме
Не очень понял, а для чего это в принципе? ИМХО на данном портале мы все же обсуждаем вопросы автоматизации бизнес логики, а не механизмы управления свойствами элементов веб страниц. По идее, большинству обитателей этого сайта будет достаточно чего-то вроде WordPress или Drupal при создании своих сайтов. Это не в упрек, просто мне не очень ясна цель этого упражнения. Так то все это выглядит вполне понятно, это вам не с divами мучатся.
Fox-trot; user1831019; +2 – Ответить
16. user1831019 08.09.22 22:12 Сейчас в теме
(14) Говорят, что некоторые даже СуперМарио на 1С написали...
+ – Ответить
15. Steelvan 302 08.09.22 17:52 Сейчас в теме
Хех, приветствую коллегу по Попутке (так оно примерно переводится).
Мы сейчас для Ленкодо взяли скрипты с бутстрапа и переводим на попутку.

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