Заготовка для верстки (StartProject) / Habr
Хочу поделится заготовкой для верстки, которую создал для себя. Предполагается верстка по БЕМ методологии используя препроцессор less. В заготовку входит: grunt, bower, базовый html с примером БЕМ блока.
Цель использования заготовки (StartProject):
- компиляция less в css;
- минификация css, js;
- создание красивого dev кода html, css, js;
- контатенация js, css;
- сжатие картинок;
- удобное подключение библиотек;
- наличие базового reset css;
- быстрое и простое внедрение нужных библиотек (в StartProject подключена только jquery).
С клонировать заготовку можно с моего Git аккаунта https://github.com/sun-ks/StartProject.
Заготовку (StartProject) поместите на локальный сервер. Я использовал Denver. Ниже поймете, для чего.
Склонируйте заготовку (StartProject)git clone https://github.com/sun-ks/StartProject.git
Для работы с grunt и bower вам понадобится node.js.
Установите grun и bower
Для этого перейдите в папку с заготовкой проекта и выполните — npm install
Затем установим установим зависимости bower командой — bower install
Все готово!
Теперь заходим в папку html/index.html. И наблюдаем следующий базовый код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="description" content=""> <meta name="author" content=""> <title>StartProject</title> <link rel="stylesheet" href="../dist/style.min.css" /> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../dist/main.min.js"></script> </head> <body> <header> header </header> <nav> navigation </nav> <section> <article> <!--Пример БЭМ блока --> <p>My block title. <div>active</div> <div>test0</div> </p> </article> <article > <header> Article header </header> Article </article> </section> <aside> sidebar content </aside> <footer> copyright </footer> </body> </html>
Стоит обратить внимание на пример БЭМ блока:
<article>
<!--Пример БЭМ блока -->
<p>My block title.
<div>active</div>
<div>test0</div>
</p>
</article>
Я рекомендую писать верстку в соответствии с БЭМ.
Его less реализацию можно увидеть в assets/css/main.less:
.myblock {
/* пример блока */
border: 1px solid #000;
color: orange;
&_size_s {
/* пример модификатора блока */
color: green;
}
&__title {
/* пример элемента */
font-size: 20px;
&_state_active {
/* пример модификатора елемента */
background: green;
color: white;
}
}
}
.test {
/* пример блока */
background: red;
color: #fff;
}
В reset.less лежат базовый reset style и самые базовые блоки, такие как:
clearfix, show, hide…
/*--- CSS Reset ---*/
header,
nav,
section,
article,
aside,
footer {
display: block
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.hide {
display: none;
}
.
show {
display: block;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
Запускаем команду — grunt.
При ее запуске выполняется:
Приведение в порядок табуляции в html, less, css файлах (попробуйте нарушить табуляцию перед запуском grunt). Папки — /assets, /html.
Минификация, контентенация js, css. Из папки /assets в /dist.
Компиляция less в css
Сжатие картинок происходит командой — grunt imagemin Картинки берутся с папки assets/img после сжатия помещаются в dist/img.
Bower собирает нужные нам библиотеки. В нашем случае это библиотека — jqvery.
Рекомендую ознакомится:
Что такое БЭМ?
Grunt для тех, кто считает штуки вроде него странными и сложными
Шаблоны кода — Функциональность | ReSharper
ReSharper предоставляет несколько видов готовых шаблонов, которые помогают быстрее писать часто используемые конструкты, заключать код в блоки и создавать новые файлы.
Вы можете создавать свои собственные шаблоны, которые отвечают вашим привычкам и особенностям кодовой базы.
Шаблоны Live Templates
Live Templates представляют собой более продуманную версию сниппетов Visual Studio.
Если вам нужно применить готовый шаблон, просто введите его аббревиатуру и нажмите Tab, чтобы развернуть шаблон. Используйте клавиши Enter или Tab для навигации по параметрам шаблона (если вы используете нативное автодополнение Visual Studio, нажмите Ctrl+E, L, чтобы увидеть список доступных шаблонов и развернуть выбранный).
В отличие от обычных сниппетов, ReSharper умееет предсказывать из контекста, какие переменные, поля и типы следует использовать в шаблоне. В большинстве случаев вам даже не придется ничего печатать — просто выберите нужное значение из списка. Кстати, ReSharper импортирует сниппеты Visual Studio для C# и JavaScript, и вы можете их использовать в качестве Live Templates.
ReSharper предоставляет более 170 готовых шаблонов для большинства поддерживаемых языков и технологий.
Этот список включает шаблоны для итерации по коллекции, написания методов утверждения и запросов LINQ, создания новых массивов, вывода значений, генерации автосвойств и многого другого.
Шаблоны обертывания
Шаблоны Surround используются для быстрого заключения выражения, отдельного оператора или произвольного блока кода в конструкции if...else, try...catch и др. ReSharper переформатирует код, cкорректирует выделение и/или переставит курсор, чтобы вы могли продолжить ввод сразу после применения шаблона.
Чтобы обернуть фрагмент кода, выделите его и нажмите Ctrl+E, U — во всплывающем окне вы увидите доступные шаблоны. Другой способ — нажать Alt+Enter при выделении. Откроется контекстное меню, в котором вы найдете применимые шаблоны, а также дополнительные функции, такие как форматирование кода и контекстные действия.
Шаблоны файлов
ReSharper позволяет добавлять один или несколько новых файлов с предопределенными фрагментами кода.
Например, вы можете создать файл с объявлением класса, интерфейсом, объявлением структуры и так далее. Чтобы выбрать нужный шаблон из списка, нажмите Ctrl+Alt+Ins прямо в редакторе.
Если шаблон файла подразумевает создание нескольких файлов, ReSharper добавит эти файлы в указанные места в вашем решении и инициализирует их содержимое синхронизированными параметрами.
Постфиксные шаблоны
Постфиксные шаблоны помогают преобразовывать введенные выражения, не возвращаясь в начало строки. Например, вы можете обернуть текущее выражение в if, while, lock, using, добавить return, yield return, await в начало, выполнить итерацию по коллекции, сгенерировать оператор switch, привести это выражение к определенному типу или даже ввести для него поле или свойство.
Шаблоны исходного кода (только для C#)
Список постфиксных шаблонов легко расширяется собственными шаблонами исходного кода (source template), которые можно создавать в любом месте кода проекта в виде методов расширения.
Их можно определять для конкретных типов в проекте или для любых стандартных типов в виде открытых методов, маркированных атрибутом [SourceTemplate] из фреймворка JetBrains.Annotations.
Чтобы проиллюстрировать использование шаблонов исходного кода, создадим несложный шаблон, проверяющий значения типа double на равенство числу пи и перемещающий курсор на юнит-тесты для следующей строки.
Теперь после любого выражения, вычисляемое значение которого имеет тип double, можно ввести точку и вызвать созданный шаблон.
При выборе шаблона в списке автодополнения выражение заменяется кодом шаблона, а курсор перемещается, как указано в шаблоне.
Изменение шаблонов и совместный доступ
В ReSharper вы можете изменять существующие шаблоны и создавать свои собственные.
ReSharper предоставляет редактор шаблонов, который открывается в отдельной панели Visual Studio. Это позволяет легко переключаться между кодом и окном редактирования шаблонов и ускоряет их тестирование в реальных условиях.
Для управления шаблонами используйте окно Templates Explorer (ReSharper | Tools | Templates Explorer).
С его помощью можно легко поделиться любым готовым шаблоном с вашей командой.
Еще один способ использования шаблонов вместе с участниками команды — механизм уровней параметров, поскольку шаблоны исходного кода сохраняются в параметрах ReSharper. Чтобы другие разработчики, работающие над тем же решением, могли использовать шаблоны, можно либо создать новые шаблоны кода в уровне параметров, с которым работает вся команда, либо скопировать существующие шаблоны в такой общий уровень параметров.
Кроме того, шаблоны можно экспортировать в файл и делиться им с другими разработчиками. Аналогично вы можете импортировать шаблоны, созданные другими разработчиками.
Обратите внимание:
Все сочетания клавиш, приведенные на этой странице, соответствуют набору сочетаний «Visual Studio», использующемуся в ReSharper по умолчанию. Подробнее о двух наборах сочетаний клавиш, доступных в ReSharper, вы можете узнать в его документации.
Добавить пробел в HTML — Инструкции
от Джозеф Браунелл / вторник, 20 июля 2021 г. / Опубликовано в HTML, Latest
Добавление пробела в HTML: Обзор
В этом руководстве показано, как добавить пробел в HTML. Любые пробелы, которые вы вводите в текст HTML для отображения в браузере, кроме одного пробела между словами, игнорируются. Таким образом, вы должны кодировать желаемые пробелы в вашем документе. Вы можете добавить пробел в HTML к любым строкам текста. Вы можете использовать Объект HTML для создания пробелов как в тексте абзаца, так и в тексте таблиц, например. Поскольку в HTML нет символа пробела, вы должны ввести сущность для каждого добавляемого пробела.
Чтобы вставить пробелы в текст в HTML, введите для каждого добавляемого пробела. Например, чтобы создать пять пробелов между двумя словами, введите сущность пять раз между словами.
Вам не нужно вводить пробелы между сущностями.
| Субъект: | |
| Пример: | Это добавит пять пробелы. |
| Результат: | Это добавит пять пробелов. |
Изображение объекта HTML, используемого для создания пустого пространства в тексте абзаца в коде HTML.
Добавить пробел в HTML: Инструкции
- Чтобы добавить пробел в HTML к тексту , введите объект для каждого пробела для добавления.
Добавление пробелов в HTML: видеоурок
В следующем видеоуроке под названием «Вставка пробелов» показано, как добавлять пробелы в текст в HTML. Этот видеоурок является частью нашего полного курса обучения HTML5 и CSS3 под названием «Освоение HTML5 и CSS3 Made Easy v.1.0».