Привет, дорогие читатели!
Эта статья может пригодиться веб-мастерам, использующим в работе 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.б. или в Resources — URL добавляем целиком ссылку на файл
2. затем, в html вставляем один из четырех макетов (на примере макета 4):
Это можно увидеть по классу grid_4
.
Выбор макета
Чтобы сменить макет, просто замените grid_4 на 1, 2 или 3 и укажите в описании Classic, Columns или Bottom results.
Если вы решите скопировать весь код, то можете просто указать в нем рекомендуемый фрагмент при помощи добавления класса .active
рядом с номером макета.
Пример:
Это можно увидеть по классу active grid_1
. Активный пункт выделяется синим цветом, как и в оригинале.
Цвет текста в контейнере
Если ваш проект носит темные оттенки, то вам может пригодиться изменение цвета текста в контейнере. Измените цвет с темного на светлый, добавив класс — .invers
в самом начале html кода макета.
В результате у вас должно получиться вот так.
На этом у меня всё. Удобный это инструмент или нет решать Вам. Надеюсь данная разработка будет полезной. Вы можете присоединиться к ней для усовершенствования дизайна на Git или написать пожелания и замечания здесь в комментариях.