less | Wiki | PWODEV

Отцентровать popup с помощью css

Paul Osmachko — Thu, 25 Oct 2018 14:46:40 +0000

Ранее мы писали о том как привязать футер к низу страницы, сегодня мы рассмотрим как отцентровать popup с помощью css. Мы пересмотрели много различных методов, но ни один из них не удовлетворял нашим нуждам, поэтому было принято решение найти идеальный метод центрирования блока (попапа) по вертикале и горизонтали, средствами css, без использования js. Метод учитывает что высота попапа может быть разной: маленькой, большей, превышающей размер окна. В случае большей высоты попапа, появится скролл (scroll), и popup можно будет прокрутить. Также мы учли, что в этом случае должен быть не большей отступ сверху и снизу.

Этот метод был разработан совместно с Fullstack Developer Vitalii Zelenskyi — http://www.VitaliyZelenskiy.de

Метод как отцентровать popup с помощью css:

HTML код:


	
	
		
			
			text

CSS код:

.popup {
  align-items: flex-start;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  overflow: auto;
}
.popup .popup_bg {
  background: #262626;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.6;
}
.popup .popup_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 30px;
}
.popup .popup_content {
  border: 2px solid #000;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  width: 200px;
}

Скриншоты:

Уменьшим экран по высоте. Popup останется вверху с отступом и появится скролл (scroll).

Если прокрутить попап вниз, там будет тоже отступ:

Потестировать как работает метод можно по ссылке: http://test.pwodev.com/popup/

Этот метод будет постепенно усовершенствоваться. Но на данный момент, для нас это лучший метод. Если вы хотите предложить другие способы, или вы нашли ошибки в нашем методе, оставляйте комментарии.

Сообщение Отцентровать popup с помощью css появились сначала на Wiki | PWODEV.

Как привязать футер к низу страницы

Paul Osmachko — Tue, 19 Dec 2017 12:30:04 +0000

Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:

После того как структура страницы готова, приступаем к настройке css.

Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.

Прижать футер к низу экрана css код:

html,
body{
     height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
}
.main {
    padding-bottom: 80px;
}
.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.

В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.

Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.

Сообщение Как привязать футер к низу страницы появились сначала на Wiki | PWODEV.

Настройка PhpStorm pug (jade) и less Watchers

Paul Osmachko — Fri, 01 Dec 2017 10:11:07 +0000

Ранее на мы уже рассматривали как в PhpStorm включить отображение скрытых файлов, сегодня мы настроем в PhpStorm Watchers вочеры для pug и less.

Скачать PhpStorm можно на официальном сайте: https://www.jetbrains.com/phpstorm/

Настройка pug / Jade Watchers.

Для начала нам нужно установить поддержку pug.

PhpStorm -> Preference -> Plugins

Дальше ищем плагин Pug (ex- Jade) и устанавливаем его.

Чтобы правильно настроить в PhpStorm вочер pug делаем простые манипуляции в настройках:

PhpStorm -> Preference -> Tools -> File Watchers

Добавляем вочер Pug и заполняем настройками как на скриншоте:

Важно в аргументах поставить галочку на против Track only root files

Также нужно заполнить аргументы (Arguments):

--pretty --out ../ $FileName$

—pretty — этот аргумент означает что выдаваемый html код будет структурированный. Если этот параметр не поставить то код будет в одну строку.
—out ../ — это путь куда будет генерироваться html код. ../ — означает на одну папку выше чем текущий файл.

Настройка less Watchers.

Чтобы правильно настроить less вочер идем по тому же пути что и pug.

PhpStorm -> Preference -> Tools -> File Watchers

Вводим настройки что на скриншоте:

Опять же важно поставить галочку на против Track only root files чтобы не создавать мусора, и следить только за основным файлом, и не учитывать подключенные файлы.

Чтобы выбрать папку где будет копмилироваться css файл, настраиваем параметр Output path to refresh:

../css/$FileNameWithoutExtension$.css

Эта настройка скажет что нужно выйти на папку выше создать там папку css и сохранить там сгенерированный файл.

Также есть версия этого вочера где генерируется map. В таком случае оставляем все как есть кроме поля Arguments:

$FileName$
../css/$FileNameWithoutExtension$.css

Если нам надо сжать css файл в одну строчку нам необходимо дополнение к less. Его можно установить этой командой в командной строке:

npm install -g less-plugin-clean-css

после этого в настройках аргументов пишем опцию:

--clean-css --no-color $FileName$

На этом все, вочеры pug и less настроены и можно приступать к работе.

Настройка SASS/SCSS Watchers.

Все похоже как в настройке less только в аргументах пишем:

--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --style expanded

Если у вас есть дополнения или новые идеи к этой статье, пишите их в комментариях. Также для того чтобы написать на нашем сайте свою статью — у нас открыта регистрация по ссылке http://wiki.pwodev.com/wp-admin

Сообщение Настройка PhpStorm pug (jade) и less Watchers появились сначала на Wiki | PWODEV.