Меню

Как установить плагин emmet на brackets

Плагин EMMET молниеносная верстка

Дополнительное видео

Плагин EMMET быстрый набор кода

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

Сам урок разбит на несколько частей:

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

Emmet синтаксис HTML

При помощи Emmet, базовая разметка разворачивается двумя клавишами, прописываем восклицательный знак (!) и нажимаем (TAB) на клавиатуре, тем самым получим базовую разметку HTML страницы.

Что бы написать тег, пишем его название, нажимаем кнопку (TAB) и эммет создаст открывающий и закрывающий тег, а курсор помещает вовнутрь.

У общих тегов предусмотрены свои сокращения и в принципе они интуитивно понятны.

У некоторых еммет создает автоматически атрибуты.

При таком синтаксисе, заполняется часть атрибута.

Есть и другие теги о которых вы можете почитать в документации emmet.

Для атрибутов используя те же самые квадратные скобки [ ] как в CSS селекторах, можем добавлять атрибуты td[rowspan=2 title=»text»]

Emmet также умеем создавать целые цепочки из элементов при помощи символа «больше (>) », при нажатии TAB получаем вложенную конструкцию.

Используя символ «Плюс (+) », мы добавляем элемент к предыдущему на том же уровне.

Что бы вернуться по дереву вверх на одну ступень, используем символ «галочка (^) », а если на более чем одну ступень, то добавляем соответствующее их количество.

При помощи символа «звездочка (*) », мы можем продублировать комбинацию, любое количество раз.

При этом вкладывать вовнутрь любые элементы.

При помощи «фигурных скобок < >» можем добавлять текстовое содержание, а при помощи (с) писать комментарии.

В Emmet так же есть генератор произвольного текста, что довольно удобно на стадии создание прототипа страницы, когда не интересует его содержание, а блоки нужно заполнить текстовой информацией. При помощи слова « lorem » генерируем текст.

После слова lorem можем прописать количество слов в тексте, для этого, после слова задаем соответствующее число.

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

Emmet Синтаксис CSS

Открываем файл стилей, и в нем разберем популярные свойства, который часто задействуем при верстке.

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

Для описания свойств color можно воспользоваться следующими сокращениями.

Что бы присвоить параметры отступов не обязательно прописывать аббревиатуру (px) она автоматически пропишется, а вод для того что бы задать в процентах или в других значения дописываем соответствующую букву.

По такой же аналогии задаются внешние (margin) и внутренние (padding) отступы.

Так же как в HTML, можем группировать свойства при помощи знака (+)

Используя новые свойства из CSS3 в большинстве случаев префикс создается самостоятельно.

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

Читайте также:  Как на айфоне установить погоду в месте где находишься

Приоритет задается восклицательным (!) знаком.

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

Свои сниппеты в PHPSTORM

В каком бы редакторе с emmet не работали, у вас всегда будет возможность создавать свои аббревиатуры.

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

Создам для них второй сниппет.

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

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

Сокращенные комбинации emmet + PhpStorm

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

Что бы закомментировать участок кода используется сочетание клавиш ( CTRL + / ). Для комментирования выделенной области нажимаем ( CTRL + SHRIFT + )

Если нужно обернуть текст или код в определенные теги, выделяем его, нажимаем ( CTRL + ALT + J ) и выбираем метод написание обертки. Тут что удобно, есть три варианта, можем использовать стандартный набор кода, обернуть в ( CDATA ), и сделать обертку при помощи emmet.

Когда на страницу копируем код, из каких-то источником, в большинстве случаев он не форматированный, с таким кодом неудобно работать, и приходится его приводить к определенному виду. Для этого существует сочетание клавиш ( CTRL + ALT + L), выделяем участок кода, нажимаем, и код отформатирован.

Бывает случаи, когда нужно переместить участок кода выше или ниже по дереву, для этого выделяем область кода, нажимаем ( ALT + SHIFT ) и при помощи стрелок выше ниже перемещаем его выше ниже по дереву ( ALT + SHIFT + UP или DOWN ).

Самое основное, в принципе разобрали, и для закрепления знаний напишем простенький код при помощи emmet.

Практический пример по EMMET

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

Для примера создадим простенькое меню, с небольшой анимацией.

рис 4-5 (пример меню)

Затем создаем файл CSS. При помощи аббревиатуры ( dwsb ), разворачиваем начальные стили для выравнивания блока.

Для списков уберем маркеры.

Emmet ( m p c fz20 tdn ttu )

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

Emmet ( poa por ct bg b0+l0+w100p+h3 )

Делаем анимацию

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

В то же время при наведении на блок ее возвращаем в нулевое положение.

Для плавности перемещения псевдоэлемента, для него прописываем transition в 0.8 сек. Emmet ( trs )

Элемент не скрылся, так как ссылка является строчным элементом, переводим ее в блочный вид. Emmet ( db )

Читайте также:  Как установить фаркоп на ниву ваз 21214

Затем делаем конечный кадр, ставим 100% и высоту тоже в 100%. Проверяем результат.

При наведении текст поменяем на белый.

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

Источник

Как пользоваться редактором Brackets

Brackets – это бесплатная среда разработки от семейства Adobe, для быстрого написания HTML /CSS/JavaScript кода. Среда доступна для Windows, Mac OS и Linux, кроме того переведена на русский язык.

Благодаря работе локального сервера на Node.js, есть встроенный предпросмотр (Live Preview). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы. Live Preview работает только с браузером Chrome.

Установка Brackets

На официальном сайте http://brackets.io, вы сразу увидите зеленую кнопочку Download Brackets. Независимо от того, какая у вас стоит операционная система (например Windows 32/64 бит), вы скачиваете этот файл. Процесс установки обычный, без каких-либо особенностей.

Настройка Brackets

Хочу вас обрадовать, что у редактора Brackets практически нечего настраивать. После установки редактора, я открываю вкладку Вид → Themes и выбираю тему (светлую или темную), размер и семейство шрифта. Затем ставлю галочку у Vertical Split. Это делит экран на две части, слева я пишу HTML код, а справа CSS.

Плагины Brackets

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

Emmet

Плагин Emmet позволяет быстро писать HTML/CSS код, используя сокращенную запись. На сайте https://emmet.io, в разделе документация, есть масса примеров сокращений кода. Потраченное время на изучение документации, окупится очень быстро. Вам останется только сожалеть о том, почему вы не сделали это раньше.

Начало работы

В теле пустого index.html ставим ! восклицательный знак, нажимаем TAB и у нас появляется первоначальная структура документа.

Подключение CSS файла

Пишем название тега link, нажимаем TAB и у нас появляется готовый тег. Нам остается только прописать название CSS файла. Но даже это Emmet делает за нас, указываем первую букву и появляется подсказка.

Написав такую запись в HTML файле.

После нажатия клавиши TAB, развернется такой код.

Одно слово lorem и клавиша TAB, сгенерируют абзац с текстом Lorem ipsum.

Для генерации трех абзацев, нужно написать так:

Вам следует критично оценить свои навыки в верстке и использовать Emmet, если вы легко справляетесь с версткой (не паритесь), но хотели бы верстать ещё быстрее. В противном случае, стоит сначала поучиться верстке, на моём видеокурсе.

Whitespace Normalizer удаляет ненужные пробелы в конце тегов и селекторов.

SASS Hints показывает в подсказках все названия переменных и их значения, когда вы ставите знак доллар.

Indent Guides показывает вертикальные линии, чтобы вы не запутались в открывающих и закрывающих тегах.

Brackets Synapse – это расширение синхронизирующее редактируемые файлы с файлами на хостинге. Отпадает необходимость в загрузке файлов, через FTP программу.

Brackets Snippets позволяет сохранять собственные фрагменты кода в библиотеку, для повторного использования кода.

Читайте также:  Как установить airslax на windows 7

Как пользоваться Brackets

Горячие клавиши, так же помогут ускорить верстку.

В Brackets можно вызвать палитру цветов. Работает это так, ставите курсор в коде цвета и при помощи комбинации клавиш CTRL+E, вызываете палитру и выбираете нужный цвет.

Заключение

Бессмысленно сравнивать Brackets c другими редакторами кода. Каждый работает в той программе, к которой он привык. Но, если вы все ещё верстаете на Notepad++ и не знаете, на какой современный редактор кода перейти. В таком случае Brackets – хороший выбор для верстальщика.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

Источник

10 крутых плагинов для Brackets

Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

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

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

CanIUse

С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.

HTML Wrapper

Brackets Icons

Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.

Emmet

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

Simple To-Do

Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение Simple To-Do, Плагин позволяет создавать и управлять списками задач для каждого проекта.

Lorem Ipsum

JS CSS Minifier

Удаляет лишние символы из кода JavaScript и CSS файлов. Процесс называется минификацией и позволяет оптимизировать код для дальнейшего ускорения загрузки страниц на сайте.

Сustom Region Code Folding

Добавляет в Brackets функцию сворачивания блоков кода. Слева появятся треугольники, с помощью которых скрываются неиспользуемые фрагменты.

Beautify

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

Brackets-Git

Шорт-лист с примерами расширений отлично послужит любому веб-разработчику. Теперь процесс программирования и верстки станет намного приятнее.

Источник

Adblock
detector