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

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

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

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

Яндекс мы будем использовать сетку Foundation контролировать макет страницы вот здесь сверху у нас есть меню навигации она отзывчивая если мы будем изменять размер окна браузера то.

Верхнее меню при достижении определенных размеров исчезнет пользователь сможет развернуть и свернуть его — это помогает сохранить пространство на планшетах и мобильных устройствах также у нас есть одна запись в блоге которые мы будем стилизовать и в которой воспользуемся некоторыми сложностями Foundation такими как вы носки и модальные окна и также у нас есть страница about которая поможет поэкспериментировать со стилизацией форм Foundation и тем, что нужно сделать её изменить. Так, что прежде чем мы начнем разбираться с конкретными стилями нам нужна очень организованно структурировать таким способом которые позволят — это сделать. Я возвращаюсь к моему редактору кода и в этом упражнении мы будем работать с файлами из папки 0402 у меня открыт файл. Яндекс — это пока, что не страница Simple поймать — это одна из начальных страниц которые идут с Foundation нет. Ничего необычного в том чтобы используя Framework использовать шаблоны которые с ним идут в фреймворке очень часто можно обнаружить начальную страницу или шаблон который вам подходит идеально. Что хорошо вы их использования вместо того чтобы начать с нуля — это то, что в них есть много всего уникального для фреймворка например вот эти условные комментарии установка ширины в упор всё — это уже готова и я могу начать добавлять свой собственный контент на сайт. Можно даже начать используя одно из этих страниц просто удалить контент примера и заменить его своим также здесь у меня есть ссылка на файл стилей которое не является частью оригинального фреймворков я создал файл стилей custom.css если помните из наших прошлых рассуждений о различных стратегиях одна из стратегий о которых я говорил заключалась в создании отдельного файла Steam со стилями которая уникальные для этого сайта и его использование чтобы переписать в стиле фреймворка в данном случае Foundation CSS этот подход мы будем использовать в этом проекте. Конечно у каждого есть свои. Зая против, но этот мне нравится. Немного больше потому, что он позволяет легко заменить файл Foundation CSS если он изменится при обновлении и мне не нужно будет беспокоиться, что я могу перед все свои стили проекта также — это позволяет мне организовывать искать стилей в одном месте я сейчас переключу сильно File Custom CSS. А вы можете просто открыть его если используете что-то они дримвивер этот файл находится в папке 0402 в папке подчеркивание CSS сейчас он очень в самом верху здесь говорится, что здесь должны находиться мои кастомные стили я большой фанат и сторонник хорошей организации стиле. Поэтому в процессе работы с этим проектом одна из которую я буду делать перед началом стерилизации — это идентифицировать зоны страницы которые нуждаются в уникальной стерилизации структурно или тематические. Я как буду создавать разделы для них мой об метод работы — это сверху вниз то есть если навигация находится. В верху то скорее всего большинство стилей навигации будет находиться в верху кода CSS так мне их легче найти и так, что я сделаю создам секции для каждой отдельной зоны элемента которые мне нужно стерилизовать поэтому я скопирую комментарии которые у меня уже есть просто msstyles добавлю одну строку и вставлю его и в. Нижнем комментарии я напишу Global reset глобальный сброс и глобальные сбросы используя чтобы сбросить любые глобальные свойства фреймворк Foundation например стилизацию всех ссылок или H1 или же к примеру стилизацию специальных классов которые есть в Foundation — это какая-то определённая зонаа стилей которые применяются к всему сайту. Я продолжу копировать и вставлять мои комментарии оставляя немного пространство для моих стилей между ними после Global глобальная сбросы у меня будут Top Navigation Style в стиле верхний навигации после стиле верхний навигации будут идти hairstyles стиле хедера после будут идти Main article Stels Stels главная статьи то есть. Я в буквальном смысле на самом деле. Спускаюсь вниз по структуре страницы и создаю различные её разделы чтобы перед тем как — это делать. Вам необходимо понимать как вы будете структурировать вашу страницу после стилей главная статьи.

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

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