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

См. также

Интеграция системы Datamart завода Москвич и Альфа-Авто, редакции 5 и 6

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

Обмен данными Datamart завода Москвич и автодилера на Альфа-Авто, ред.5 и 6

240000 руб.

01.08.2023    2557    2    0    

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

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

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

36000 руб.

03.08.2020    17782    19    22    

16
Интеграция 1С с OpenCart 2.x, 3x — модуль обмена данными

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

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

6800 руб.

17.11.2015    120242    379    139    

224
Интеграция 1С и Битрикс 24 — модуль синхронизации для обмена задачами

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

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

5040 руб.

04.05.2021    19846    13    17    

16
Сервисы 1СПАРК Риски и 1С:Контрагент для «старых» конфигураций

WEB-интеграция Бизнес-аналитик Бухгалтер Пользователь Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Бухгалтерия государственного учреждения Россия Платные (руб)

Доступ к сервисам 1СПАРК Риски и 1С:Контрагент в «старых», но широко используемых конфигурациях.

6000 руб.

30.01.2019    25021    47    5    

33

SALE! 15%

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

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

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

16800 14280 руб.

22.03.2017    38746    18    49    

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

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

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

22656 руб.

25.05.2021    14422    42    8    

18
Конструктор API для обмена базы 1С 8.3 с другими системами по протоколу http в формате JSON

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

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024    1172    1    0    

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

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