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

См. также

Service Desk Online – веб-портал для 1С ITIL, 1С ITILIUM и Управление IT-отделом 8

WEB-интеграция Администрирование веб-серверов Платные (руб)

Веб-портал обеспечивает удобный доступ к конфигурации 1С:ITIL(ИТИЛ), 1С:ITILIUM, Управление IT-отделом 8 через интернет с любого устройства посредством браузера, увеличивая эффективность работы пользователей и снижая нагрузку на сервер. Быстрая инсталляция портала за пару часов, удобный и интуитивно понятный интерфейс и безопасность данных помогут упростить работу с порталом и ускорить выполнение бизнес-процессов компании.

128000 руб.

19.12.2023    3465    5    0    

11
Amocrm: интеграция с 1С

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

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

60000 руб.

07.05.2019    35633    70    45    

30
Веб-портал "Онлайн-заказ" для 1С

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

Онлайн-заказ - это решение для автоматизации процесса оформления заказов на сайте в торговых организациях. Продукт обеспечивает легкое взаимодействие между компанией и клиентами через веб-интерфейс, интегрированный с 1С:Предприятие. Система позволяет снизить операционные расходы, повысить лояльность клиентов и оптимизировать работу отдела продаж.

57600 руб.

26.11.2024    3131    4    3    

5
Интеграция 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    123105    408    141    

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

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

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

24000 руб.

27.09.2024    5255    5    2    

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

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

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

14400 руб.

20.12.2024    1297    9    2    

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

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

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

36000 руб.

03.08.2020    19522    24    22    

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

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

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

16800 руб.

22.03.2017    40207    20    50    

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

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