HTML | 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.

Спецсимволы для использования в HTML коде

Paul Osmachko — Mon, 13 Aug 2018 12:18:07 +0000

В этой статье будем собирать спецсимволы которые иногда нужны в коде.

Спецсимволы:

			неразрывный пробел
	`¡`	¡	перевернутый восклицательный знак
`€`	`€`	€	евро
`§`	`§`	§	параграф
`©`	`©`	©	знак копирайтов copyright

Сообщение Спецсимволы для использования в HTML коде появились сначала на 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.

Как поместить кусок html кода в переменную php

Paul Osmachko — Mon, 13 Nov 2017 13:59:33 +0000

Как поместить большей кусок html кода в переменную php? Как сделать echo для большего html кода? Как записать в переменную html код.

Чтобы больше не искать помещу этот код тут:

$content = <<
CONTENT;

Но не скажу что этот вариант лучше всего использовать. Но в некоторых случаях приходится.

Сообщение Как поместить кусок html кода в переменную php появились сначала на Wiki | PWODEV.

Как разбить на array каждую строку из textarea. PHP

Paul Osmachko — Mon, 13 Nov 2017 09:50:23 +0000

Имеем форму с полем ввода textarea и кнопочкой отправить (Submit). Отправляем это все методом пост (POST). Дальше обрабатываем эту форму с помощью PHP. Задача в переменной которая приходит от textarea каждую строку преобразовать в ячейку массива. Итак приступим.

Код формы:

Обработчик php:





В итоге имеем массив данный где каждая строка из textarea является ячейкой массива.







Если вы знаете более лаконичный способ пишите в комментариях.
Сообщение Как разбить на array каждую строку из textarea. PHP появились сначала на Wiki | PWODEV.



Pug (Jade) —  Database, Loop повторяющихся блоков
Paul Osmachko — Wed, 08 Nov 2017 12:08:14 +0000

Для того чтобы верстать повторяющиеся блоки с помощью Pug, раньше называвшийся Jade, не обязательно постоянно копировать повторяющийся блок, достаточно вывести этот блок в цикле «each val in array», а данные выводившиеся в этом блоке сохранить в условную базу данных Pug. В таком случае нам не прийдется добавлять наши изменения в верстке к каждому блоку, а всего лишь изменить один раз в цыкле, после чего наши изменения в коде добавятся ко всем блокам сразу. Так как же это сделать?



1. Для начала создадим файлик базы данных. Назовем его db.pug.



2. Поместим в этот файлик небольшой массив данных (Синтаксис такой же как у JSON) 



- var db_array = [
        {
            id: '1',
            title: 'The title 1',
            content: 'The content 1'
        },
        {
            id: '2',
            title: 'The title 2',
            content: 'The content 2'
        },
    ]



3. Теперь заходим в файл где нам нужно вывести повторяющиеся блоки и добавляем там вывод этого массива: 



each val in db_array
    .array_item_block(id=val.id)
        .item_title!= val.title
        .item_content!= val.content



4. Теперь в html варианте мы увидим следующее:




    The title 1
    The content 1


    The title 2
    The content 2




Теперь возьми себя в руки и протестируй все у себя локально, и если что-то пойдет не так — напиши это в комментариях. 🙂
Сообщение Pug (Jade) —  Database, Loop повторяющихся блоков появились сначала на Wiki | PWODEV.



Viewport — мета тег для нормальной верстки для мобильного устройства.
Paul Osmachko — Tue, 24 Oct 2017 09:19:16 +0000

Viewport это штука без которой нельзя обойтись. Если вы верстаете под мобильное устройство iPhone или Android да и вообще любое другое устройство, правильно чтобы верстка отображалась одинаково на всех видах экрана, чтобы не было косяков и все было корректно по дизайну.



Если вы верстаете правильно, а так и надо, то вам пригодится очень важный тег который позволит убрать стандартное увеличение, зум (zoom) и чтобы ширина (width) и высота (height) на мобильном (mobile) устройстве отображалась пиксель в пиксель, только тогда мы сможем видеть реальные размеры на лубом размере экрана.



Вот собственно сам мета тег:







Вставлять его надо в самом вверху после открытия 
Сообщение Viewport — мета тег для нормальной верстки для мобильного устройства. появились сначала на Wiki | PWODEV.