CSS Framework - 

библиотека готовых инструментов и компонентов (HTML/CSS/Javascript) для построения web-сайта или приложения

Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и др. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки - фреймворками. Все фреймворки имеют файловую структура, принципы постороения и внутреннюю организации кода.

• grid framework
• fixed/responsive
• полный набор компонентов + js или только css-компоненты
• различные препроцессоры

Какие бывают CSS Frameworks ?

CSS Frameworks - собрание best practice и унификация стандартов, часто выступает как стайлгайд в какой-либо компании (Starbucks, AirBnb, GitHub, lonely planet, Salesforce, Twitter)

http://styleguides.io/

Foundation

Bootstrap

Kube

Semantic UI

Skeleton

Primer

Blueprint

YAML

Metro UI CSS

EPAM UI

inuitcss

Susy

Topcoat

Wee

Singularity

Pure

UIKit

Materialize

Сокращают время разработки  — готовые компоненты и CSS-классы.

Responsive — практически все фреймворки имеют гибкую сетку, позволяющую создать responsive сайт для различных устройств без дополнительной HTML-разметки и CSS.

Единый стиль — все компоненты имеют единый дизайн, цветовую схему (тему) и поддерживают единый стиль приложения.

Совместимость с браузерами — поддерживают все современные мобильные и десктопные браузеры

Open Source — бесплатные, окрытые исходники

Зачем используют фреймворки ?

 Сравнение CSS Frameworks

• Responsive CSS Framework Comparison https://www.vermilion.com/responsive-comparison/

• Compare Frontend CSS frameworks http://usablica.github.io/front-end-frameworks/compare.html

• Styleguide & Boilerplate Patterns https://epa.ms/115VRk

Какой выбрать?

• количество компонентов
• наличие и полнота документации
• история непрерывного развития
• является ли проект активно развиваемым в данный момент

• наличие большого сообщества
• поддержка современных браузеров и мобильных устройств
• наличие единого стиля и шаблонов
• адаптивность

критерии выбора фреймворка

Bootstrap

• Первый релиз состоялся в августе 2011 года и назывался фреймворк Twitter Bootstrap
• Это открытый продукт, который разработали Mark Otto и Jacob Thornton.
• Целью разработки была стандартизация фронтенд-инструментов среди разработчиков компании Twitter
• Bootstrap не был адптивным, исходники только Less
• Сейчас это один из самых популярных фреймворков с огромных сообществом и поддержкой

Мифы о Bootstrap

• наведет порядок в вашем CSS-коде

• разработка быстрее и дешевле

• легче поддерживать

• дополнительная функциональности из коробки

+

1. Быстрая разработка и прототипирование, CRUD-приложения, админ-панели
2. Адаптивный
3. Много сторонних кастомизаторов и темизаторов
4. Активная разработка фреймворка (4 версия)
5. Есть версия с AngularJS 

-

1. Часто ругают за однотипные сайты

2. Что-то действительно уникальное сложно создать

3. Не всегда требуются все стили и компоненты, например только сетка или какой-то компонент - кастомная сборка

4. Дизайн должен разработан под фреймворк

Bootstrap 4 

• сетка основана на rem-единицах, XL ≥1200px
• опциональная поддержка flexbox:          $enable-flex: true
• полный переход на Sass
• улучшены @media запросы, конфигурируются в Sass
• новый компонент Card (замена panels, wells)
• введение Sass-переменных для продвинутой кастомизации
• плагины переписаны на Javascript ES6
• много "косметических" правок

http://bootstrap4.guide/

Bootstrap features

• Responsive
• Mobile First
• Support: iOS, Android, Desktop IE8+
• Sass/Less версия
• normalize.css
• * {box-sizing: border-box}
• JS-плагины
• Полностью кастомизируемый

Примеры реальных сайтов

• http://www.viber.com/ Viber
• https://mapsconnect.apple.com/ даже Apple использует Bootstrap
• http://www.vogue.com/ сайт журнала Vogue
• https://www.lyft.com/ сервис такси
• http://expo.getbootstrap.com/ 
• http://wbpreview.com/previews/WB0F35928/index.html
• http://templates.mycookroom.ru/Aurora/Site/Parallax/
• нужно больше примеров ? https://wrapbootstrap.com/

Установка и подключение Bootstrap

• скачать на сайте https://getbootstrap.com и подключить скомпилированную и минифицированную версию
• подключить версию фреймворка из cdn
• установка через Bower/npm
• собрать файлы из исходников Less/Sass (нужен Grunt.js/Gulp.js)
• создать новый проект в WebStorm :)

    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map  
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   └── bootstrap-theme.min.css.map
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js (необходим jQuery)
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map  
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   └── bootstrap-theme.min.css.map
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js (необходим jQuery)
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">    
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Что получаем "из коробки"

• Типографика
• Иконочный шрифт
• Helper CSS-классы
• Кнопки
• Формы, текстовые поля
• Контейнеры container/container-fluid
• Сетка + responsive CSS-классы для сетки

Типографика

Body

По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1.428

Цвет и фон

Для веб-страницы устанавливается белый цвет фона, набор шрифтов Helvetica Neue, Helvetica, Arial и цвет текста #333.

Заголовки

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

Трансформация текста

Выравнивание текста

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<p class="text-nowrap">No wrap text.</p>

Иконочный шрифт

Glyphicons

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Helper CSS-классы

<div class="pull-left">...</div>

<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

HTML

CSS/Less

<!-- Usage as a class -->
<div class="clearfix">...</div>

HTML

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

CSS/Less

Кнопки

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Формы и текстовые поля

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Нужно запомнить HTML-структуру форм: какие теги используются, какая вложенность и CSS-классы.

Форма, созданная с помощью Bootstrap

Контейнеры container/container-fluid

Класс container создаёт центрированный макет фиксированной ширины - обёртку для всего контента. Ширина зависит от размера устройства: для мониторов максимальная ширина составляет 1170px + 30px паддинги, для смартфонов макет будет занимать всю доступную ширину. Если вам не требуется ограничивать ширину макета, то вместо класса container следует использовать container-fluid - сайт займет всю доступную ширину.

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

http://getbootstrap.com/examples/jumbotron/

Пример использования container

Сетка Bootstrap

http://getbootstrap.com/css/#grid-example-basic

Bootstrap имеет продуманную и гибкую систему модульных сеток, в основе которой лежит 12-колоночный макет.

Чтобы создать макет из трёх колонок используем <div> с классом container, внутри которого будут располагаться наши колонки. Сами колонки находятся внутри <div> с классом row и содержат классы вида "col-xs-N", где N — число колонок от 1 до 12.

Компоненты

Все компоненты спроектированы с учётом адаптивности  и чаще всего требуют определенной структуры HTML и CSS-классов:   

• Dropdown - выпадающий список

• Button/Input groups - группировка кнопок и полей в панели

• Navbars - навигационная панель

• Thumbnails - предпросмотр изображений

• Alerts - информационные блоки

• Progress bars

• Media object

• List group - стилизированные списки

• Panels - составная часть аккордеона

Навигационная панель

http://getbootstrap.com/examples/navbar/