18. Создание сайта с помощью фреймворков.Модификация типографики

Автор Lyubov Stishevskaya
18. Создание сайта с помощью фреймворков.Модификация типографики

вся суть использования CSS фреймворка в том чтобы избавить себя от утомительной стена описания стилей и заниматься процессом проектирования и разработки сайта тем не менее вне зависимости от того какой фреймворк вы выберете даже если.

Вы абсолютно не заинтересованы в стилизации контента страницы. Наверняка вы захотите сделать хотя бы небольшие изменения типографики сайта в этом упражнении сайту Simple принимает и сфокусируйся на модификации стиле типографики по умолчанию. Давайте посмотрим быстренько — это в браузере здесь мы видим как выглядит наш сайт симплпэй когда к ним только стилизация Foundation по умолчанию.

Если бы я был доволен шрифтами размером текста и тому подобное то мне вообще не нужно было бы делать изменение, но очевидно, что я хочу изменить их много поэтому я модифицируют несколько вещей.

Первое, что я сделаю — это использую веб шрифты веб шрифты использовать шрифты которые не являются системными как. Женева Орел таймс. Нью Роман и. Джорджа можно использовать более широкий диапазон для этого есть несколько способов — это хостить их самим 2 воспользоваться эпитет или Google fonts и есть новый iPhone от Adobe узнать о нём больше можно на сайте Adobe H webfonts — это очень простой и. Бесплатный сервис всё, что вам нужно сделать — это выбрать нужный шрифт, а затем копировать и вставить кое-какой код на ваш сайт — это очень клёво. Но — это упражнение не об Adobe H, а просто о модификации типографики нашего блога. Поэтому вместо того чтобы углубляться в этот сервис. Я просто напишу код которые позволят мне использовать шрифты которые я хочу новые. Если хотите изучить документацию аж. Фолз этот сервис очень легко использовать вернемся на страницу. Яндекс Я люблю время и копировать и вставлять некоторые вещи, а не печатать их заново для веб-шрифтов. Мне нужен ещё один тег Script, но вместо modernize. Мне нужно указать другой источник я изменю на http: Slash Slash yuruzan.hh.ru нет, а затем слэш имя шрифта который я хочу использовать. GS. Вот так — это один из шрифтов который мне нужен копируем — это и вставляем и в этот раз мне нужно просто изменить имя шрифта. Слата на карту то будет два шрифта. Лото и карта до этого я даже и не осознавал, что они рифмуются. Если Вы посмотрите документацию или чего-то там рекомендуется не использовать протокол, но я обнаружил, что если убрать протокол их нельзя будет тестировать локально. Поэтому сейчас я его оставлю, а при ведении сайта в действии если мы сохраним этой протестируем то ничего не увидим потому, что ещё не задали эти шрифты всё, что мне — это позволяет сделать — это использовать шрифты lato и карту на сайте. Мы просто ссылаемся сервис и берём их там хорошо. Теперь я готов к тому чтобы переписать некоторую типографику Foundation по умолчанию для этого мы будем работать с файлом custom.css в редакторе типа дримвивер. Можете просто открыть файл custom.css из директории подчёркивание CSS я перейду к разделу Global reset глобальный сброс и здесь у нас будут в стиле широкого диапазона действия. Давай начнем с того. Боди и зададим ему семейство шрифтов font-family шрифты у нас будут такие. Лото которые мы только, что видели. Ареал — это будет подстраховка и ещё один запасной вариант будешь консерв под этим мы зададим жирность шрифта Font Weight 500 и затем стиль шрифта пусть будет нормальным Normal при использовании веб-шрифтов очень полезно указать необходимые нам жирность и стиль даже если обычно стиль шрифта является нормальным того, что я использую веб-шрифты. Я хочу здесь быть очень конкретным дальше я хочу стилизовать заголовки поэтому я создам селектор для H1 H2 H3 H4 H5 H6. Если вы не будете использовать все уровни заголовков то возможно — это делать не нужно, но я на всякий случай укажу все их здесь. Я также задом семейство шрифтов font-family лето и сенсоров и жирность шрифта Font Weight 200 да возможно — это излишне не обязательно указывать семейство шрифтов ещё раз я сделаю — это для того чтобы если кто-нибудь посмотрит на моей стиле они сразу увидели, что именно я использую для моих, а для моих параграфов для того я буду использовать в другое семейство шрифтов font-family его этот раз карта карта — — это один из вариантов поэтому и для подстраховки зададим пару шрифтов. Шериф Georgia time is a measure of и также здесь я задам нормальную жирность шрифта Font Weight Normal так я конкретно указываю, что и где мне можно и в конце концов ещё одна вещь которую я хочу модифицировать — это стили кнопок. Я обнаружил, что по умолчанию для кнопок указаны конкретные шрифты. Так, что очень часто. Вам нужно будет капнуть самого фреймворка чтобы выяснить. Какие стили вам нужно переписать. Так, что я создам селектор класса батон и внутреннего укажу семейство шрифтов lato Sans serif хорошие идеи сохранить — это как заготовку кода если я не хочу печатать — это каждый раз и я задам шрифт 700 — это будет намного жирнее чем раньше сохраняем и теперь если я вернусь обратно в мой браузер и обновлю страницу то вы увидите, что у нас есть большие изменения я пока, что ещё не изменил размер моего текста, но уже задал шрифты которые мне в общем нужны для этих конкретных элементов и также указал их жирность на данный момент немного странновато потому, что я занимаюсь типографикой перед макетам. Возможно у вас не так, но я обычно при проектирование сайта сначала занимаюсь с макетом я убеждаюсь, что все зоны именно там должны быть на странице и только затем начинаю работать над типографикой сейчас я как бы работаю задом наперёд и причины этому следующая глава в которой мы будем работать с сеткой и макетам. А сейчас сфокусируйся на модификации стилей фреймворка по умолчанию на данном этапе. Нам нужно углубиться в некоторые.

0 комментариев
0

Читайте также