Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CMS

Стилизация темы нашего Ghost с LESS

by
Read Time:16 minsLanguages:
This post is part of a series called Building a Ghost Theme From Scratch.
Adding Ghost Template Tags and Markup
Defining Our Ghost Theme's Color and Basic Layout

Russian (Pусский) translation by Khristich Vadim (you can also view the original English article)

Добро пожаловать в четвертую часть нашей серии уроков по дизайну Ghost theme. Во вводном уроке вы узнали, что разработка темы состоит из двух этапов. Во время последующих частей мы начали и завершили то, что мы назвали «первым этапом» создания шаблонов вашей темы. Эта четвертая часть нашей серии выводит нас на следующую стадию тематического дизайна, а именно стайлинга.

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

Примечание: Это руководство предполагает базовые знания CSS.


Агностик Адаптивный Дизайн

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

Вместо этого проекты будут:

  • Дисплей оптимально при любом разрешении и, следовательно, на любом устройстве.
  • Масштабируйте пропорционально с любым базовым размером шрифта, установленным либо самим браузером, либо пользователем.

Это сделано:

  • Никогда не устанавливайте базовый размер шрифта, а позволяйте браузеру / поставщику или пользователю определять наиболее читаемый размер текста.
  • Всегда используйте значения em или rem, которые являются гибкими, а не значения пикселей, которые являются негибкими, во всем проекте.
  • Использование медиазапросов не для обнаружения конкретных устройств, а скорее как средство для определения, когда элементы дизайна слишком велики для доступного пространства, чтобы их можно было настроить.

Рекомендуемое чтение


Добавить тестовое содержимое заголовка тега

Прежде чем приступить к стилизации, мы добавим тестовый контент тегов заголовков на ваш сайт Ghost, чтобы вы могли видеть, как выглядят ваши теги от H1 до H6.

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

Добавьте следующую разметку в начало вашего последнего поста Ghost (может потребоваться добавить пустые строки между каждой строкой), а затем обновите ее:


Установите и настройте «GhostThemingPackage»

Чтобы помочь вам использовать максимально эффективный рабочий процесс при создании темы Ghost, я собрал для вас небольшой пакет разработки, который предоставит вам доступ к некоторым действительно удобным инструментам и автоматизирует ряд задач для вас. Это доступно в основной загрузке источника.

Вместо того, чтобы кодировать в необработанном CSS, мы будем использовать LESS. Если вы новичок в LESS, вы можете прочитать все об этом на http://lesscss.org/

GhostThemingPackage будет обрабатывать компиляцию вашего кода LESS, а также минимизировать ваш CSS и записывать его в папку вашей темы.

Он также загрузит и сделает доступной библиотеку миксов "LESSHat", фантастический бесплатный ресурс, который делает создание кросс-браузерного CSS3 быстрым и простым: http://lesshat.com/

Кроме того, он загрузит «normalize.css», «Modernizr», а также несколько отзывчивых JavaScript-кодов iframe для вас, и объединит, минимизирует и запишет все в вашу тему.

Normalize.css стандартизирует основные элементы отображения во всех браузерах. Узнайте больше об этом на http://necolas.github.io/normalize.css/

Modernizr позволяет старым браузерам осмысливать современную разметку. Узнайте больше об этом на http://modernizr.com/

Требования

Для использования GhostThemingPackage вам нужно установить только три вещи:

  1. Node.js
  2. Grunt.js
  3. Bower.io

У вас уже установлен Node.js, поскольку вы использовали его для запуска Ghost, но вам может потребоваться установить Grunt и Bower, если у вас их еще нет в вашей системе.

Установить Grunt

Grunt.js - это javascript runner task runner, который мы будем использовать для автоматизации LESS-компиляции, CSS-комбинации и минимизации. Если у вас еще нет Grunt в вашей системе, вы можете очень легко установить его через NPM (менеджер пакетов узлов, часть node.js).

Чтобы установить Grunt через NPM, откройте терминал (в любом месте) и выполните следующую команду:

npm install -g grunt-cli

Убедитесь, что вы включили флаг "-g", поскольку это сделает Grunt доступным глобально в вашей системе, то есть в любом месте, где вы работаете.

Установить Bower

Bower.io - отличный менеджер пакетов, который дает вам легкий доступ ко всем различным типам скриптов и CSS-пакетам, ориентированным на веб-дизайн. Вы можете прочитать больше об этом на http://bower.io/

Как и Grunt, Bower также легко устанавливается через NPM.

Примечание: если у вас еще нет установленного Git, вам нужно сделать это перед установкой bower.

Инструкции по установке для Git можно найти здесь: http://git-scm.com/book/en/Getting-Started-Install-Git

Важное замечание: См. Инструкции в нижней части страницы Bower относительно установки Git на Windows: http://bower.io/#a-note-for-windows-users

Чтобы установить Bower через NPM, откройте терминал (в любом месте) и выполните следующую команду:

npm install -g bower

Опять же, убедитесь, что вы включили флаг "-g", чтобы Bower был доступен для вас где угодно в вашей системе.


Установите "GhostThemingPackage"

Шаг 1:

После загрузки «GhostThemingPackage» извлеките его в легкодоступном месте, в идеале в тот же корневой каталог, в котором находится папка установки Ghost.

Например, если ваша установка Ghost находится в C:\Ghost, то также распакуйте пакет на ваш диск C:, чтобы он оказался в C:\GhostThemingPackage. (Не кладите его в папку установки Ghost).

Внутри вы должны увидеть следующую структуру папок и файлов:

GhostTheming_GTPstructure

Шаг 2:

Переименуйте папку из «GhostThemingPackage» в «UberThemeStyles».

Шаг 3:

Откройте терминал внутри папки «UberThemeStyles».

Шаг 4:

Запустите команду npm install.

Это автоматически извлечет необходимые пакеты Node.js, которые будут использоваться для компиляции LESS, а также для объединения и минимизации CSS и JavaScript.

Вы увидите много таких сообщений, пока NPM получает все:

GhostTheming_GTPnpmInstallGhostTheming_GTPnpmInstallGhostTheming_GTPnpmInstall

Подождите, пока все эти сообщения не прекратятся, и вы снова увидите командную строку.

Шаг 4:

Запустите команду bower install.

Как и в предыдущем шаге, он будет извлекать необходимые пакеты из Bower.io; LESShat, Modernizer и Normalize.css

Опять же, вы увидите серию сообщений, появившихся в вашем терминале: дождитесь их окончания и появится командная строка.

Шаг 5:

Убедитесь, что теперь вы видите эту структуру папок в папке «UberThemeStyles»:

GhostTheming_GTPinstallCompleteGhostTheming_GTPinstallCompleteGhostTheming_GTPinstallComplete

Обратите внимание на наличие новых папок "bower_components" и "node_modules".

Если в какой-либо из папок отсутствуют какие-либо подпапки, удалите эту папку, а затем снова запустите команду установки, т.е. npm install для папки "node_modules" или bower install для папки "bower_components".


Настройте "Gruntfile.js"

Шаг 1:

В предпочитаемом вами редакторе кода откройте «Gruntfile.js» из корневого каталога вашей папки «UberThemeStyles».

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

Шаг 2:

В строках 62 и 63 найдите следующее:

Step 3:

При необходимости измените '../Ghost/', чтобы отразить относительный путь к вашей установке Ghost.

Вам не придется изменять настройки, если ваша папка «UberThemeStyles» находится в той же корневой папке, что и папка установки Ghost, а ваша папка установки Ghost фактически называется «Ghost».

Шаг 4:

Измените «YourThemeName» на «UberTheme».

Шаг 5:

Сохраните файл.

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


Добавить основы CSS

Первое, что мы собираемся сделать, - это добавить стили из Normalize.css в таблицу стилей вашей темы. Это обеспечит стандартизированное отображение нашей темы во всех браузерах.

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


Добавить Normalize.css

Шаг 1:

В своем терминале (все еще в папке «UberThemeStyles») выполните команду grunt cssmin.

Это возьмет файл «normalize.css» из вашей папки «bower_components / normalize-css», сожмет его и запишет в файл style.css вашей темы.

В случае успеха вы должны увидеть это в своем терминале:

GhostTheming_cssminsuccessGhostTheming_cssminsuccessGhostTheming_cssminsuccess

Шаг 2:

Обновите свой интерфейс Ghost. Вы можете проверить, что "normalize.css" был добавлен, если вы видите

  • Семейство шрифтов по умолчанию было изменено на «sans-serif» (т.е. в тексте пропущены засечки)
  • Содержимое находится на одном уровне с краями окна
  • Ваш фон снова белый (из-за того, что CSS из последнего урока перезаписан)
GhostTheming_NormalizedGhostTheming_NormalizedGhostTheming_Normalized

Примечание: По мере продвижения мы будем вносить некоторые коррективы в файл normalize.css.

Поскольку мы будем создавать многие из наших собственных стилей, мы хотим избежать дублирования стилей для таких элементов, как body и h1, так как это не потребует дополнительных затрат для браузера, поэтому мы перенесем некоторые стили из "normalize.css" в наши собственные LESS файлы.


Предварительные стили и типография

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

Для этого мы начнем редактировать ваши файлы LESS.

Прежде чем мы начнем редактировать LESS, если вы новичок в этом, пожалуйста, найдите время, чтобы ознакомиться с его системой:

  • Переменные
  • Примеси
  • Вложенные правила
  • Функции и операции

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

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

Шаг 1:

В вашем терминале (все еще в папке «UberThemeStyles») запустите команду grunt watch.

Это инициирует задачу «наблюдения», в результате чего ваши файлы LESS и ваш файл Normalize.css будут отслеживаться на предмет любых изменений. Всякий раз, когда обнаруживаются какие-либо изменения в файлах, LESS автоматически компилируется, и все ваши CSS-коды будут объединяться, минимизироваться и записываться в файл style.css вашей темы.

Примечание: Если вы хотите остановить задачу «Наблюдение», вернитесь к своему терминалу и нажмите CTRL + C. При появлении запроса введите y, а затем нажмите клавишу ВВОД.

Шаг 2:

В предпочитаемом вами редакторе кода откройте файл «layout.less» из папки «UberThemeStyles> LESS».

Шаг 3:

Добавьте следующий код и сохраните:

Этот код делает несколько вещей:

  • Сужение ширины контента от полноэкранного, что упрощает оценку того, как выглядят ваши варианты оформления.
  • Центрирует этот контент в окне.
  • Устанавливает основу нашей способности реагировать агностиком, как описано во введении к этому учебнику:
    1. Мы не устанавливаем свойство width в явное значение. Вместо этого width установлена ​​на 100%, поэтому она заполнит все окно на любом устройстве с разрешением менее 40ems в ширину.
    2. Мы используем свойство max-width, чтобы ограничить оболочку шириной не более 40ems при больших разрешениях.
    3. Мы используем значение em, а не значение px.

Примечание: мы собираемся настроить эту ширину позже для оптимальной читабельности, как только мы выбрали наши шрифты и, следовательно, знаем, насколько широкими будут наши буквы. Значение 40ems является только заполнителем.

Шаг 4:

Обновите свой интерфейс. Теперь он должен был сузиться так:

GhostTheming_NarrowedGhostTheming_NarrowedGhostTheming_Narrowed

Шаг 5:

Откройте файл "normalize.css" из папки "UberThemeStyles> bower_components> normalize-css" для редактирования.

Шаг 6:

Закомментируйте или удалите body, h1 и все стили a (строки с 76 по 121), потому что мы собираемся написать свое собственное и не хотим накладных расходов на дубликаты объявлений.

Шаг 7:

Откройте файл «typography.less» из папки «UberThemeStyles> LESS» для редактирования.

Шаг 8:

Замените весь код в нем следующим кодом, затем сохраните:

Там довольно много кода, который мы добавили сразу. Позвольте мне объяснить, что происходит.

Примеси

Первое, что вы увидите вверху - это mixin .HeaderFont (). Поскольку мы будем использовать один и тот же font family, font-weight и line height для всех наших тегов заголовков, мы поместили все правила для этих свойств в один микшин. Если вы посмотрите на стиль для каждого тега заголовка, то увидите, что в первой строке был вызван mixin .HeaderFont ().

Таким образом, мы можем обновлять микшин по мере необходимости, и все стили тегов заголовков также будут автоматически обновляться.

Переменные

Вы также заметите использование некоторых переменных в коде, т.е. @header_font, @default_font и @golden.

Значение каждой из этих переменных задается в файле «variables.less» в папке «UberThemeStyles> LESS». Этот файл сначала доступен во время компиляции вашего кода LESS, что означает, что содержащиеся в нем переменные могут использоваться в любом из ваших других файлов LESS.

Мы используем переменные @header_font и @default_font, чтобы задать имена шрифтов, которые будут использоваться в вашей теме, так что становится очень легко переключаться с одного выбора на другой, когда вы пробуете шрифты.

Переменная @golden представляет значение 1.618, золотое сечение. Это число использовалось еще со времен древних греков для создания красивых макетов во всем, от искусства до архитектуры, и мы будем активно использовать его на протяжении всего дизайна.

Добавление блоков в переменные

Лучше всего в LESS определять числовые переменные без привязанных единиц. Это позволяет вам выполнять арифметику со своими значениями.

Например, с моей переменной @golden, равной 1,618, я могу делать такие вещи, как умножение этого значения, его деление вдвое и так далее. Однако, если бы я установил его на 1.618em, у меня возникли бы проблемы с некоторыми вычислениями, которые я мог бы выполнить.

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

Вы можете добавить юниты следующим образом:

@variable + 0em

@variable + 0rem

@variable + 0%

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

Типографская шкала

Все размеры шрифта устанавливаются в классическом типографском масштабе, преобразуемом в em вместо значения px, исходя из наиболее распространенного размера шрифта по умолчанию, равного 16px.

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

Поля тега заголовка

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

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

Шаг 9:

Обновите свой интерфейс. Теперь это должно выглядеть так:

GhostTheming_BasicTypographyAddedGhostTheming_BasicTypographyAddedGhostTheming_BasicTypographyAdded

Выбор шрифтов

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

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

Перейдите в Google Fonts и выберите шрифт для своих заголовков, а также шрифт для обычного текста, обязательно проверив, как они выглядят в нескольких разных размерах и, если они есть, их weights: http://www.google.com/fonts/

Я выбрал Oxygen для текста заголовка и Open Sans для обычного текста.

Как только ваши шрифты выбраны, вы можете добавить их в свою тему.

Шаг 1:

Откройте файл «default.hbs» из корневой папки вашей темы.

Шаг 2:

Ниже {{! Styles}} прокомментируйте и над ссылкой на таблицу стилей добавьте следующую строку и сохраните:

Примечание: Чтобы создать URL-адрес для любых шрифтов Google:

  • Используйте формат: http://fonts.googleapis.com/css?family=Font+Name
  • Пробелы в именах шрифтов должны быть заменены знаком +
  • Чтобы использовать несколько шрифтов, разделите имена шрифтов с помощью | условное обозначение
  • Укажите weights и styles, которые вы хотите использовать, поместив : в конце имени шрифта, за которым следуют значения, разделенные запятыми, например, : 300,400,700,300italic, 400italic, 700italic

Шаг 3:

Откройте файл "variables.less" из папки "UberThemeStyles> LESS" для редактирования.

Шаг 4:

Найдите эти две строки:

Шаг 5:

Отредактируйте их, чтобы прочитать:

Шаг 6:

В вашем файле "typography.less" добавьте font-weight 400 в ваш микшин .HeaderFont ():

Шаг 7:

Также в вашем файле "typography.less" добавьте font-weight 300 к вашему body:

Примечание: это были weights, которые мне показались наиболее подходящими для этих конкретных шрифтов и для стиля освещения, который я выбрал.

Шаг 8:

Обновите свой интерфейс. Теперь вы должны увидеть ваш выбор шрифтов на месте:

GhostTheming_FontsSelectedGhostTheming_FontsSelectedGhostTheming_FontsSelected

Далее

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.