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

1.5 Организия ресурсов проекта и подключение Bootstrap. Руководство верстальщика

klierik

321 просмотр

1.1 Конфигурирование темы проекта

Ветка конфигуратора:

$ git checkout 1.5-theme-config

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

1.2 Организация структуры

Ранее мы уже обсуждали организацию структуры проекта, но вскольз. Давайте размерём как организовать и подключить стили и скрипты.

1.2.1 Структура стилей

Рассмотрим структуру директории стилей:

./assets/
    ├── _mixin.scss
    ├── config/				- файлы конфигурации проекта
    │   └── variables.scss		- пременные конфигурации
    ├── styles.scss			- основной файл стилей, который импортирует стили проекта
    └── vendor/				- директория сторонних ресурсов
        ├── bootstrap/
        │   ├── _variables.scss		- файл с изменёнными значениями переменных
        │   └── bootstrap.scss		- основной файл стилей Bootstrap
        └── vendor.scss			- файл, который импортирует сторонние ресурсы

Логика предложенной структуры такова (styles.scss):

  1. в начале мы импортируем переменные из конфига: "config/variabless.scss"
  2. далее импортируются все сторонние ресурсы (такие как Bootstrap)
  3. потом импортируются все стили проекта

ℹ️ Стили проекта подключаются последними для того, что бы можно было пользоватся ресурсами сторонних ресурсов. На пример — использовать миксины Bootstrap grid.

Для того что бы к Bootstrap так же применять настройки конфигуратора, их следует использовать в файле "vendor/bootstrap/_vartiabless.scss". Что бы это сделать в файл "vendor/bootstrap/bootstrap.scss", в котором поочерёдно импортируются все модули фреймворка, в первых строках добавлена запись:

@import "variables"; // custom variables update

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

Наглядно эта схема выглядит так:

Theme SCSS hierarchy diagram.png

1.2.2 Структура скриптов

Директория со скриптами выглядит так:

assets/
└── js/				- скрипты проекта
    └── vendor/			- сторонние скрипты
        └── slick-slider/	- slick slider (пример)

В директорию "js/" мы складываем наши самописные скрипты, которые испольщзуются в проекте. В случае если скриптов много то, как правило, они помещаются в иерархию директорий по смыслу. В нашем проекте скриптов будет не много, потому мы будем складывать их просто в "js/"

В директорию "vendor/" складываются скрипты стороних разработчиков. На пример slick slider или noUIslider.

Так же не стоит забывать что скрипты могут быть подключены из предварительно установленных NPM пакетов, из директории "node_modules/module-name/".

1.3 Подключение модулей Bootstrap

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

1.3.1 Подключение стилей Bootstrap

Стили модулей подключаются в файле "assets/scss/vendor/bootstrap/bootstrap.scss". По умолчанию я, как правило, отключаю все модули, за исключением основных (reboot, type, grid, прочее). По мере вёрстки проекта я подключаю те, в которых нуждается проект.

Вот пример файла в котором частично подключены только требуемые модули:

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

@import "../../../../node_modules/bootstrap/scss/functions";
@import "../../../../node_modules/bootstrap/scss/variables";

@import "variables"; // custom variables update

@import "../../../../node_modules/bootstrap/scss/mixins";
@import "../../../../node_modules/bootstrap/scss/root";
@import "../../../../node_modules/bootstrap/scss/reboot";
@import "../../../../node_modules/bootstrap/scss/type";
@import "../../../../node_modules/bootstrap/scss/images";
@import "../../../../node_modules/bootstrap/scss/code";
@import "../../../../node_modules/bootstrap/scss/grid";
@import "../../../../node_modules/bootstrap/scss/tables";
@import "../../../../node_modules/bootstrap/scss/forms";
@import "../../../../node_modules/bootstrap/scss/buttons";
@import "../../../../node_modules/bootstrap/scss/transitions";
@import "../../../../node_modules/bootstrap/scss/dropdown";
@import "../../../../node_modules/bootstrap/scss/button-group";
@import "../../../../node_modules/bootstrap/scss/input-group";
@import "../../../../node_modules/bootstrap/scss/custom-forms";
@import "../../../../node_modules/bootstrap/scss/nav";
@import "../../../../node_modules/bootstrap/scss/navbar";
@import "../../../../node_modules/bootstrap/scss/card";
@import "../../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../../node_modules/bootstrap/scss/pagination";
//@import "../../../../node_modules/bootstrap/scss/badge";
//@import "../../../../node_modules/bootstrap/scss/jumbotron";
@import "../../../../node_modules/bootstrap/scss/alert";
//@import "../../../../node_modules/bootstrap/scss/progress";
//@import "../../../../node_modules/bootstrap/scss/media";
//@import "../../../../node_modules/bootstrap/scss/list-group";
@import "../../../../node_modules/bootstrap/scss/close";
@import "../../../../node_modules/bootstrap/scss/modal";
@import "../../../../node_modules/bootstrap/scss/tooltip";
@import "../../../../node_modules/bootstrap/scss/popover";
@import "../../../../node_modules/bootstrap/scss/carousel";
@import "../../../../node_modules/bootstrap/scss/utilities";
//@import "../../../../node_modules/bootstrap/scss/print";

 

1.3.2 Подключение скриптов Bootstrap

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

Для этого следует открыть файл "gulp/config.js" и найти запись "config.scripts". Изначально все модули так же отключены для импорта, и по мере необходимости они подключаются в проект. Изначально конфигурация выглядит так:

//
// scripts configuration
config.scripts = {
	files:      [
		config.path.sourceJS + '**/*.js'

		// , cofig.path.modulesDir + 'bootstrap/js/src/alert.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/button.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/carousel.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/collapse.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/dropdown.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/modal.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/popover.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/scrollspy.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/tab.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/tooltip.js'
		// , cofig.path.modulesDir + 'bootstrap/js/src/util.js'
	],
	concatFile: 'scripts.js'
};

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



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


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

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

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

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

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

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

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

Войти

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

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

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

  • Пишут сейчас

    • Есть несколько вариантов которые позволяют развиваться профессионально: Ask friend for help. Опросить друзей знакомых на предмет предлагаемых услуг, заявить о себе. Выполнить несколько простых проектов для опыта/портфолио. Тем самым продвигать себя в качестве специалиста (сарафанное радио) Freelance. Вход сложный. Зато на мелочах можно поднять опыт за символическую стоимость. Потом развивать свой аккаунт, "обрастать" клиентами и поднимать уровень квалификации. Важно: почитайте пару гайдов как получить заказ новичку, как оформить профиль и прочие рекомендации. Сайты по теме: https://freelansim.ru https://www.fl.ru https://www.upwork.com — я бы выбрал этот Remote. Full-time. Ещё один хороший вариант найти работу — утроится в компанию работать удалённо. Без территориально ограничения. Компания может быть из СНГ, с юр. лицом. Заключаете договор и сотрудничаете на ставку. Part-time. Тоже самое что и предыдущий пункт но формат сотрудничества на правах почасовой работы. Office. Работа в офисе на позции Junior с перспективой роста. Хорошо подойдут галеры по типу ЕПАМ, Ciklum, LuxSoft, и тд. Денег мало (в начале), но компенсируется опытом. За 9-12 месяцев можете вырасти в Middle. Дальше плыть будет легче. Для поиска работы для Remote и Office вариантов можно использовать стандартные инструменты, на пример: djinni.co или linkedin.com. Рекомендации к заполнению профилю/CV Опишите всё что можете предложить заказчику. Расскажите о своих скилах, что непосредственно Вы делали выполняя работу над тем или иным проектом. Расскажите о своём опыте, даже если он не значительный. Если опыта совсем мало, инвестируйте месяц-два и выполните несколько простых задач, которые Вы сможете показать заказчику. И профиль и CV должно быть на английском языке, в первую очередь, и лишь копия русскоязычная (у меня такой нет, так как рынок предполагает знание английского языка с уровня pre-intermediate)
    • Сидеть дома и развиваться до уровня Senior годами без реальной работы?! 
    • Факт есть факт — специалистов как было мало так и осталось. Можно выбирать любую интересующую себя нишу и развиваться в ней до уровня Senior и иметь на себя спрос в последствии.
  • Лучшие авторы

  • Текущие цели пожертвований