• записей
    10
  • комментариев
    0
  • просмотров
    2646

2.0 Типовые элементы — Вёрстка. Руководство верстальщика

klierik

847 просмотров

ℹ️ Статья не завершена, дополняется по мере реализации проекта.

0. Предисловие

И так, когда у нас готова основа проекта (сборщик и организована структура) можно приступать к вёрстке.

ℹ️ Вообще, как правило, и сборщик и структура проекта организовываются во время его разработки. Особенно это касается тех ситуаций, когда разработчику впервые ставят задачу на реализацию большого кол-ва вёрстки (от 100 и более часов на вёрстку макетов). Тогда и появляется надобность в использовании инструментом по сборке проекта. А количество стилей настолько велико, что хранить в одном файле крайне затруднительно.
В статье расказывается как структурировать эти данные таким образом, что бы и разработчик, и другие участники команды, могли с лёгкостью читать, поддерживать и развивать изначально написанный "костяк". Спустя несколько лет грамотно организованная структура под конкретную задачу сильно упрощает поддержку кода и минимизирет затраты на рефакторинг кода (тем самым понижает стоимость разработки).

Рабочая ветка:

$ git checkout 2.0-html-assets

Макет: Assets/Atoms.png

Скрытый текст

Atoms.png

Как правило, такой макет создаётся на протяжении создания дизайна дизайнером. Этот макет содержит как простые так и сложные элементы. Когда я выполнял работу по данному проекту этого макета ещё не было, — он появился лишь к концу выполнения

Ну что же — ближе к делу!

1. Создание Assets

И так, на "первых порах" мы начнём разработку с создания вайла с типовыми элементами. Но, мы не будем создавать сразу все, а лишь только основные простые (текст, кнопки, прочее). И по мере разработки данный файл будет дополнятся недостающими элементами проекта.

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

1.1 Создание файлов

Создаём html файл

templates/assets.html

и SCSS файл, который будет отвечать этому блоку

assets/scss/_assets.scss

с исходным содержимым

.assets {
	//
}

и не забудем импортировать этот файл стилей в общие стили в "styles.scss"

@import "assets";

1.2 Написание HTML

Следующим шагом давайте наполним наш html-файл основным форматированием и простыми элементами, которые присутствуют в Assets.

ℹ️ Непосредственно сам HTML код я не буду сюда выкладыввать, так как особого смысла в этом нет. Весь код доступен в репозитории.

1.3 Написание стилей

1.3.1 Подключение кастомных шрифтов

В качестве основного шрифта дизайнер использовал Rubik из Google Fonts. Через конфигуратор я выставил значения жирности 400, 400i, 500, 500i и добавил Кирилицу:

<link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i&amp;subset=cyrillic" rel="stylesheet">

ℹ️ Данный подход подключения шрифта не является оптимизированным, но, пока что, нет задачи оптимизировать загрузку шрифтов. Потому будем его подключать "как есть".

Далее следует указать использоавние данного шрифта в проекте. Для этого в файле конфигуратора (assets/scss/config/variables.scss) добавил следующие строки:

// Fonts
$theme-font-family-base:			'Rubik' !default;

А теперь надо применить эту настройку в Bootstrap. Для этого откроем файл переменных Bootstrap (assets/scss/vendor/bootstrap/_variables.scss) и добавим следующее:

// Fonts
$font-family-base:            $theme-font-family-base, $font-family-sans-serif;

Пересобираем стили и смотрим удачное применение кастомного шрифта в проекте.

1.3.2 Типография

Есть ряд элементов которые имеют стандартные стили во всём проекте. Но, так как нами изначально был подключен Bootstrap то сейчас стилизация этих элементов не соответствует макету. Это поправимое дело и его легко исправить.

Для начала внесём изменения для заголовов H1-H6, добавив соответствующие значения перенменных для них в файл "bootstrap/_variables.scss". Выглядит это так:

$h1-font-size:                $font-size-base * 3.5;
$h2-font-size:                $font-size-base * 1.75;
$h3-font-size:                $font-size-base * 1.625;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.125;
$h6-font-size:                $font-size-base;

Но, мы так же обратим внимание на то что каждый загловок, согласно макета, имеет свой "line-height". А H4 — "font-weight: 400;". Что бы внести эти изменения в проект мы создим файл "bootstrap/_type.scss" и внесём изменения:

Скрытый текст

//
// Headings
//

h1,
.h1 {
	line-height: 1.14;
}

h2,
.h2 {
	line-height: 1.29;
}

h3,
.h3 {
	font-weight: 400;
	line-height: 1.38;
}

h4,
.h4 {
	line-height: 1.17;
}

h5,
.h5 {
	line-height: 1.56;
}

h6,
.h6 {
	line-height: 1.5;
}

 

А так же импортируем эти стили в файле "bootstrap/bootstrap.scss" следующими строками в самом конце файла:

// Custom Updates
//
@import "type";

1.3.3 Цвета

Цвета — это не отъемлемая часть дизайна, которая всегда присутвует в вёрстке. Их множество может быть, условно, безконечным.
Под разные проекты конфигурировать палитру цветом предстоит индивидуально, так как задачи разные. У Вас может быть как не большая конфигурация цветов, из 10-15 штук, так и более сложный варинат — полноценная политра для мультитем, со своим индивидуальным набором цветов.

В рамках данного обучения нет задачи создавать гибкую настройку по цветам, так как не предполагается их часто и\или кардинально менять.

Палитру цветов для всего проекта мы опишем в файле "assets/scss/config/variables.scss" в разделе "// Colors". Цвета, для начала, возьмём из "Assets/Assets.png". Выглядеть это будет приблизительно вот так:

Скрытый текст

// Colors
$color-primary: 					#00C9C9 !default;
$color-secondary: 					#32343d !default;

$color-black:						#000 !default;
$color-orange:						#F3AE00 !default;
$color-pink-red:					#FF5E5B !default;
$color-green:						#66BB6A !default;
$color-blue:						#39579B !default;

$color-grey:						#7E858D !default;
$color-grey2:						#7C7C7C !default;
$color-grey3:						#B1B1B1 !default;
$color-grey4:						#D4D4D4 !default;
$color-grey5:						#F7F9FA !default;
$color-grey-dark:					#33343D !default;

$color-gradient-start:				$color-primary !default;
$color-gradient-end:				#00B5D5 !default;

$color-btn-primary-start:			$color-gradient-start !default;
$color-btn-primary-end:				$color-gradient-end !default;
$color-btn-primary_hover:			#00a6c4 !default;

$color-turquoise-blue:				#00c9c9 !default;
$color-turquoise-blue-two:			#00b5d5 !default;
$color-charcoal-grey:				#32343d !default;
$color-steel-grey:					#7e858d !default;
$color-white:						#fff !default;

 

ℹ️ Несколько раз я пытался как-то каталогизировать  по смыслу цветовую палитру, но универсального варианта найти мне не удалось. В тех или иных случаях целесообразнее тот или иной вариант. Однажды я разрабатывал проэкт, который предполагал наличие разных тем со своей палитрой. Конфиг цветов был следующим:

Скрытый текст

// Global Colors
$theme-color-1:			#292929 !default;
$theme-color-2:			#8a0913 !default;
$theme-color-3:			#e4dfcc !default;
$theme-color-4:			#fafafa !default;
$theme-color-5:			#eee !default;
$theme-color-6:			#959494 !default;
$theme-color-7:			$white !default;
$theme-color-8:			#f5f5f5 !default;
$theme-color-9:			#a9222d !default;
$theme-color-10:		$theme-success !default;
$theme-color-11:		#8c8c8c !default;
$theme-color-12:		#d8d8d8 !default;
$theme-color-13:		#191919 !default;
$theme-color-14:		#b01934 !default;
$theme-color-15:		#9c9991 !default;
$theme-color-16:		#ededed !default;
$theme-color-17:		#bf5a44 !default;
$theme-color-18:		#faf9f3 !default;
$theme-color-19:		#e2e2e2 !default;
$theme-color-20:		#d8d5c8 !default;
$theme-color-21:		#8c8b8b !default;
$theme-color-22:		#f9f7f0 !default;
$theme-color-23:		#262624 !default;
$theme-color-24:		#ddf4ca !default;
$theme-color-25:		$theme-primary !default;

...

Это не лучший вариант, который я создавал, так как я не приветствую индексированное именование. Но, этот подход явно проще поддерживать при большом количестве цветов (в этом проекте их было около 100)

И так, мы начали создавать палитру цветов в конфигураторе. Теперь на примере Bootstrap давайте применим эту палитру к фреймворку.

Для этого внесём изменения в файл "assets/scss/vendor/bootstrap/_variables.scss"

//
// Color system
//

$primary:			$color-primary;
$secondary:			$color-secondary;
$warning:			$color-warning;

$theme-colors: ();
$theme-colors: map-merge((
	"primary":    $primary,
	"secondary":  $secondary,
	"success":    $success,
	"info":       $info,
	"warning":    $warning,
	"danger":     $danger,
	"light":      $light,
	"dark":       $dark
), $theme-colors);

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

ℹ️ Хочу обратить Ваше внимание на то что я не рекомендую добавлять в файл ("assets/scss/vendor/bootstrap/_variables.scss"), который отвечает за переопределение переменных Bootstrap, кастомные переменные. В этом файле я храню только изменения основных переменных. А вот в основном конфиге все другие переменные, которые используются в проекте.

Таким образом в шаблоне "templates/assets.html" в тот же момент перекрасились кнопки

Скрытый текст

Assets 🔊 2018-06-15 17-22-32.png

Как можно заметить "Primary Button" имеет однотонный фоновый цвет, в отличии от того что в дизайне — градиент. Всё потому что конфигурация фреймворка предполагает использовать общую конфигурацию Bootstrap для всех элементов. Плохого в этом ничего нет, конечно же, но нам, в рамках разработки, это не подходит. Давайте перекрасим кнопку градиентом.

1.3.4 Стилизация элементов Bootstrap (на примере кнопок)

Следующей задачей мы перерисуем кнопки фреймворка и сделаем их такими, какие они представленны в макете.

Создадим файлы:

  • "assets/scss/vendor/bootstrap/_buttons.scss"
  • "assets/scss/vendor/bootstrap/_mixins.scss"
  • "assets/scss/vendor/bootstrap/mixins/_buttons.scss"

Далее импортируем их в "assets/scss/vendor/bootstrap/bootstrap.scss"

// Custom Updates
//
@import "mixins";
@import "type";
@import "buttons";

А так же давайте импортируем файл с миксином в "assets/scss/vendor/bootstrap/_mixins.scss"

@import "mixins/buttons";

ℹ️ Так как часть кнопок имеет border, а часть нет (что в свою очередь влияет на размер кнопки), мы напишем небольшой миксин, который будет выравнивать высоту для обоих случаев.

Давайте добавим в файл "assets/scss/vendor/bootstrap/mixins/_buttons.scss" следующий миксин:

Скрытый текст

@mixin button-no-border() {
	padding-top: ($btn-padding-y + 1);
	padding-bottom: ($btn-padding-y + 1);

	border: 0;

	&.btn-lg {
		padding-top: ($btn-padding-y-lg + 1);
		padding-bottom: ($btn-padding-y-lg + 1);
	}

	&.btn-sm {
		padding-top: ($btn-padding-y-sm + 1);
		padding-bottom: ($btn-padding-y-sm + 1);
	}
}

 

Далее в "_buttons.scss" давайте добавим стили, которые изменят вид кнопок под требуемый нам (так же учтём и ":hover", ":focus" состояния)

Скрытый текст

//
// Base styles
//
.btn {
	@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size-base, $btn-line-height, $btn-border-radius);
}

//
// Alternate buttons
//
.btn-primary {
	@include gradient-x($btn-primary-bg-start, $btn-primary-bg-end);
	@include button-no-border();

	@include hover-focus {
		@include gradient-x($btn-primary-bg-end, $btn-primary-bg-end);
	}
}

.btn-secondary {
	@include button-variant($btn-secondary-bg, $btn-secondary-border);

	@include hover-focus {
		background: $btn-secondary-bg_hover;
	}
}

.btn-info {
	@include button-variant($btn-info-bg, #fff);
	@include button-no-border();

	@include hover-focus {
		background: $btn-info-bg_hover;
	}
}

.btn-warning {
	@include button-no-border();
	box-shadow: $btn-warning-shadow;


	@include hover-focus {
		background: $btn-warning-bg_hover;
	}
}

//
// Button Sizes
//

.btn-lg {
	@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

.btn-sm {
	@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}

 

ℹ️ В данном решении используются не только переменные Bootstrap, но так же и кастомные, которые описанны в файле "assets/scss/config/variables.scss".

Что же касается миксинов, которые используются в данном файле, то они были взяты непосредственно из кодовой базы Bootstrap — "node_modules/bootstrap/scss/mixins/"

Теперь можно посмотреть что у нас в итоге получилось после наших модификаций

Рабочая ветка:

$ git checkout tags/2.0-html-assets-v1.0 -b 2.0-html-assets-v1.0
Скрытый текст

screencapture-localhost-3000-templates-assets-html-2018-06-18-18_24_31.png

Добра и удачи 🙏



0 комментариев


Рекомендованные комментарии

Нет комментариев для отображения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
  • Сейчас в сети   0 пользователей, 0 анонимных, 24 гостя (Полный список)

    Нет пользователей в сети в данный момент.