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

Хватит

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

Объекты

Swiss in CSS

Стол, лист, стена
Двумерная плоскость
Независимость частей

Глубина, объём
Не только сочетание
Взаимодействие

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

Слои краски, пиксели
Знание о размерах
Но изоляция в слоях

Строка за строкой
Следуют в потоке
В вебе с первых дней

Размеры

Полоса набора
Ограничение формата
Нет конечной формы
Шаблон, правила

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

Хинтинг шрифтов
Детализация иконок
Ретиновая графика

Поворот экрана
Размеры экранов
Увеличение шрифта
Способы ввода

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

Редакторы

Медиа

Шрифтовик
Полиграфист
Промдизайнер
Веб-дизайнер?

Технологии

HTML

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

CSS

			.header {
			    text-align: left;
			    font: 55px Gotham Pro, sans-serif;
			    color: #ffffff;
			    opacity: 0.5;
			    }

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

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; }

content

Малый

			.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; }

content

Средний

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

content

Большой

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

content

Большой

			@media (min-width: 512px) {
			    .grid { grid-template-areas: …; }
			    }
			@media (min-width: 768px) {
			    .grid { grid-template-areas: …; }
			    }