HTML

• Классы компонентов STRAP именуются в формате UpperCamelCase (что очень хорошо, если вы используете другой формат);
• ID и названия атрибутов именуются-через-дефис;
• Содержимое name атрибутов именуется_через_подчёркивание.

SCSS

• Константы именуются в ALL_UPPER_CASE;
• Переменные, примеси и функции именуются-через-дефис;
• К имени приватных переменных, функций и примесей добавляется префикс _подчёркивание;
• Комментирование в SCSS-файлах выполняется только двойным слешем //

Всё более-менее очевидно, поэтому я остановлюсь на самом неочевидном: папке sass. Файлы этой папки должны отвечать за конечные, генерируемые CSS-файлы. Внутри каждого из них происходит сборка STRAP со всякими модулями: примесями, функциями, дополнительными классами, темами.

Практически всё содержимое /sass/strap/, за исключением /sass/strap/strap-lib/ является пользовательским расширением существующих в STRAP примесей, функций, конфигов и т.п.

Некоторые советы по поддержанию структуры

• Используйте дефисы -для разделения названия имён файлов и папок;
• Все генерируемые папки со спрайтами /images/sprites/ должны иметь префикс подчёркивания _ для корректной генерации;
• Абсолютно все файлы внутри /sass/strap/ должны иметь префикс подчеркивания _, чтобы не быть скомпилированными в качестве отдельных файлов;
• Файлы с двойным подчёркиванием __ не содержат в своём корне CSS (например, файлы с примесями, функциями, конфигами);
• Файлы тем не должны ничего запрашивать из родительских директорий; вместо этого следует указывать запрашиваемые файлы в описание темы;
• Крайне не рекомендуется менять содержимое в папке /sass/strap/strap-lib — любое поведение можно переопределить в пользовательских файлах.

Как выглядит типичная инициализация

// Инициализация
@import "strap/__init";

// Вы можете подключить все ui-компоненты одной строкой
@import "strap/_imports";
// ...или выборочно
@import "strap/strap-lib/misc/_normalize";
@import "strap/strap-lib/ui/_grid";
@import "strap/strap-lib/ui/_typography";
@import "strap/strap-lib/ui/_icons";

// Можете подключить всю тему целиком
@import "strap/themes/strap-ui/_init";
// Или частично
@import "strap/themes/strap-ui/ui/icons/_entypo";

3. И наконец, добавим блок .Content внутрь каждой колонки, чтобы было понятно, где находится контент (опционально).

<div class="Row">
	<div class="Col-8">
		<div class="Content">
			8 колонок
		</div>
	</div>
	<div class="Col-4">
		<div class="Content">
			4 колонки
		</div>
	</div>
</div>

Вложенные колонки

Никакой дополнительной магии не требуется. Просто поместите ещё один блок .Row внутрь колонки.

<div class="Col-6">
	<div class="Content">
		<div class="Row">
			<div class="Col-2">
				<div class="Content">
					Col-2
				</div>
			</div>
			<div class="Col-3">
				<div class="Content">
					Col-3
				</div>
			</div>
			<div class="Col-1">
				<div class="Content">
					Col-1
				</div>
			</div>
		</div>
	</div>
</div>

Все вертикальные отступы, все размеры всех элементов по-умолчанию так или иначе кратны высоте строки, что делает страницу ещё более гармоничной*.

Не ломайте гармонию!

Следите за вертикальным ритмом!

<div class="Col-4 Top">
	<div class="Content">
		Этот блок должен быть<br/>
			где-то вверху.
	</div>
</div>

<div class="Col-4 Middle">
	<div class="Content">
		Этот блок — посередине.
	</div>
</div>

<div class="Col-4 Bottom">
	<div class="Content">
		А этот — прижат к самому низу.
	</div>
</div>

Заголовок <h1> (38px)

Заголовок <h2> (32px)

Заголовок <h3> (24px)

Заголовок <h4> (18px)

Заголовок <h5> (16px)

Заголовок <h6> (12px)

Этот вариант почти правильный. Почти, потому что внутри /sass/strap/ui/icons/_entypo.scss мы можем увидеть строчку // @required ui/icons. Такая строчка означает, что перед тем, как подключить данный файл, нужно убедиться, что так же подключён strap/ui/_icons.scss.

// Инициализация
@import "strap/init";
	...
// Правильное подключение классов для иконок Entypo
@import "strap/ui/icons";
@import "strap/ui/icons/entypo";
	...

/* 1 */
margin-bottom: line(1);
/* 2 */
margin-bottom: line(1, 20px);

/* 1 */
margin-bottom: 20px;
/* 2 */
margin-bottom: 31px;

/* 1 */
@include font-size(20px);
/* 2 */
@include font-size(20px, 2);

/* 1 */
font-size: 20px;
font-size: 1.42857rem;
line-height: 31px;
/* 2 */
font-size: 20px;
font-size: 1.42857rem;
line-height: 56px;

@include breakpoint(phone landscape, tablet) {
	.Content {
		background: #c00;
	}
}

@media only screen and (min-width: 480px) and (max-width: 959px) {
	.Content {
		background: #c00;
	}
}

.Icon {
	// Создаёт спрайт из всех .png внутри /images/themes/strap-docs/sprites/_browsers/
	// /images/themes/strap-docs/sprites/browsers-sprite.png
	@include sprite-dir("browsers", "themes/strap-docs/sprites");

	&.IE {
		// Указывает на файл /images/themes/strap-docs/sprites/_browsers/ie.png
		@include sprite-element("ie");
	}
}

.Icon.IE {
	background: url(../images/themes/strap-docs/sprites/browsers-sprite.png) no-repeat;
	background-position: 0 -84px;
	height: 79px;
	width: 84px;
}