Генератор html css шаблонов. Для чего он нужен? Подборка отличных генераторов CSS3 и HTML5 Онлайн генератор html страниц
Писать чистый HTML часто неудобно, особенно если нужно делать динамические вставки.
Шаблонизаторы частично решают эту проблему, но их причудливый синтаксис нужно изучать, мириться с ограничениями, вкладывать одни шаблоны в другие для повторного использования, в целом попытка хороша, но что-то не то.
В некоторых фреймворках есть хелперы, в частности написать эту статью меня вынудила Aura.Html . С хелперами иная история - они изначально задуманы для реального упрощения, поскольку одной командой могут генерировать хороший кусок HTML кода, но они в большинстве заточены под определённое использование, и что-то дальше этого выглядит слишком криво.
Как более универсальное решение было бы не плохо не изобретать причудливый синтаксис, а использовать самый обычный PHP и всем знакомые примитивные CSS-селекторы.
Как оно работает?
Идея была в том, чтобы сделать как можно проще:H::div("Content")
что на выходе даст
Это самый простой пример. Название метода - тэг, внутри передается значение. Если нужно добавить атрибутов - не проблема:
H::div("Content",
[
"class" => "some-content"
])
И можно было бы подумать, что проще уже никак, но тут на помощь приходят CSS-селекторы, и немного уличной магии:
H::{"div.some-content"}("Content")
На выходе будет то же самое. С первого взгляда может показаться немного странным, но на практике весьма удобно.
В сравнении с Aura.Html
В начале я упоминал Aura.Html, стоит сравнить как генерируется HTML там, и тут. $helper->input(array("type" => "search",
"name" => "foo",
"value" => "bar",
"attribs" => array()));
Наш вариант:
H::{"input"}()
Любой из параметров можно было вынести в массив.
На выходе:
И ещё вариант посерьезней.
Aura.Html (пример из документации):
$helper->input(array("type" => "select",
"name" => "foo",
"value" => "bar",
"attribs" => array("placeholder" => "Please pick one",),
"options" => array("baz" => "Baz Label",
"dib" => "Dib Label",
"bar" => "Bar Label",
"zim" => "Zim Label",),))
Наш вариант:
H::{"select"}([
"in" => [
"Please pick one",
"Baz Label",
"Dib Label",
"Bar Label",
"Zim Label"
],
"value" => [
"",
"baz",
"dib",
"bar",
"zim"
],
"selected" => "bar",
"disabled" => ""
])
Тут in
используется явно, его можно использовать для передачи внутренностей тэга, как Content
в примере с div
выше. Используются как общие правила, так и некоторые специальные, немного подробнее о которых дальше.
На выходе то же самое:
Специальная обработка
Все тэги следуют общим правилам обработки, но есть некоторые тэги, которые имеют дополнительные конструкции для удобства.Например:
H::{"input"}()
Работает похоже с select
, в value
значение, а checked
проставится когда совпадет одноименный элемент передаваемого массива.
Ещё один пример использования in и специальной обработкой input :
H::{"input"}([
"checked" => 1,
"value" => ,
"in" => ["Off", "On"]
])
Off
On
Никаких оберток label
не добавляется специально, чтобы сделать код максимально общим и предсказуемым.
Если нужно обработать массив
Это, наверное, самая часто используемая вместе с контролем вложенности возможность, так как данные и правда часто приходят откуда-то в виде массива.Для обработки массива его можно передать прямо вместо значения:
H::{"tr td"}([
"First cell",
"Second cell",
"Third cell"
])
Либо даже опустить лишние скобки в самом простом случае
H::{"tr td"}("First cell",
"Second cell",
"Third cell")
На выходе:
Каждый элемент массива будет обработан отдельно, то есть вполне законно передавать не только строки, но и некоторые атрибуты, правда, иногда это выглядит слишком монструозно:
H::{"tr.row td.cs-left"}("First cell",
[
"Second cell",
[
"class" => "middle-cell",
"style" => "color:red;",
"colspan" => 1
]
],
[
"Third cell",
[
"colspan" => false
]
])
Если в вызове тоже были указаны атрибуты - class
и style
будут расширены, остальные перезаписаны, атрибуты с логическим значением false
будут удалены.
С помощью волшебной палочки, которая не является привычной частью CSS-селектора (это единственное исключение, без которого можно обойтись), можно управлять тем, как будут обрабатываться уровни вложенности:
H::{"tr| td"}([
[
"First row, first column",
"First row, second column"
],
[
"Second row, first column",
"Second row, second column"
]
])
Если массив получен из базы данных, или иного хранилища - удобно использовать такой массив напрямую, и это можно сделать передав в специальный атрибут insert
:
$array = [
[
"text" => "Text1",
"id" => 10
],
[
"text" => "Text2",
"id" => 20
]
];
h::a("$i",
[
"href" => "Page/$i",
"insert" => $array
])
Text1
Text2
Можно и в одну строчку все атрибуты написать:
$array = [
[
"id" => "first_checkbox",
"value" => 1
],
[
"id" => "second_checkbox",
"value" => 0
],
[
"id" => "third_checkbox",
"value" => 1
]
];
h::{"input]]"}([
"insert" => $array
])
А ещё всё это можно расширять
Этот класс представляет только общие, ни к чему не привязанные правила генерации HTML, которые могут быть использованы независимо от окружения.Но иногда хочется упростить выполнение более сложных рутинных операций.
Например, я использую многие элементы UIkit на фронтенде, и, например, для переключателя нужна особым образом подготовленный HTML.
Скопировав оригинальный код обработки input и слегка отредактировав можно получить такой результат:
H::radio([
"checked" => 1,
"value" => ,
"in" => ["Off", "On"]
])
Так же можно переопределить метод pre_processing
, и реализовать произвольную обработку атрибутов непосредственно перед рендерингом тэга, например, при наличии атрибута data-title
я навешиваю класс, и таким образом получаю всплывающую подсказку над элементом при наведении.
Преимущество использования
Генерируется HTML без шанса оставить тэг незакрытым, или что-то в этом роде.Везде используются общие правила обработки, которые логичны, весьма быстро запоминаются, и являются намного чаще удобными, чем наоборот.
Можно использовать с абсолютно любыми тэгами, даже с веб-компонентами (пример писать не буду, и так много примеров).
Нет никаких зависимостей, есть возможность унаследовать и переопределить/расширить по желанию всё что угодно, так как это всего лишь один статический класс, и больше ничего.
На выходе обычная строка, которую можно легко использовать вместе с абсолютно любым кодом, использовать на входе следующего вызова класса.
a! А Вы пользуетесь генераторами CSS3
или HTML5
? Если нет, то может стоит попробовать 🙂 Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5. Чтобы перейти на сайт сервиса — Жмем на название сервиса!
CSS3 генераторы:
CSS3.me
Один из самых лучших генераторов. Автором является Eric Hoffman
. Есть возможность изменить и установить закругление, тень, градиент и прозрачность — самые часто используемые эффекты.
CSS3 Maker
Есть практически все и еще чуть-чуть. Вы можете настроить @font face, анимацию, тень блоков, тень текста, вращение текста, трансформацию, градиенты, закругление и многое другое.
CSS3 Generator
Имеет примерно такой же функционал как и предыдущий генератор. Нужно выбрать из выпадающего списка интересующий пункт, и ввести первичные данные.
Webestools Shadow Generator
Генератор теней. Настраиваются только тени: цвет, смещение, размытие, внутренняя или внешняя тень и тд.
Генераторы кнопок
CSS3 Button Generator
Забавный генератор. Справа одна большая кнопка — результат манипуляций, а слева настройки. Вы можете манипулировать тенями, границей, цветом и так далее. Перетаскивания ползунков прекрасно подходят для людей, которые являются новичками в сайтостроении. Хорошо что можно сразу видеть реакцию на Ваше действие, из этого можно понять какая настройка за что отвечает.
CSS3-Tricks Button Maker
Этот генератор кнопочек немного попроще. Весь процесс создания кнопки построен на перетаскивании ползунков. Здесь ставка делается на фон, то есть игра с цветами кнопки.
CSS3 Button.net
Вот еще не плохой генератор кнопок. Можно настраивать фон кнопки, границу, тень внешнюю, внутреннюю тень, размер, цвет текста и тень текста. При внесении изменений в блоке справа сразу изменяется код.
Border Image и Radius генератор
Border-Radius
Достаточно скромный функционал: можно настроить только закругление углов, но зато каждого угла в отдельности.
Border-image
Немного сложный в освоении, но если необходимо сделать в качестве границы (border) изображении, то этот инструмент в самый раз! Выбираете свое изображение, ползунками выбираете размеры границы, можно даже для каждой границы увеличить фон… также способ повтора изображения. А код генерируется снизу.
CSS3 генератор градиента
Colorzilla Gradient Editor
Вот очень классный генератор градиента. Есть большое количество готовых наборов цветов, но также можно и самому выбирать. Устанавливается тип градиента: горизонтальный, вертикальный и тд. Даже поддержка для IE есть.
HTML5 генераторы
HTML5 ★ BOILERPLATE
С помощью этого генераторы Вы получаете заготовку шаблона , полностью оптимизированную для разных браузеров. Мне очень понравился этот генератор, теперь буду пользоваться им. Что бы ознакомиться со всеми «фишками» посетите этот проект, тем более там все на русском.
HTML5 генератор Shikiryu немного посложнее чем предыдущий. Позволяет ввести нам заголовок и описание страницы, подключить фрэймворк css, стили кнопок css, библиотеку , аналитику и тд.
Initializr является генератором HTML5 шаблонов, которые помогут вам начать работу с новым проектом. Initializr создает для вас чистый настраиваемый шаблон. Выбираемыми параметрами являются: первичный каркас, серверные опции (.htaccess, nginx.conf, web.config), подключение jquery, аналитики google, выбор между и тд.
Это простой генератор. Нам предлагают выбрать какие элементы будут присутствовать на странице, и еще указать пару опций.
На этом все, если вы знаете хорошие генераторы HTML5 или CSS3, не стесняйтесь пишите о них в комментариях 🙂
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на
Этот простой on-line генератор страниц сайта позволяет Вам создавать страницы Вашего сайта как в обычном текстовом редакторе. Он умеет генерировать все самые необходимые html-тэги в теле web-страницы. Этот генератор html-кода тела страниц сайта многократно ускорит создание страниц сайта.
Некоторые замечания по использованию генератора страниц сайта
Этот генератор страниц сайта является визуальным в том смысле, что он генерирует такой html-код страницы, чтобы в в том браузере, в котором Вы находитесь при работе с этим генератором, страница отображалась точно также, как Вы её видите в окне редактора. Данный редактор-генератор генерирует только коды разметки, то есть только HTML. Он не предназначен для создания скриптов на таких языках программирования, как JavaScript или PHP.
Данный редактор предназначен для начинающих вэб-мастеров, которые только приступают к изучению языка разметки HTML. Но он будет полезен и опытным сайтостроителям для быстрого создания маленьких страниц или шаблонов страниц. Начинающих вэб-мастеров тут привлечет возможность быстрого сравнения внесённых в дизайн страницы изменений с тем, как это отображается на изменении html-разметки страницы. Такое оперативное сравнение позволяет изучить HTML максимально быстро и эффективно.
Данный редактор не предназначен для работы с очень большим текстом и большим количеством "тяжелых" картинок. Если Вы хотите в этом редакторе создать web-страницу с очень большим текстом и/или с картинками большого объема, то лучше создайте сначала полный шаблон web-страницы, скопируйте полученный html-код в файл web-страницы и только потом вставляйте туда длинный текст и ссылки на картинки. Помните, что данный редактор не является профессиональным редактором и предназначен, в первую очередь, для любителей и начинающих вэб-мастеров. Его основное предназначение это помочь начинающим в обучении сайтостроения.
Инструкция по использованию
Если Вы когда-нибудь пользовались редакторами текстов типа MS Word, то у Вас не будет никаких трудностей с освоением этого генератора web-страниц. Этот редактор можно использовать или для создания тела web-страницы с нуля или для исправления уже существующей web-страницы, чтобы внести в неё свои изменения.
Если Вы начинаете создавать свою страницу с нуля, то Вам надо стереть мой начальный текст в окне редактора и начать вводить туда свой текст, картинки и делать своё форматирование. Когда работа будет закончена, надо в нижней части экрана редактора нажать на кнопку "Code" и скопировать полученный код в файл Вашей web-страницы. И сохранить этот файл. Обратите внимание, что копировать полученные коды надо только в тело web-страницы, то есть только между тэгами и . Сами теги body редактором не создаются.
Если Вы хотите редактировать какую-то уже готовую web-страницу, например, созданную не Вами или которую Вы создали давно, то Вам надо в нижней части экрана редактора нажать на кнопку "Code", удалить из окна редактора все мои начальные коды и скопировать туда коды из файла web-страницы. Обратите внимание, что копировать коды нужно только из тела существующей web-страницы, то есть только то, что находится между тэгами и . Сами теги body копировать в редактор не надо. Затем вам надо опять переключиться в режим визуального редактирования. Для этого надо нажать на кнопку "Design" в нижней части окна редактора и начать вносить изменения во внешний вид страницы.
Понятно, что редактировать тело web-страницы можно в этом редакторе двояко. Или в режиме "Design" редактировать визуально или в режиме "Code" редактировать сразу в кодах. Поэтому для начинающих web-мастеров это редактор очень полезен для обучения. Вы можете внести какие-то небольшие изменения в web-страницу в визуальном режиме и тут же посмотреть, как изменился при этом код, переключившись в режим редактирования кода. Или, наоборот, Вы можете внести какие-нибудь небольшие изменения в код web-страницы в режиме редактирования кода и тут же посмотреть, как измениться Ваша web-страница, переключившись в режим визуального редактирования (или в режим просмотра с помощью кнопки "Preview").
Обычное редактирование текста
В верхней строке меню находятся кнопки общего редактирования текста. У них стандартные обозначения, которые приняты в любых других редакторов текста. Поэтому только кратко пробежимся по ним.
Всё работает очень просто. Вы или выделяете какую-нибудь часть текста и нажимаете на кнопку верхнего меню, чтобы эта часть текста была отформатирована соответствующим образом. Или, если ничего не выделено, то происходит переключение в режим соответствующей кнопки, то есть, если дальше будете набирать текст, то текст будет набираться в режиме той кнопки, которую Вы только что включили.
Также, как и в любом текстовом редакторе, есть режимы, применяемые только для абзаца в целом и режимы, которые можно применить к части абзаца.
Краткое описание всех кнопочек верхней части меню в порядке их расположения:
- Paragraph. Выбирает уровень заголовка. Применяется для абзаца в целом.
- Шрифты.
- Размер шрифта.
- Цвет шрифта.
- Жирный шрифт.
- Наклонный шрифт.
- Подчеркнутый шрифт.
- Зачеркнутый шрифт.
- Выравнивание влево. Применяется для абзаца в целом.
- Центрирование. Применяется для абзаца в целом.
- Выравнивание вправо. Применяется для абзаца в целом.
- Двустороннее выравнивание. Применяется для абзаца в целом.
- Горизонтальная линия. Это и не абзацная вещь и не для части абзаца. Это просто вставка горизонтальной линии на всю ширину.
- Верхний индекс.
- Нижний индекс.
Основное html-редактирование
В средней строке меню находятся как кнопки для типичного редактирования web-страницы, так и сервисные кнопки обычных редакторов.
Описание всех кнопочек верхней части меню в порядке их расположения:
- Создание гиперссылки. Обязательно нужно выделить мышкой тот текст или картинку, при нажатие на которых Вы хотите, чтобы произошел переход на другую
web-страницу. После выделения жмете на кнопку меню и открываете окошко, в котором Вы должны задать адрес, куда будет идти переход (URL) и условия перехода
(target). Вы можете задать следующие условия:
- Пусто. По умолчанию новая страница откроется в том же самом окне.
- _blank. Новая страница будет выводиться в новом окне браузера (или в новой вкладке браузера, в зависимости от конкретных настроек браузера).
- _parent. Новая страница будет выводиться в родительском окне (или вкладке) браузера. Если родительского окна (или вклпдки) нет, то это аналог условия _self.
- _self. Новая страница будет выводиться в то же самое окно, в котором находится ссылка. Это аналог режима "Пусто".
- _top. Если страница сайта с фреймами (то есть разбита на несколько окон), то новая страница будет выводиться во всё окно браузера. В обычном случае это тоже аналог режима _self.
- Отмена гиперссылки. Выделяете текст гиперссылки ПОЛНОСТЬЮ. Если выделите только часть текста гиперссылки, то невыделенная часть останется гиперссылкой. Например, если выделили только центральную часть текста гиперссылки, то образуется две гиперссылки с одинаковым адресом на невыделенных текстах.
- Вставка картинки. Ставите курсор в то место, где должна быть картинка и жмёте на кнопку. В открывшимся окошке задаете путь к картинке (Image URL), описание
картинки (Image Description), выравнивание картинки на странице (Alignment), ширину границы (Border) и отступы картинки от текста (или других элементов на
странице по горизонтали и по вертикали (HSpace, VSpace). Выравнивание картинки Вы можете задать следующим:
- Пусто. По умолчанию это выравнивание по левому краю.
- BaseLine. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет располагаться так, как решили создатели Вашего браузера.
- Top. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по верхней части картинки.
- Middle. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по центру картинки.
- Dottom. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по нижней части картинки.
- TextTop. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет размещен над картинкой. (Поддерживается не всеми браузерами.)
- Absolute Middle. (Поддерживается не всеми браузерами.)
- Absolute Bottom. (Поддерживается не всеми браузерами.)
- Left. Картинка будет размещена слева от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
- Right. Картинка будет размещена справа от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
- Отмена Форматирования. Отменяет форматирование, которое было сделано при помощи кнопок верхней строки меню, которые относятся к форматированию части абзаца. Работает точно также, как и кнопки верхнего меню, когда надо отменить форматирование, то есть выделяем нужный кусок текста и нажимаем на эту кнопку. Удобство этой кнопки состоит в том, что она одним нажатием сразу убирает всё форматирование, всех видов, которые были в выделенном фрагменте.
- Создание и редактирование таблицы. Кнопка применяется, чтобы создать таблицу в месте расположения курсора или отредактировать выделенную таблицу. При создании
таблицы надо задать следующие параметры:
- Rows - число строк.
- Columns - число столбцов.
- Width - ширина таблицы. Задается или в процентах от ширины экрана или в пикселях.
- Border - ширина границ ячеек. Если оставить значение 0, то границы ячеек не будут видны.
- CellSpacing - расстояние в пикселях между ячейками таблицы.
- CellPadding - расстояние в пикселях от границы ячейки до текста внутри ячейки.
- Alignment - выравнивание таблицы на страницы:
- Default. По умолчанию, как задали разработчики Вашего браузера.
- Left. Таблица прижата к левому краю страницы.
- Center. Таблица расположена в центре web-страницы.
- Right. Таблица прижата к правому краю страницы.
- Создать один столбец слева от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
- Создать один столбец справа от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
- Создать одну строку выше от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
- Создать одну строку ниже от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
- Удалить один столбец от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
- Удалить одну строку от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
- Создать нумерованный список. Либо выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами нумерованного списка. Либо ставите в нужное место курсор, нажимаете на эту кнопку меню и далее все абзацы, которые Вы вводите, автоматически становятся элементами нумерованного списка.
- Создать простой список. Выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами простого списка без нумерации.
- Удаление отступа. Курсор должен стоять на том абзаце, отступы которого хотим удалить. Можно выделить весь абзац или только его часть.
- Создание отступа. Курсор должен стоять на том абзаце, у которого хотим создать отступ слева. Можно выделить весь абзац или только его часть. Отступ создается для всего абзаца в целом (а не только для первой строки).
- Откат всех изменений назад. Пока Вы не нажали на кнопку "Code" или "Preview", Вы можете удалить все сделанные изменения и вернуться к тому состоянию, которое было последний раз при просмотре кода или просмотра страницы.
- Восстановление всех убранных изменений вперед. Если Вы сделали обратный откат изменений больше, чем нужно, то можете восстановить убранные изменения. Точно также, если после отката изменений Вы переходили в режим "code" или "Preview", то восстановить изменения уже не сможете.
- Уничтожить выделенное с одновременным копированием выделенного в "карман" Windows. (Ctrl+X)
- Копировать выделенное в "карман" Windows. (Ctrl+C)
- Вставить содержимое "кармана" Windows в то место, где стоит курсор. (Ctrl+V)
Дополнительное html-редактирование
В третьей строке меню находятся, в основном, кнопки для создания и редактирования форм, а также некоторых обычных дополнительных возможностей любого редактора.
Список кнопок третьей строки меню в порядке их расположения:
- Создать форму. Надо в открытом окошке ввести имя формы, адрес скрипта, который будет обрабатывать данные этой формы и метод передачи данных (post или get).
- Создать Check Box. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, стоит или нет галочка выбора изначально в этой форме.
- Создать Radio-кнопку. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, выбрана эта кнопка изначально или нет. При создании меню из radio-кнопок, не забывайте, что все radio-кнопки одного и того же меню должны иметь одно и тоже название.
- Создать площадку для ввода текста. В открытом окошке вводите название площадки для ввода текста, ширину площадки числом символов, число строк площадки, расположение абзацев и полос прокрутки и начальный текст в этом поле.
- Создать кнопку "Выполнить". В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
- Создать кнопку "Выполнить" в виде картинки. В открывшемся окошке пишем имя кнопки и адрес той картинки, которая будет играть роль кнопки.
- Создать кнопку очистки заполненной формы и возврата всех значений по умолчанию. В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
- Создать скрытое поле. В открывшемся окошке пишем имя скрытого поля и его значение.
- Создать поле для ввода пароля звездочками. В открывшемся окошке пишем имя поля пароля, длину поля и максимальное число символов пароля, которое сможет ввести пользователь при вводе своего пароля.
- Создать текстовое поле. В открывшемся окошке пишем имя текстового поля, его размер в символах, сколько максимум символов может ввести пользователь и начальный текст в этом поле.
- Отправить на печать.
- Выделить всё.
Генератор CSS-кода - весьма удобный инструмент, который может сэкономить веб-разработчику немало времени, а также уберечь от лишних ошибок. Кроме того, ваш код станет более читабельным. В этой статье мы подобрали ряд полезных на наш взгляд генераторов CSS-кода.
CSS Click Chart
CSS CheatSheet
Spritebox
Pixel Map Generator
Clean CSS
CSS Animate
Ну что, парни, анимация? Применяйте и играйте с переходами в CSS.
UI Gradients
WAIT! Animate
Создание кастомных повторяющихся пауз между CSS-анимациями никогда не было простой задачей. Но при помощи этого приложения сложность процедуры сводится к нулю.
CSS3 Generator
CSS Type Set
Хотели посмотреть, как выглядят различные шрифты? Зайдите на CSS Type Set . Всё, что нужно, - ввести текст и выбрать параметры шрифта.
Enjoy CSS
Flexy Boxes
Если вы никак не можете разобраться с flexbox, то вам стоит попробовать Flexy Boxes . В этом приложении можно сравнить различные версии flexbox и интерпретации синтаксиса.
