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

Содержание

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

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

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

Результат 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 для деплоя.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

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

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

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

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

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

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

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

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

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

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

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

Полный алгоритм действий по настройке прав контент менеджера 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 Создание контентного сайта на Jekyll от А до Я

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

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

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

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

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

Курс по созданию интернет-магазина на OpenCart

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

Фриланс для начинающих

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

Другие уроки по теме «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)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *