CSS может быть сложно управлять в рамках проекта, особенно если вам нужно включить медиа-запросы для различных точек останова и резервных копий для старых браузеров. В этой статье мы рассмотрим использование Fractal для управления компонентами, использующими CSS Grid.

        

В этой статье, основанной на разговоре, который я дал на Smashing Conference в Торонто, я расскажу о методе работы, который я принял за последние два года, который помогает мне управлять CSS по моим проектам.

Я расскажу вам, как использовать инструмент библиотеки рисунков Fractal для управления вашим CSS на основе компонентов по компонентам, позволяя вам использовать инструменты, с которыми вы уже знакомы. Хотя это служит введением в Fractal и почему мы выбрали эту конкретную библиотеку шаблонов, вполне вероятно, что этот способ работы перейдет к другим решениям.

Наши проекты

Моя компания имеет пару продуктов — Perch и Perch Runway CMS и Notist — программное обеспечение как приложение для публичных ораторов. Эти продукты совершенно разные, особенно учитывая, что Perch является самообслуживающей системой, а Notist — SaaS, однако у них обоих есть много пользовательского интерфейса для разработки. У нас также есть все связанные с ними веб-сайты и документация для этих продуктов, а также другие вещи, над которыми мы работаем, например сайт 24 Ways. После открытия Fractal два года назад мы переместили каждый новый проект — большой и маленький — в Fractal.

Проблемы, которые мы хотели решить

Я начал исследовать библиотечные решения шаблонов два года назад, когда я начал работу по перестройке пользовательского интерфейса Perch для версии 3. Особенностью Perch является то, что шаблоны, которые вы создаете для вывода контента на вашем сайте, становятся схемой интерфейса администратора. Это означает, что любой тип поля, используемый в шаблоне, должен существовать наряду с любым другим типом поля. Мы не знаем, как наши клиенты могут объединить их, и существует огромное количество возможных комбинаций. Это также не «веб-сайт», и я не хотел пытаться использовать библиотеку шаблонов для создания шаблонов веб-сайтов.

Поскольку Perch является самостоятельным — люди загружают его и размещают на своих серверах — нам нужно использовать простейший технический стек, чтобы не создавать никаких дополнительных барьеров для входа перед людьми, многие из которых являются новыми к использованию CMS. Чтобы добавить дополнительный уровень удовольствия, мы поддерживаем обратно в Internet Explorer 9, но я намеревался использовать много Flexbox — как это было до отправки Grid Layout.

Я также стремился избегать использования инструментов, которые пришли с большим переосмыслением того, как мы работали, и полностью меняем наш процесс. Любой дополнительный инструмент или изменение способа работы над вашими проектами приносит новые трения. Вы можете решить одну проблему, но привносите в новый набор проблем, если вы вносите большие изменения в способ работы. В нашем случае мы использовали Sass довольно ограниченным образом и обрабатывали, используя Gulp. Ни один из наших проектов не использует структуру Javascript, мы просто пишем HTML, CSS и JavaScript.

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

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

Начало работы с фракталом

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

Когда ваш новый проект установлен, в командной строке перейдите в папку, которую вы только что создали, и запустите команду:

  фрактальный старт --sync  

Это запустит небольшой сервер в порту 3000, так что вы сможете побывать в http: // localhost: 3000 в веб-браузере и посмотреть свой проект.

Теперь, когда ваш проект запущен и работает, откройте папку проекта в своем любимом текстовом редакторе и найдите пример компонента в разделе компонентов / пример . Вы найдете файл конфигурации и файл с именем example.hbs . Шаблон example.hbs — это HTML вашего компонента, вы можете добавить к нему еще несколько HTML, и Fractal автоматически перезагрузит и отобразит его. Измените файл на:

  
 Это мой заголовок 
 {{text}} 
  

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

  title: Пример компонента
контекст:
    text: Это примерный компонент!
    заголовок: Мой заголовок  

Теперь измените файл example.hbs чтобы прочитать в этом тексте.

  
 {{heading}} 
 {{text}} 
  

Добавление дополнительных компонентов

Вы можете следовать шаблону примерного компонента, чтобы добавить свой собственный. Как минимум, вам понадобится папка (имя компонента) и файл .hbs с тем же именем. Вы можете добавить конфигурационный файл, если хотите установить параметры конфигурации.

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

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

Добавление рабочего процесса CSS

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

Я упомянул, что Fractal делает очень мало предположений о вашем рабочем процессе; из-за этого он делает гораздо меньше, чем он мог бы, если бы он заставлял вас работать определенным образом. Тем не менее, мы можем довольно легко получить Fractal, работающий с настройкой Gulp.

Объединение фракталов, сассов и галпов

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

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

1. В папке public в вашей Fractal install добавьте папку с именем css .

    

2. В корневой папке вашего Fractal установите папку assets внутри которой находится папка scss . Создайте файл Sass с именем global.scss внутри этой папки. Внутри этого файла добавьте следующую строку:

     @import "../../components/**/*.scss";

     

    

3. Создайте файл с именем example.scss в каталоге компонентов .

    

4. Создайте gulpfile.js в корне вашего проекта Fractal и добавьте код ниже.

  'use strict';

const gulp = require ('gulp');
const fractal = require ('./ fractal.js');
const logger = fractal.cli.console;
const sass = require ('gulp-sass');
const sassGlob = require ('gulp-sass-glob');
const plumber = require ('gulp-plumber');
const notify = require ('gulp-notify');
const path = require ('path');

gulp.task ('sass', function () {
    return gulp.src ('assets / scss / ** / *. scss')
    .pipe (customPlumber («Ошибка при запуске Sass»))
    .pipe (sassGlob ())
    .pipe (Sass ())
    .pipe (gulp.dest ( 'общественный / CSS'))
});

gulp.task ('watch', ['sass']function () {
   gulp.watch ([
        'components/**/*.scss',
        'assets/scss/**/*.scss'
        ]['sass']);
});

function customPlumber (errTitle) {
    верните сантехник ({
        errorHandler: notify.onError ({
            title: errTitle || «Ошибка при запуске Gulp»,
            сообщение: «Ошибка:»,
        })
    });
}

gulp.task ('fractal: start', function () {
    const server = fractal.web.server ({
        sync: true
    });
    server.on ('error', err => logger.error (err.message));
    return server.start (). then (() => {
        logger.success (`Fractal server теперь запущен на $ {server.url}`);
    });
});

gulp.task ('default', ['fractal:start', 'sass', 'watch']);  

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

npm install gulp gulp-sass gulp-sass-glob gulp-plumber gulp-notify

Функция sass компилирует Sass из активов в один файл и выводит ее в папку в публикация .

  gulp.task ('sass', function () {
return gulp.src ('src / assets / scss / ** / *. scss')
.pipe (customPlumber («Ошибка при запуске Sass»))
.pipe (sassGlob ())
.pipe (Sass ())
.pipe (gulp.dest ( 'общественный / CSS'))
});
 

Затем я создаю функцию watch которая будет смотреть мои Sass в активы а также в отдельных компонентах и ​​компилировать их в открытую папку

  gulp.task ('watch', ['sass']function () {
   gulp.watch ([
'components/**/*.scss',
'assets/scss/**/*.scss'
]['sass']);
});
 

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

  gulp.task ('fractal: start', function () {
const server = fractal.web.server ({
sync: true
});
server.on ('error', err => logger.error (err.message));
return server.start (). then (() => {
logger.success (сервер Fractal теперь работает в $ {server.url});
});
});  

Наконец, мне нужно убедиться, что Sass building и Fractal запускаются при запуске gulp и командной строки:

gulp.task ('default', 'fractal: start', 'sass', 'watch');

Это мой законченный gulpfile.js . Если вы добавите это в свой проект по умолчанию Fractal, убедитесь, что папки установлены для указанных путей. Вы должны иметь возможность перейти в командную строку, запустить gulp а Fractal начнется.

Мы можем проверить наш Sass, добавив переменную в файл global.scss ; вам нужно будет добавить это выше строки, которая включает компоненты, чтобы эта переменная была доступна для этих компонентов.

  $ color1: rebeccapurple;  

Затем в example.scss добавьте правило для заголовка уровня 1, добавленного ранее:

  h1 {
  цвет: $ color1;
}  

Если все настроено правильно, вы должны найти файл .css в public / css, который содержит правило:

  h1 {
  цвет: rebeccapurple;
}  

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

В папке с вашими компонентами создайте файл с именем _preview.hbs .

Файл предварительного просмотра — это, по сути, документ HTML, связанный в нашем CSS и все, что вам нужно включить. В теле есть тег {{yield}} и здесь будет размещен компонент.

  








{{{ Уступать }}}

  

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

Библиотека образцов как источник истины

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

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

Использование библиотеки шаблонов Первый подход к управлению недостатками

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

Мы можем посмотреть на простой случай компонента медиа-объекта, чтобы увидеть, как это может работать. Чтобы следовать, создайте папку media внутри компонентов в Fractal и добавьте файлы media.hbs и media.scss .

Начать с хорошей разметки

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

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

Поэтому мой компонент имеет следующую разметку, которую я добавляю к media.hbs .

  


  

    
  
  
 Это мое название 
  

      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis carula vitae ligula сидит amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Преобладание quis risus id dolor venenatis condimentum. 
  
  

    Дополнительный нижний колонтитул идет сюда.
  
  

Вы можете видеть, как это отображает внутри Fractal.

Как только у меня есть разметка, которую я хочу, я буду работать на дисплее рабочего стола, который я имею в виду. Я собираюсь использовать CSS Grid Layout и метод grid-template-areas . Добавьте к media.scss следующее:

  img {max-width: 100%; }

.media> .title {
  сетка: название;
}

.media> .img {
  площадь сетки: img;
}

.media> .content {
  grid-area: bd;
}

.media> .footer {
  площадь сетки: ft;
}

.СМИ {
  margin-bottom: 2em;
  отображение: сетка;
  сетка-столбик-зазор: 20 пикселей;
  grid-template-columns: 200px 3fr;
  Сетка-шаблон-направления:
    "img title"
    "img bd"
    "img ft";
  }  

Теперь у нас есть простой макет медиа-объекта:

Что-то, что вы можете сделать в Fractal, — это добавить вариации компонента. Возможно, вы захотите перевернуть медиа-объект, чтобы изображение было справа.

Теперь добавьте CSS в media.scss чтобы перевернуть макет:

  .media.media-flip {
grid-template-columns: 3fr 200px;
Сетка-шаблон-направления:
  "title img"
  "bd img"
  «ft img»;
  }
 

Существует два способа создания вариантов: основанные на файлах и конфигурации. На основе файлов проще всего и полезно, если ваш вариант имеет разную разметку. Чтобы создать вариант на основе файлов, сделайте копию своего компонента в папке с носителем с именем media — flip.hbs (это две тире в имени файла).

Этот компонент должен иметь одинаковую разметку со словом media-flip добавленным в первую строку, и тогда вы сможете увидеть обе версии.

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

Если вы хотите сделать это, удалите свой файл варианта и вместо этого добавьте конфигурационный файл с именем media.config.json содержащий следующий код:

  {
    «title»: «Объект мультимедиа»,
    «контекст»: {
        "модификатор": "default"
    },
    «варианты»: [
        {
            "name": "Flipped",
            "context": {
                "modifier": "flip"
            }
        }
    ]
}
 

Затем измените первую строку media.hbs следующим образом: