- 0
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
Diasouls
Всем доброго времени суток!
Давайте сегодня поговорим о том, как подключать стили на проектах, где все файлы .css занимают больше 300-400кб.
Вопрос появился после разговора с коллегами по профессии в паблике Хабрахабра в вк.
Собственно сам вопрос: Как лучше подключать стили, если они имеют довольно большой объем?
Речь пойдет про bootstrap + свой css.
Словарь: bootstrap -> bs3
Да-да, матерый верстальщик скажет, что фу такую бяку юзать, лучше самому все написать. Но мы не ищем легких путей и думаю эта тема интересна всем тем, кто связан с этим по жизни. Однако, даже если убрать bootstrap, то все равно в любом проекте есть основные стили, а вокруг них танцуют другие
Здесь собраны некоторые идеи комментаторов и мои соображения, а также что я думаю по той или иной идее:
Идея #1. Модульная система.
Разобрать bs3 и свой.css на модули и подключать их по необходимости.
Плюсы:
На страницах подключаются только необходимые "модули" -> меньше размер.
После открытия всех типов страниц будет кэшированая полная версия стилей.
Минусы:
Одинокие .css файлы -> больше запросов к серверу, а это критично на мобильных устройствах.
Небольшое замедление скорости разработки, из-за нарезки модулей.
Идея #2. Основа и комплексные стили страниц.
Разобрать все файлы стилей на модули. Определить все стили, которые используются на всех страницах сайта и собрать их в основной .css файл и подключать его, а дальше использовать комплекс стилей конкретной страницы, когда подключается второй файл со всеми стилями необходимыми для этой страницы.
Плюсы:
Меньший размер подключенных .css.
Минусы:
Скорость разработки медленная, из-за сборки стилей.
Кэш будет раздут и для каждой страницы на 50% новый.
Идея #3: Идея #1 и #2 в профиль.
Тоже самое что и вторая идея, но использовать основу и вместо второго файла использовать модули стилей из первой идеи.
Плюсы:
Меньший размер подключенных .css.
Больший шанс, что кроме основы, будет закэширован и какой-то из модулей.
Минусы:
Небольшое замедление скорости разработки, из-за выделения основы и модулей.
Одинокие .css файлы -> больше запросов к серверу, а это критично на мобильных устройствах.
Идея #4. Безумие по диагонали.
А давайте сделаем основной .css файл, а для конкретной страницы будем в <head></head> писать <style>стили</style>.
Плюсы:
Один запрос к серверу.
Хорошо сжимается gzip.
Минусы:
Скорость разработки малость пострадает, так как нужно выделить основу и инклудить стили в <head></head>
Эстетика нарушена.
Кэширование применимо только к основе.
Идея #5. Хардкор.
Оставить все эти теории и практики и подключить как всегда, одним файлом.
Плюсы:
Скорость разработки как всегда.
Поддержка как всегда.
Один запрос на все стили.
100% кэш.
Минусы:
Огромный размер файла стилей, что может привести к очень значительному времени загрузки страницы и его внешнему виду.
Прошу не ругать за такой вопрос, если его где-то обсуждали. Честно - я не нашел.
Жду ваших ответов и готов обсудить любой из вариантов. Любопытно все это мне
Edited by DiasoulsLink to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.