Привет, дорогие читатели!
Эта статья может пригодиться веб-мастерам, использующим в работе JSFiddle. В ней я хочу поделиться с вами своей маленькой разработкой — JSFiddle Recommended Layouts. Проще говоря «Рекомендуемые макеты».

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

Для тех кто впервые слышит об этом инструменте:

jsFiddle — одна из самых популярных сред веб-разработки (работающая в веб-браузере), позволяющая редактировать и запускать код, написанный на HTML, JavaScript и CSS, который будет называться «фиддлом». Есть возможность использовать библиотеки для JavaScript, такие как jQuery.

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

О проекте JSFiddle Recommended Layouts

JSFiddle-layouts — это проект с открытым исходным кодом, который представляет собой те же самые макеты (сетки), только внутри вашего проекта. Они могут быть использованы как вспомогательный инструмент для пользователей, которые в поисках нужного материала попадут на страничку вашей разработки. Многие пользователи используют JSFiddle просто для редактирования кода, верстки макетов и прочих мелочей, не подлежащих публикации. Но есть и те, кто использует JSFiddle как средство для презентации своих идей. Вот им как раз и могут пригодиться «Рекомендуемые макеты». К сожалению, JSFiddle не позволяет показывать проект в том виде, в котором сохранили его Вы, поэтому была придумана данная разработка. Попав к вам, посетитель увидит красивое фиксированное окошко с рекомендуемым макетом, который автор (Вы) считает наиболее удобным для просмотра.
Рабочий пример на https://jsfiddle.net/

В оригинале макеты представляют собой единый блок, но, для удобства использования, JSFiddle-layouts разделен на 4 контейнера. Благодаря этому, Вы можете выбрать необходимый контейнер и вставьте в свой проект только его, а не весь код. Давайте приступим к разбору материала более подробно.

Как подключить JSFiddle Layout?

1.a. на сайте JSFiddle добавляем в css своего проекта отдельные стили
1.б. или в ResourcesURL добавляем целиком ссылку на файл

2. затем, в html вставляем один из четырех макетов (на примере макета 4):

Это можно увидеть по классу grid_4.

Выбор макета

Чтобы сменить макет, просто замените grid_4 на 1, 2 или 3 и укажите в описании Classic, Columns или Bottom results.

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

Пример:

Это можно увидеть по классу active grid_1. Активный пункт выделяется синим цветом, как и в оригинале.

Цвет текста в контейнере

Если ваш проект носит темные оттенки, то вам может пригодиться изменение цвета текста в контейнере. Измените цвет с темного на светлый, добавив класс — .invers в самом начале html кода макета.

В результате у вас должно получиться вот так.

На этом у меня всё. Удобный это инструмент или нет решать Вам. Надеюсь данная разработка будет полезной. Вы можете присоединиться к ней для усовершенствования дизайна на Git или написать пожелания и замечания здесь в комментариях.

JSFiddle Recommended Layouts

на JSFiddle
на GitHub

Автор: Андрей Шарапов