Тебе не нужен Bootstrap! Или нужен? Или все же не нужен?

Bootstrap - это...

• Библиотека компонентов
• CSS фреймворк
• UI библиотека

Почему не нужен Bootstrap?

.btn {
  /* ... */
  cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
  @include button-size($btn-padding-y, $btn-padding-x,
     $btn-font-size, $btn-border-radius);
}

jQuery

Использовать Bootstrap в 2019?

Почему Bootstrap

• Просто, быстро и удобно копипастить
• Большой набор базовых компонентов
• Выглядит презентабельно из коробки
• Только HTML, CSS и JavaScript (jQuery)

Версии для JS фреймворков...

• React Bootstrap
• ng-bootstrap
• BootstrapVue
• ...

...полностью переписаны!

Что хорошо в Bootstrap?

Типографика

Семантика

a11y

Верстай
доступно

Макетные сетки

Макетные сетки
=
визуальный порядок

Расскажи дизайнеру о сетках

RWD и MF

*Responsive Web Design и Mobile First

Mobile First и Desktop First

/* Mobile First */
@media (min-width: ...) { ... }

/* Desktop First */
@media (max-width: ...) { ... }

Начни делать Mobile First!

Кроссбраузерность

Тестируй код кроссбраузерно

Хочу ___ от Bootstrap. Как правильно?

/* Required */
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

/* Optional */
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/grid";
...

Исходники Bootstrap как вдохновение

А если превратить любой проект в UI библиотеку?

Плохой дизайн сложно превратить в хороший CSS фреймворк

Без UI Kit...

...всё будет ОЧЕНЬ ПЛОХО

Проект состоит из...

• Настроек проекта
• Глобальных стилей, переменных
• Макетных сеток и раскладки
• Типографики и стилей контента
• Компонентов

Неструктурированный код сложно превратить в хороший CSS фреймворк

Почему Custom Properties?

• Существуют в runtime и доступны для изменения
• Ограничены областью видимости DOM элемента
• Наследуются вложенными элементами от родителя
• Возможность делать fallback
• Отличная поддержка в 2019 году

Responsive Images

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

srcset

<img srcset="img-320w.jpg 320w,
            img-480w.jpg 480w,
            img-800w.jpg 800w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           800px"
    src="img-800w.jpg" alt="...">

А если на проект приходит новый разработчик?

davidhund/styleguide-generators

postcss([
  ...,
  styleGuide({
      project: 'Project name',
      dest: 'styleguide/index.html',
      showCode: false,
      themePath: '../'
  }),
  ...
])

/* @styleguide
   @title Button
   Use the button classes on ...
   <button class="button button--large">Large Button</button>
     <button class="button button--large">Large Button</button>
*/
.button {
   /* ... */
}

Вуаля!

• CSS библиотека под конкретный проект
• Со встроенной документацией
• С конкретными примерами компонентов конкретного проекта
• Сторонние библиотеки не запрещены

Когда брать чужое?

• Разрабатывается быстрый прототип
• Дизайн «заточен» под выбранную UI библиотеку
• Нет дизайна
• Вы не умеете верстать
• Просто лень

Подводя итог

• Хватит ненавидеть библиотеки «потому что модно»
• Пользуйся инструментами осознанно
• Знай возможности современных CSS, HTML и JS
• Не переставай учиться

bit.ly/lvivcss-ymnnb
Александра Шинкевич (@neesoglasnaja)