Webdesign master ru – Адаптивная верстка Landing Page (AFG). Джедай верстки #5. Часть 1. Подготовка к верстке макета из PSD

CSS Grid: адаптивная верстка реального макета

Всем привет, дорогие друзья! Сегодня мы на реальном примере сверстаем крутой адаптивный макет, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и новыми возможностями CSS Grid. В конце видео мы протестируем верстку на реальном мобильном устройстве 🙂

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Результат HTML вёрстки: Смотреть

Полезные материалы и референсы:

Код кнопки из урока (button.sass):

.button
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 15px 45px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 2px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	cursor: pointer
	&::after
		transition: background-color .2s ease
		position: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

Стартовый шаблон для верстки сайтов с Bootstrap 4 на борту

Всем привет, друзья! Сегодня мы познакомимся с новой версией стартового шаблона для верстки сайтов OptimizedHTML 4 с Bootstrap 4 на борту. Для тех, кто не знает, OptimizedHTML — это стартер, который подойдет для верстки практически любого проекта, значительно сэкономит ваше время в начале верстки и содержит набор базовых модулей. OptimizedHTML основан на использовании Gulp и его полезных модулей, таких, как BrowserSync (компонент для создания локального сервера и автоматического обновления страницы в процессе работы), Sass для быстрой и комфортной работы с CSS кодом, Uglify, CleanCSS и Autoprefixer для постобработки и Rsync для деплоя.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Полезные материалы:

Размеры шрифтов в цифрах:

В прошлом уроке мы знакомились с новой версией Bootstrap 4, которая вышла из беты совсем недавно и появилась потребность в обновлении ветки уже знакомого многим OptimizedHTML. Четвертая версия стартера содержит сам фреймворк Bootstrap 4, удобные инструменты для работы с фреймворком и множество других полезностей.

Данное видео понадобится нам для изучения уроков, в которых будем верстать с использованием сетки Bootstrap 4. Сразу отвечу на вопрос — содержатся ли компоненты Bootstrap в данном стартере или только сетка? В отличие от предыдущих версий OptimizedHTML, четвертая версия содержит полную копию Sass проекта Bootstrap, а значит содержит все компоненты Bootstrap 4. Однако по-умолчанию в проект подключена только сетка и если вам необходимо использовать другие компоненты фреймворка, проблем с их подключением возникнуть не должно. Как это сделать мы разберем в этом уроке.

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

Настройка прав доступа для контент-менеджера в MODX Revolution

Всем привет! Сегодня мы рассмотрим настройку и разграничение прав в MODx Revolution. Создадим нового пользователя manager, ограничим его как следует и назначим соответствующие права на редактирование ресурсов и файлов.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Полный алгоритм действий по настройке прав контент менеджера MODx

1. Создание нового пользователя и назначение прав

• Переходим в меню: «Настройки» > «Контроль доступа»
• Переходим на вкладку «Политики доступа»
• Копируем «Content Editor», редактируем и называем новую политику «Менеджер»
• Устанавливаем разрешения:
  • Установить галку «Изменять права доступа (chmod) к каталогам»
  • Установить галку «Создавать каталоги в файловой системе»
  • Установить галку «Получать список подкаталогов для каталога в файловой системе»
  • Установить галку «Переименовывать каталоги в файловой системе»
  • Установить галку «Создавать файлы»
  • Установить галку «Смотреть список файлов в определенном каталоге»
  • Установить галку «Использовать диспетчер файлов»
  • Установить галку «Удалять файлы»
  • Установить галку «Видеть дерево файлов в левой навигационной панели»
  • Установить галку «Изменять файлы»
  • Установить галку «Загружать файлы в папку»
  • Установить галку «Просматривать содержимое файла»
  • Установить галку «Использовать пакеты в системе управления пакетами»
  • Установить галку «Использовать страницу «Поиск»»
  • Сохранить.
• Переходим в меню: «Настройки» > «Контроль доступа»
• Переходим на вкладку: «Группы пользователей & Пользователи»
• Создаем новую группу пользователей и задаем имя «Контент менеджеры»
• Устанавливаем в окне новой группы пользователей контексты web, mgr
• Политика бэкэнда в окне новой группы: «Менеджер» + Сохранить
• Новая группа пользователей «Контент менеджеры» > Редактировать
• Переходим на вкладку: «Права доступа»
• На вкладке «Доступ к контекстам» редактируем mgr, web по очереди
• mgr, web > редактировать, устанавливаем «Политика доступа» как «Менеджер» + Сохранить
• Переходим в меню «Управление» > «Пользователи» и создаем нового пользователя по кнопке «Новый пользователь»
• Имя manager, указываем E-mail менеджера, устанавливам радиобаттон ниже как «Я укажу пароль сам» и задаем пароль
• Переходим на вкладку «Права доступа» > «Добавить пользователя в группу»
• Группа пользователей: «Контент Менеджеры», Роль: «Super User»
• Установить чекбокс «Активный» + Сохранить
• Переходим в меню «Управление» > «Перезагрузить права доступа»

2. Ограничения на просмотр файловой системы

2.1. Добавляем источник файлов

• Переходим в меню: «Медиа» > «Источники файлов»
• Скопируем «Filesystem»
• Отредактируем скопированный источник
• Название: «Images»; basePath, baseUrl: «assets/images/»
• Переходим в меню: «Настройки» > «Контроль доступа»
• Отредактируем группу пользователей «Контент менеджеры» правой кнопкой мыши
• Переходим на вкладку: «Права доступа» > «Доступ к источнику файлов» и добавим новый источник по кнопке «Добавить источник файлов»
• Источник: Images, Минимальная роль: Member — 9999, Политика доступа: Media Source Admin
• Сохранить; Меню: «Управление» > «Очистить кэш»; Меню: «Управление» > «Перезагрузить права доступа»

2.2. Удаляем источник «Filesystem» для manager

• Переходим в меню: «Медиа» > «Источники файлов»
• Filesystem > Редактировать
• Переходим на вкладку: «Права доступа», нажимаем «Добавить группу пользователей»
• Группа пользователей: «Administrator», Минимальная роль: «Super User — 0», Политика: «Media Source Admin» + Сохранить
• Переходим в меню: «Медиа» > «Источники файлов»
• Images > Редактировать
• Переходим на вкладку: «Права доступа», нажимаем «Добавить группу пользователей»
• Группа пользователей: «Administrator», Минимальная роль: «Super User — 0», Политика: «Media Source Admin» + Сохранить

3. Управление группами ресурсов

• Переходим в меню: «Содержимое» > «Группы ресурсов»
• Создать группу ресурсов
• Имя: «Администратор», Контексты: «web,mgr»
• Установить галку «Автоматически дать доступ группе Administrator»
• Добавить элементы в новую группу «Администратор», которые мы хотим скрыть от менеджера
• Сохранить; Меню: «Управление» > «Очистить кэш»; Меню: «Управление» > «Перезагрузить права доступа»

Премиум уроки от WebDesign Master

Другие уроки по теме «MODx»

Как сделать всплывающее окно для отправки формы

jQuery

Рассмотрим создание всплывающего окна с формой, используя jQuery плагин Magnific Popup.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Смотреть урок на YouTube

Архив start_html: https://github.com/agragregra/start_html

Magnific Popup Documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Другие уроки по теме «jQuery»

• Нужен ли вам jQuery? По полочкам. Сниппеты You Don’t Need jQuery / VSC, Sublime Text
• jQuery практикум #2. Создание плагина MagnifierRentgen
• Создание Аккордеона на jQuery
• Создание jQuery плагинов #1. Создание плагина myParallax
• Parallax (jQuery) — создание параллакс эффекта
• Masonry — создание адаптивных плиток (jquery, masonry, imagesloaded, imagefill, bootstrap, vh)