От автора: многие популярные дизайны резюме максимально используют доступное пространство страницы, разделы в них размещаются в виде сетки. Давайте используем CSS Grid для создания макета, который будет отлично выглядеть при печати и на экранах разных размеров. Таким образом, у нас будет возможность использовать резюме онлайн и оффлайн, что может пригодиться в новом году!
Сначала мы создадим контейнер резюме и разделы резюме.
<article class="resume"> <section class="name"></section> <section class="photo"></section> <section class="about"></section> <section class="work"></section> <section class="education"></section> <section class="community"></section> <section class="skills"></section> </article>
Чтобы начать использовать Grid, мы добавляем к внешнему элементу резюме display: grid. Далее мы опишем, как вещи должны быть размещены в сетке. В этом случае мы будем указывать два столбца и четыре строки.
Мы используем единицы CSS Grid fr, чтобы указать, на сколько частей разделить доступное пространство. Мы зададим для рядов одинаковое пространство (1fr каждый) и сделаем первый столбец в два раза шире второго (2fr).
.resume { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr;
}
Далее мы опишем, как эти элементы должны быть размещены в сетке, используя свойство grid-template-area. Сначала нам нужно определить именованные grid-area для каждого из разделов. Вы можете использовать любое имя, но здесь мы будем использовать то же имя, что и для разделов:
.name { grid-area : name;
} .photo { grid-area : photo;
} /* определяем grid-area для каждого раздела */Теперь самое интересное, что позволяет просто изменять дизайн. Разместите области сетки в свойстве grid-template-areas так, как вы хотите их расположить. Например, здесь мы добавим раздел name в левом верхнем углу grid-template-area, чтобы разместить имя в левом верхнем углу резюме. В разделе work много содержимого, поэтому мы добавляем его дважды, то есть он будет растягиваться на две ячейки сетки.
.resume { grid-template-areas: "name photo" "work about" "work education" "community skills";
}Вот что мы имеем на данный момент:
Спецификация CSS Grid предоставляет множество полезных свойств для определения размера и расположения элементов в сетке, а также некоторые сокращенные свойства. В этом примере мы постараемся сделать все как можно проще и используем один метод. Обязательно ознакомьтесь с некоторыми из замечательных ресурсов, чтобы узнать, как лучше всего включить CSS Grid в проект.
Настройка макета
grid-template-areas позволяет очень легко изменять макет. Например, если вы думаете, что работодателю раздел skills будет более интересен, чем education, вы можете поменять имена grid-template-areas, и области поменяются местами в вашем макете, без каких-либо других изменений.
.resume { grid-template-areas: "name photo" "work about" "work skills" /* skills now moved above education */ "community education";
}
Мы можем создать популярный дизайн резюме с тонким столбцом слева, внеся минимальные изменения в CSS. Это одна из приятных вещей в сетке: мы можем переставить именованные области сетки, чтобы изменить положение вещей, оставив исходный порядок нетронутым!
.resume { grid-template-columns: 1fr 2fr; grid-template-areas: "photo education" "name work" "about work" "skills community";
}
Разделение колонок
Возможно, вы захотите добавить личные ссылки в резюме. Мы можем добавить третий столбец в шаблон сетки и вставить его в нижний ряд. Обратите внимание, что нам также нужно изменить размеры колонок, а затем обновить области шаблона, чтобы определенные элементы занимали два столбца, таким образом будет сохранена компоновка макета.
.resume { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "name name photo" "work work about" "work work education" "community references skills";
}
Разрыв между разделами можно задавать с помощью свойства grid-gap.
Адаптивность
Для небольших экранов, таких как мобильные устройства, мы можем отображать разделы резюме в одном столбце полной ширины.
grid-template-columns: 1fr; grid-template-areas: "photo" "name" "about" "work" "education" "skills" "community" "references" }
Затем мы можем использовать медиа-запрос, чтобы изменить макет для более широких экранов.
@media (min-width: 1200px) { .resume { grid-template-areas: "name photo" "work about" "work education" "community skills"; }
}Между ними могут быть добавлены дополнительные контрольные точки. Например, для средних экранов, таких как планшеты, мы могли бы разместить все в одном столбце, а разделы personal и image разместить бок о бок сверху.
@media (min-width: 900px) { .resume { grid-template-columns: 2fr 1fr; grid-template-areas: "name photo" "about about" "work work" "education education" "skills skills" "community community" "references references" }
}Планирование печати
Старайтесь не уменьшать размер шрифта, чтобы вместить больше информации, так как текст может стать трудночитаемым. Можно добавить временное ограничение на размер к элементу resume, пока вы разрабатываете макет.
.resume { /* только для разработки */ width : 210mm; height: 297mm; border: 1px solid black;
}Сделав эту границу размером листа формата A4, мы сможем четче увидеть, достаточно ли малы размеры или содержимое выходит за границы, указывая, что оно будет напечатано на второй странице. Вы можете настроить печать в CSS, чтобы скрыть такие вещи, как дата и номера страниц, которые может вставить браузер.
@media print { /* удаляем все стили только для экранов, например, подчеркивание ссылок */
} @page { padding: 0; margin: 0cm; size: A4 portrait;
}Стоит отметить, что разные браузеры могут отображать ваше резюме с разными шрифтами, которые могут слегка отличаться по размеру. Если вам нужен предельно точный печатный макет резюме, другой вариант — сохранить его в формате PDF и предоставить ссылку для загрузки.
Поддержка браузерами
CSS Grid имеет хорошую поддержку в современных браузерах.
Internet Explorer (IE) поддерживает старую версию спецификации CSS Grid с использованием префиксов. Например grid-template-columns записывается как -ms-grid-columns. Выполнение кода через Autoprefixer может помочь с добавлением этих префиксов, но потребуется ручное изменение и тщательное тестирование, потому что в старой спецификации некоторые свойства ведут себя по-разному, а некоторые не существуют.
Альтернативный подход — предоставить резервный вариант, например, с помощью float разметки. Браузеры, которые не распознают свойства CSS Grid, будут отображать этот резервный варианта. Независимо от того, нужно ли вам поддерживать IE, резервный вариант имеет смысл для обеспечения того, что (потенциально неизвестные) браузеры, которые не поддерживают CSS Grid, по-прежнему будут отображать ваш контент.
Даже если вы не готовы разместить онлайн-резюме, все равно интересно поэкспериментировать с CSS Grid, изучить различные макеты, создать великолепный PDF и одновременно узнать удивительную часть CSS. Удачного поиска работы!
Автор: Ali Churcher
Источник: https://css-tricks.com
Редакция: Команда webformyself.