Хватит кирпичей

Вадим Макеев, HTML Академия

Груда кирпичей

Хватит

Логотип HTML Академии
Сайт pitercss_conf

Кирпич 1 Кирпич 2 Кирпич 3 Кирпич 4 Кирпич 5 Кирпич 6

Объекты

Swiss in CSS

Расположение

Текст в Ворде

Размеры

Адаптивность

Хинтинг буквы А
58 артбордов

Это 29 × 2 = 58, а 29 × 5 = божечки-кошечки…

58 кирпичей

Редакторы

Фиксированное расположение в iOS Привязанное расположение в iOS
Отрендеренный компонент Схематический компонент
Фиксированное расположение в iOS Привязанное расположение в iOS
Окно Photoshop Иконка Photoshop Кирпич
Окно Sketch Иконка Sketch Кирпич
Автораскладка в Sketch
Окно Figma Иконка Figma Кирпич
Ограничители в Figma

Медиа

Технологии

© Matt Groening
Слои в Sketch

HTML

			<div class="header">
			    <h1>Заголовок</h1>
			</div>
			<div class="navigation"></div>
			<div class="sidebar"></div>
			<div class="content"></div>
		
Стили в Sketch

CSS

			.header {
			    text-align: left;
			    font: 55px Gotham Pro, sans-serif;
			    color: #ffffff;
			    opacity: 0.5;
			    }
		
Кривые в Sketch

SVG

			<svg width="164" height="90">
			    <path fill="#ffffff" d="M19.205 40.66c8.03 0 13.475-4…
			        0-10.615-3.025-10.615-8.965 0-6.105 4.95-9.295 12…
			        40h4.235V15.305h15.07v-3.74H70.29V40zm35.663.66c-…
			        0-1.485-.22-2.035-.385L.945 89c.88.22 2.475.44 34…
			        11-12.32h-5.225l-15.565 16.39v-16.39h-4.235V89z"/>
			</svg>
		

Раскладки

Гриды

1
2
3
4
Приложение в Photoshop
Приложение в Sketch
Приложение в Figma
1
2
3
4

HTML

			<div class="app">
			    <div class="header"></div>
			    <div class="navigation"></div>
			    <div class="sidebar"></div>
			    <div class="content"></div>
			</div>
		

CSS

			.app {
				display: grid;
				grid-gap: 25px;
				grid-template-columns: 256px auto;
				grid-template-rows: 256px auto;
				}
		
1
2
3
4

CSS

			.app div {
			    background: #4b86c2;
			    }
			.app div:first-child { background: #c00; }
			.app div:last-child { background: #090; }
		
header
navigation
content
sidebar
banner

Малый

			.grid {
			    display: grid;
			    grid-gap: 25px;
			    }
		

Малый

			grid-template-areas:
			    'header'
			    'navigation'
			    'content'
			    'sidebar'
			    'banner'
			    'footer';
		

Адреса

			.header      { grid-area: header; }
			.navigation  { grid-area: navigation; }
			.content     { grid-area: content; }
			.sidebar     { grid-area: sidebar; }
			.banner      { grid-area: banner; }
			.footer      { grid-area: footer; }
		
header
navigation
content
sidebar
banner

Средний

			grid-template-areas:
			    'header      header'
			    'navigation  navigation'
			    'sidebar     content'
			    'banner      footer';
		
header
navigation
content
sidebar
banner

Большой

			grid-template-areas:
			    'header      header   header'
			    'navigation  content  sidebar'
			    'navigation  content  banner'
			    'footer      footer   footer';
		
header
navigation
content
sidebar
banner

Большой

			@media (min-width: 512px) {
			    .grid { grid-template-areas: ; }
			    }
			@media (min-width: 768px) {
			    .grid { grid-template-areas: ; }
			    }
		
© Matt Groening
Базовые курсы HTML Академии
Остальные курсы HTML Академии

Ещё? Ещё!

htmlacademy.ru

sokr.me/ebr

@pepelsbey

Логотип Шовера

Shower

Вопросы?