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

08.09.22

Сверстал главную страницу 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)

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

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

1234

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

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

+29 –

См. также

Веб-портал "Service Desk Online" для конфигураций 1С:ITIL, 1С:ITILIUM, Управление IT-отделом 8

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

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

128000 руб.

19.12.2023 2088 2 0

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

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

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

57600 руб.

26.11.2024 1830 1 1

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

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

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

60000 руб.

07.05.2019 34138 63 45

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

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

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

24000 руб.

27.09.2024 3292 3 2

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

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 64243 308 98

Интеграция с сервисом vetmanager в 1С: Бухгалтерия 3.0

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

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

12000 руб.

02.02.2021 18499 53 50

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

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

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

36000 руб.

03.08.2020 18736 20 22

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

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

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

16800 руб.

22.03.2017 39696 19 50

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. dsdred 3785 08.09.22 12:06 Сейчас в теме

Предлагаю переименовать статью:
"Как сделать фишинговый сайт"

Ответить

6. John_d 5964 08.09.22 14:01 Сейчас в теме

(1) про как сделать я не рассказывал

2. Aspire1C 873 08.09.22 12:16 Сейчас в теме

Приокольно. У вас левая основная панель с меню не скролится вверх, вниз)

9. John_d 5964 08.09.22 14:12 Сейчас в теме

(2) Знаю) Спасибо за внимательность) С прокруткой зашел в тупик, может со временем решу эту задачу.

3. SerVer1C 871 08.09.22 12:25 Сейчас в теме

Интересно! Темная тема зашла! (ждем-с от команды ИС такое). Вот только я не понял, что кроме темной темы вы сделали?

7. John_d 5964 08.09.22 14:02 Сейчас в теме

(3) там все сделано с нуля, очень похоже на оригинал.

4. Vo-Va 928 08.09.22 12:28 Сейчас в теме

Можно ли с его помощью оформить публикацию на инфостарте? Ничего не понимаю в веб дизайне, но инструменты редактирования публикации довольно убогие.

8. John_d 5964 08.09.22 14:03 Сейчас в теме

(4) нельзя

5. biimmap 2035 08.09.22 12:35 Сейчас в теме

Ссылок на мои статьи нет на фишинговой странице))) Так не интересно.

10. RocKeR_13 1381 08.09.22 14:29 Сейчас в теме

На "лисичке" немного поехала менюшка)

Прикрепленные файлы:

13. John_d 5964 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 5964 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 5964 12.09.22 09:23 Сейчас в теме

(18) https://tailwindcss.ru/docs/reusing-styles/#izvlechenie-klassov-s-pomoshhyu-apply

14. Silenser 613 08.09.22 16:19 Сейчас в теме

Не очень понял, а для чего это в принципе? ИМХО на данном портале мы все же обсуждаем вопросы автоматизации бизнес логики, а не механизмы управления свойствами элементов веб страниц. По идее, большинству обитателей этого сайта будет достаточно чего-то вроде WordPress или Drupal при создании своих сайтов. Это не в упрек, просто мне не очень ясна цель этого упражнения. Так то все это выглядит вполне понятно, это вам не с divами мучатся.

16. user1831019 08.09.22 22:12 Сейчас в теме

(14) Говорят, что некоторые даже СуперМарио на 1С написали...

15. Steelvan 307 08.09.22 17:52 Сейчас в теме

Хех, приветствую коллегу по Попутке (так оно примерно переводится).
Мы сейчас для Ленкодо взяли скрипты с бутстрапа и переводим на попутку.

Да, смысл в том, чтобы всю работу со стилями делать чисто из js в любых комбинациях.
И в css не залезать от слова совсем :)
Загрузить css на клиента и закешировать в обозревателе для ускорения загрузки странички.

17. John_d 5964 09.09.22 10:03 Сейчас в теме

(15) переводить сложнее, чем с нуля писать?

19. baracuda 2 09.09.22 11:24 Сейчас в теме

Сам сейчас перешел на tailwind, нравитя все кроме того, что html разметка становится монструозной из за раздутых классов.

Оставьте свое сообщение

E-mail:

Автор:

Евгений Комиссаров (John_d)

Рейтинг: 5964

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 1723269

Создание 08.09.22 12:00

Обновление 08.09.22 12:00

Статистика:

Просмотры 4475

Загрузки 0

Рейтинг 29

Комментарии 21

Характеристики:

Код открыт Да

Рубрики WEB-интеграция Работа с интерфейсом

Кому Программист

Тип файла Нет файла

Платформа Не имеет значения

Конфигурация Универсальные

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Бесплатно (free)