• Тем временем в Блогах

    • Автор: klierik в Руководство верстальщика
         0
      ℹ️ Статья не завершена, дополняется по мере реализации проекта.
      0. Предисловие
      И так, когда у нас готова основа проекта (сборщик и организована структура) можно приступать к вёрстке.
      ℹ️ Вообще, как правило, и сборщик и структура проекта организовываются во время его разработки. Особенно это касается тех ситуаций, когда разработчику впервые ставят задачу на реализацию большого кол-ва вёрстки (от 100 и более часов на вёрстку макетов). Тогда и появляется надобность в использовании инструментом по сборке проекта. А количество стилей настолько велико, что хранить в одном файле крайне затруднительно.
      В статье расказывается как структурировать эти данные таким образом, что бы и разработчик, и другие участники команды, могли с лёгкостью читать, поддерживать и развивать изначально написанный "костяк". Спустя несколько лет грамотно организованная структура под конкретную задачу сильно упрощает поддержку кода и минимизирет затраты на рефакторинг кода (тем самым понижает стоимость разработки).
      Рабочая ветка:
      $ git checkout 2.0-html-assets Макет: Assets/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" и внесём изменения:
      А так же импортируем эти стили в файле "bootstrap/bootstrap.scss" следующими строками в самом конце файла:
      // Custom Updates // @import "type"; 1.3.3 Цвета
      Цвета — это не отъемлемая часть дизайна, которая всегда присутвует в вёрстке. Их множество может быть, условно, безконечным.
      Под разные проекты конфигурировать палитру цветом предстоит индивидуально, так как задачи разные. У Вас может быть как не большая конфигурация цветов, из 10-15 штук, так и более сложный варинат — полноценная политра для мультитем, со своим индивидуальным набором цветов.
      В рамках данного обучения нет задачи создавать гибкую настройку по цветам, так как не предполагается их часто и\или кардинально менять.
      Палитру цветов для всего проекта мы опишем в файле "assets/scss/config/variables.scss" в разделе "// Colors". Цвета, для начала, возьмём из "Assets/Assets.png". Выглядеть это будет приблизительно вот так:
      ℹ️ Несколько раз я пытался как-то каталогизировать  по смыслу цветовую палитру, но универсального варианта найти мне не удалось. В тех или иных случаях целесообразнее тот или иной вариант. Однажды я разрабатывал проэкт, который предполагал наличие разных тем со своей палитрой. Конфиг цветов был следующим:
      И так, мы начали создавать палитру цветов в конфигураторе. Теперь на примере 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" в тот же момент перекрасились кнопки
      Как можно заметить "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" следующий миксин:
      Далее в "_buttons.scss" давайте добавим стили, которые изменят вид кнопок под требуемый нам (так же учтём и ":hover", ":focus" состояния)
      ℹ️ В данном решении используются не только переменные 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 Добра и удачи 🙏
    • Автор: klierik в Руководство верстальщика
         0
      Честно говоря я несколько недель думал стоит ли вообще писать эту статью. Сама тема является лютым холиваром и, по сути, каждый опытный разработчик давно для себя сформировал определённый стандарт форматирования стилей, который, на его взгляд, удобочитаем и лёгок в поддержке.
      Я не буду Вас переубеждать.
      Более того, если у Вас есть стандарт форматирования стилей, на котором написан не один проект возрастом от 3-5 лет и старше, если код не требовал рефакторинга из-за не грамотной организации стилей, если этот стандарт легко воспринимается и используется новыми сотрудниками — это очень классно. Это значит что Вы прошли богатый путь проб и ошибок и выявили для себя золотую середину. Я искренне за Вас рад!
      Но, так как кроме тех, кто умеет создавать внутренний стандарт в компании, есть разработчики, которые этого делат не умеют. Причина этому, скорее всего, — недостаток опыта.
      Ниже изложенная мною статья это рекомендации, а не готовое решение которое подходит в 100% случаев. Я никоим образом не хочу Вам навязать свои стандарты, а лишь поделиться тем опытом, который мне достался за более чеим 15 летний опыт в веб-разработке. Я буду искренне Вам благодарен если Вы ознакомитесь с данной статьёй и поделитесь своим виденьем на обсуждаемую тему.
      Вот краткий пример, который наглядно описывает обычный блок в проекте:
      .block-name { // Стили текущего блока // Стили всевдо-элементов &:before {} &:after {} // Стили псевдо-классов &:first-child {} &:last-child {} &:hover {} // @media стили текущего блока // Стили составных элементов &__title {} // Стили дочерних элементов .menu-list { &__item {} .link {} } // Стили модификаторов &_shown {} // @media стили иерархии дочерних элементов } Но что бы этот пример не был "сухим", довайте посмотрим на реальный код:
      .assets { &__title { font-size: 56px; font-weight: 500; padding: 56px 0 68px; line-height: 1.14; background: #00d6d9; color: #ffffff; & > .assets__section { padding-top: 0; padding-bottom: 0; } } &__sub-title { font-size: 28px; font-weight: 500; padding: 45px 0 9px; line-height: 1.29; background: #f9fafc; & > .assets__section { padding-top: 0; padding-bottom: 0; } } &__section { @if $enable-grid-classes { @include make-container(); @include make-container-max-widths(); } padding-top: 1rem; padding-bottom: 1rem; } &__colors { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none; .color { font-size: 13px; margin-bottom: 20px; width: 23%; border: solid 1px #e5e9ed; box-shadow: 3px 3px 5px 0 rgba(42, 43, 51, 0.1); &__preview { height: 90px; } &__name { font-weight: 600; padding: 14px 18px 6px; } &__hex { padding: 0 18px 14px; } &_gradient { width: 100%; } } } } Предполагаю с этим наглядным примером многое станет понятнее.
      Что же касается форматирования свойств, то я разделил их на 4 группы (каждая разделена пустой строкой для повышения читабельности)
      Свойства шрифтов Блочные свойства Текстовые свойства Стилизирующие и остальные свойства Порядок свойств, как правило, по алфавиту.
      ℹ️ Настройки форматирования стилей можно изменить. Про это рассказано в статье  1.4 Создание сборщика проекта. Пособие для верстальщика в разделе 1.4.6 Настройки форматирования стилей CssComb
       
      Ниже представлен более сложный пример, из реальной ситуации:
      ℹ️ Любите свой код, относитесь к нему надлежащим с уважением. Думайте о том, что его будут читать другие. Постарайтесь создать наиболее простые и комфортные условия для работы с Вашим кодом для любого разработчика в команде. Используйте в именах классов смысловую нагрузку — это сделает код читабельным без комментариев. Не создавайте глубокие цепочки иерархии класов, вместо этого продумывается простые структуры на столько на сколько это будет возможно.
      Добра и удачи 🙏
    • Автор: klierik в Руководство верстальщика
         0
      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):
      в начале мы импортируем переменные из конфига: "config/variabless.scss" далее импортируются все сторонние ресурсы (такие как Bootstrap) потом импортируются все стили проекта ℹ️ Стили проекта подключаются последними для того, что бы можно было пользоватся ресурсами сторонних ресурсов. На пример — использовать миксины Bootstrap grid.
      Для того что бы к Bootstrap так же применять настройки конфигуратора, их следует использовать в файле "vendor/bootstrap/_vartiabless.scss". Что бы это сделать в файл "vendor/bootstrap/bootstrap.scss", в котором поочерёдно импортируются все модули фреймворка, в первых строках добавлена запись:
      @import "variables"; // custom variables update которая будет импортировать обновлённые настройки Bootstrap. В результате чего, в конечном, итоге мы импортируем в проект Bootstrap и вносим в его конфигурацию значения из конфигуратора проекта. Это позволит управлять свойствами проекта из одного файла.
      Наглядно эта схема выглядит так:

      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, прочее). По мере вёрстки проекта я подключаю те, в которых нуждается проект.
      Вот пример файла в котором частично подключены только требуемые модули:
      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' }; Добра и удачи 🙏
  • Темы

Категории и разделы

  1. Основной форум

    1. Для начинающих

      Типовые вопросы тех, кто только изучает веб-технологии.
      Культура поведения в разделе

      82082
      сообщения
    2. Проблемы верстки

      Обсуждение проблем верстки. CSS, HTML, XML, XSLT, шаблонизаторы, и прочее.

      110790
      сообщений
    3. Обсуждение работ

      Выкладываем сюда сайты для похвалы и критики.
      Правила раздела

      29851
      сообщение
    4. Работа форума

      Предложения и пожелания по работе форума

      1646
      сообщений
    5. Флейм

      Обсуждаем любые темы, не относящиеся к сайтостроению.

      41389
      сообщений
  2. Полезное

    1. Библиотека полезных приемов и решений

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

      3912
      сообщений
    2. Ресурсы

      Сайты, книги, полезные программы.

      3580
      сообщений
  3. Веб-программирование

    1. 29624
      сообщения
    2. Серверные технологии

      PHP, C++, Python, JAVA и другие серверные языки программирования, веб-серверы, программное обеспечение.

      20367
      сообщений
    3. СУБД

      Решение вопросов, связанных с различными СУБД.

      2241
      сообщение
    4. CMS

      Решение вопросов, связанных с различными Системами Управления Контентом.

      4834
      сообщения
  4. Работа: спрос, предложение, вакансии

    1. Фриланс

      Актуальные заказы на выполнение работ по веб-разработке

      87
      сообщений
    2. Коммерческие услуги

      Веб-студии, дизайн, хостинг, SEO-продвижение и т.д.

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

      • Сообщений нет
    3. Ищу работу

      Соискателям — поиск работы

      713
      сообщений
    4. Предлагаю работу

      Работодателям — предложения о работе

      1413
      сообщений
  • Статистика форума

    44899
    Всего тем
    342087
    Всего сообщений
  • Статистика пользователей

    45810
    Всего пользователей
    3128
    Рекорд онлайна
    prof88
    Новый пользователь
    prof88
    Регистрация
  • Дни рождения сегодня

    1. Akaciya ,
    2. AllohaSes (37 лет),
    3. cirtygizdazit (36 лет),
    4. DeepSteaRkSen (30 лет),
    5. DicCaumma (32 года)
  • Сейчас в сети   0 пользователей, 0 анонимных, 27 гостей (Полный список)

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