Методологии

БЭМ

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

читать

Блок - функционально независимый компонент страницы, который может быть повторно использован, представлен атрибутом class. Инкапсулирует в себе

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button)
не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
можно вкладывать друг в друга

Элемент - Составная часть блока, которая не может использоваться в отрыве от него

Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
всегда часть блока, а не другого элемента. В названии элементов нельзя прописывать block__elem1__elem2
всегда часть блока и не должен использоваться отдельно от него
необязательный компонент блока

Модификатор - Cущность, определяющая внешний вид, состояние или поведение блока либо элемента

Название модификатора характеризует внешний вид («размер»: size_s), состояние («отключен»: disabled, «фокусированный»: focused) и поведение («как взаимодействует с пользователем?» — «направление»: directions_left-top).
Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_)

Микс - способ использования разных БЭМ-сущностей на одном DOM-узле.

Миксы позволяют:

совмещать поведение и стили нескольких БЭМ-сущностей без дублирования кода;
создавать семантически новые компоненты интерфейса на основе имеющихся БЭМ-сущностей.

<!-- Блок `header` -->
<div class="header">
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div class="search-form header__search-form"></div>
</div>

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

Разделение кода на отдельные части — логика работы каждого блока, его опциональных элементов и модификаторов описывается в отдельных файлах;

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

облегчить навигацию по проекту;
повторно использовать и переносить компоненты;
работать с уровнями переопределения и использовать сборку.

Принцип единственной ответственности означает, что каждая CSS-реализация должна иметь одну ответственность.
Принцип открытости/закрытости Любой HTML-элемент страницы должен быть открыт для модификации, но закрыт для изменения. Разрабатывать новые CSS-реализации следует так, чтобы не пришлось менять уже существующие.
DRY - БЭМ-сущность должна иметь единственное, однозначное представление в рамках системы.
Композиция вместо наследования новые CSS - реализации собирают из уже существующих, путем их объединения. Это сохраняет код несвязным и гибким.

SMACSS

Scalable and Modular Architecture for CSS, масштабируемая и модульная архитектура для CSS

пять основных категорий:

Основа BASE
Структура LAYOUT
Модуль MODULE
Состояние STATE
Тема THEME

Основа включает в себя стили базовых элементов и охватывает общие значения по умолчанию. Структура затем устанавливает размеры и стили сетки разных элементов, определяет их компоновку. Стили модуля — это более конкретные стили, ориентированные на отдельные части страницы, такие как навигация или её основные особенности. Стили состояния затем используются для дополнения или переопределения других стилей в том случае, если модуль включает альтернативное состояние, к примеру, активную вкладку. Наконец, тема может быть добавлена, когда включены стили, основанные на оформлении или внешнем виде разных модулей.

читать

OOCSS

два принципа :

разделение структуры и оформления;
разделение содержимого и контейнера.

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

Разделение содержания и контейнера включает в себя удаление зависимости у вложенных дочерних элементов от родительского элемента. Заголовок должен выглядеть так же, независимо от его родительского контейнера. Чтобы достичь этого, элементы должны наследовать стили по умолчанию, затем расширены несколькими классами при необходимости.

RWD

Responsive vs Adaptive

Responsive: % + media-queries + %-media отзывчивый макет страницы плюс использование отзывчивых изображений и видео.

основан на "резине". отзывчивая страница не «прыгает» по контрольным точкам, а плавно изменяется между ними.

Adaptive: % + media-queries + %-media + JavaScript + magic

"сначала мобильные" и "прогрессивное улучшение" — это стратегия веб-разработки, основывается на доступности контента и семантике на самом низком уровне, а остальные же уровни, такие как стилизация (CSS) и дополнительные скрипты (JavaScript), — лишь дополнения, которые делают жизнь проще.

Данная стратегия предполагает использование чистого HTML как базиса и дальнейших улучшений и фич за счет использования слоев CSS и JavaScript. Если для какого-то определенного браузера или устройства доступна какая-то новая фича, то ее можно использовать только после проверки на ее доступность, сохраняя обратную совместимость с не поддерживающими устройствами (например, тач-события).

адаптивный веб-дизайн — это стратегия разработки веб-сайтов и веб-приложений

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

What Responsive and Adaptive web design have in common

First, what they have in common. Both responsive and adaptive web design are essentially about creating web designs that are optimized for the size of the screen or the type of device that is used to view them.

The basic concept is that you create a website that works on multiple screen sizes, most commonly to work well on at least three different screen sizes — a small mobile screen, a tablet-sized screen, and a larger desktop computer monitor.

Difference

Responsive designs respond to changes in width of a browser window by fluidly adjusting the placement of elements on a web page to best fit the available space. Thus, as you drag the side of a browser to make it larger or smaller, you’ll see the design change in real time. If you want to see how responsive design works, visit a site that uses responsive design, such as http://foodsense.is/, and if drag the side of the browser window to make it smaller and larger, you’ll see how responsive design works. Visit that site on an iPhone, iPad, or other similar sized device, and you will see the design that is targeted to fit that size device.

Adaptive designs , such as the one American Airlines created at aa.com, use a sophisticated auto-detection script on the web server to identify each device that visits the site and then deliver the best version of the site, based on the size and capabilities of each device. As a result, the American Airlines site doesn’t change if you drag the browser while you view the site. However, if you visit the American site on different mobile devices, you’ll not only see different designs, you may even see different content because with adaptive design you can send completely different versions of your site to each device.

Three Core Techniques

Fluid Foundation ( гибкий макет)
Flexible Content ( гибкий медиа-контент)
Media Queries

examples

What we need to be Flexible?

Grid
Layout
Typography
Images

гибкие макеты —практика построения макета сайта с гибкой сеткой, которая способна динамически уменьшать размер до любой ширины.

Гибкие сетки строятся с использованием относительных единиц длины,

целевая ширина элемента ÷ ширину родительского элемента =относительная ширина

Going from fixed to fluid:

цель ÷ контекст = результат

RWD Grid sistems:

Bootstrap,
Foundation
Sceleton
etc

RWD Layout patterns

Source Order Stacking
Content Choreography
Off Canvas

read

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS Real Layout Modules

CSS Multi-column Layout
CSS Grid Layout
CSS Regions and Exclusions (Shapes)
CSS Flexbox layout

Images

Easy Way
img {
    max-width: 100%;
    }

.pic {
    background-size: cover;
    background-image: 
    image-set(url(...) 1x,
    url(...) 2x;
    }

"CSS4" Way

Easy Way

Указывайте относительные размеры изображения, чтобы оно оставалось в границах контейнера.
Используйте элемент picture, чтобы показывать разные изображения с учетом параметров устройства (эффект art direction).
Используйте атрибут srcset и дескриптор x в элементе img: при наличии нескольких вариантов браузеру будет проще выбрать нужное изображение.

Дескриптор X в атрибуте srcset задает соотношение логических и физических пикселей.

отображение одного и того же изображения на всех устройствах. Чем больше разрешение устройства, тем больше разрешения картинки

+ изменение ширины и высоты в зависимости от области просмотра

Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д.

назначать разные файлы изображений для разных медиазапросов или форматов изображений

Для background

Замените свойство CSS background-image для экранов с высоким разрешением и применением медиазапросов на min-resolution и -webkit-min-device-pixel-ratio.
Для изображений в высоком разрешении используйте атрибут srcset (наряду с изображениями 1x в разметке).

Используйте функцию image-set для изображений с высоким разрешением

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

медиазапросы для назначения изображений с высоким разрешением и эффекта art direction

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Медиа-запросы

Медиа-запросы предоставляют возможность задавать различные стили для отдельных браузеров и поведения устройств, к примеру, ширины экрана или ориентации устройства

Есть несколько разных способов применения медиа-запросов

с помощью правила @media в существующей таблице стилей,
импорта новой таблицы стилей через правило @import
ссылка на отдельную таблицу стилей внутри HTML-документа.

<!-- Отдельный CSS-файл -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

/* Правило @media */
@media all and (max-width: 1024px) {...}

/* Правило @import */
@import url(styles.css) all and (max-width: 1024px) {...}

Существуют три разных логических оператора, доступных для использования в медиа-запросах: and, not и only.

@media all and (min-width: 800px) and (max-width: 1024px) {...}

@media not screen and (color) {...}

@media only screen and (orientation: portrait) {...}

Медиа-функции

height и width высота и ширина области визуализации,
orientation определяет, находится ли устройство в альбомной (landscape) или портретной (portrait) ориентации
pixel-ratio определения устройств высокой чёткости
resolution разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI

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

/* Сперва стили по умолчанию, затем медиа-запросы */
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (   min-resolution: 192dpi) and (min-width: 700px),
only screen and (    min-resolution: 2dppx) and (min-width: 700px) { 
  /* Medium screen, retina, stuff to override above media query */
}

Flexbox

For the parent

display (flex/ inline-flex)
flex-direction( row (default)| row-reverse | column | column-reverse)
flex-wrap(nowrap single-line d| wrap multi-line | wrap-reverse)
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start (default)| flex-end | center | space-between | space-around along the main axis
align-items: flex-start | flex-end | center | baseline | stretch (default): stretch to fill the container (still respect min-width/max-width)
align-content: flex-start | flex-end | center | space-between | space-around | stretch aligns a flex container's lines within when there is extra space in the cross-axis

For the children( flex-items)

order: <integer>
align-self: auto | flex-start | flex-end | center | baseline | stretch default alignment (or the one specified by align-items) to be overridden for individual flex items.
;flex-grow: <number>; /* default 0 */ defines the ability for a flex item to grow if necessary.
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */ defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

For the parent

SVG

SVG - формат векторной графики.

добавление с помощью тега img/ background-image( нельзя изменять при помощи css/ js)
непосредственно в документ ellipse, path + fill ( не кешируются)
<object>

<img src="kiwi.svg" alt="Киви на овале">

.logo {
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

svg xmlns viewbox

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- запасное изображение в CSS -->
</object>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 25c"/>
</svg>

optimizer

почитать

<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: yellow; }
    .secondb { fill: red; }
    ]]>
  </style>
  <path ....>

// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }

Стилизация CSS

внешние для object

внутренние

Спрайты

Собираем один общий svg-файл со множеством symbol (элементы спрайта), имеющих свои id . У тега svg задаём style="display:none" .
Вставляем полученный спрайт в разметку страницы. (Я предпочитаю делать это с помощью javascript и localStorage, об этом ниже.)
В разметке используем ссылки на symbol при помощи use .

<svg xmlns="http://www.w3.org/2000/svg"
style="display:none;">
  
  <symbol id="facebook" viewBox="36 36">
    <title>facebook</title>
      <path d="M18 24L15.3 ..." fill="#FFFFFF"/>
  </symbol>
<symbol id="google" viewBox="36 36">
    <title>google</title>
    <path d="M15.6 ..." fill="#FFFFFF"/>
  </symbol>

<li>
    <a href="#">
        <svg>
            <use xlink:href="#google">
            </use>
        </svg>
    </a>
</li>

Jade

Nesting

ul#books
  li
    a(href="#book-a") Book A
  li
    a(href="#book-b") Book B

ul#books
  li: a(href="#book-a") Book A
  li: a(href="#book-b") Book B

Text

h1 foo
h2= book.name
h3 #{book.name} for #{book.price} €

{"book": {"name": "Hello", 
        "price": 12.99}}

Variables

- var foo = "hello world"
h1= foo

- var foo = book.name + " world"
h1= foo

{"book": {"name": "hello"}}

Escaping

{"name": "Hello <em>World</em>"}

li= name
li!= name

li Say #{name}
li Say !{name}

<li>Say Hello <em>World</em></li>
<li>Say Hello <em>World</em></li>

<li>Hello <em>World</em></li>
<li>Hello <em>World</em></li>

p
  | foo bar
  | hello world

p.
  foo bar
  hello world

Attributes

input(type="text", placeholder="your name")
input(type=type, value='Hello #{name}')

{"type": "text", "name": "Bob"}

// single line comment
//- invisible single line comment

Comments

<!-- single line comment-->

if & unless

- var user = { description: 'foo bar baz' }
#user
  if user.description
    h2.green Description
  else 
    h2.blue Description

unless user.isAnonymous
  p You're logged in as #{user.name}

if !user.isAnonymous
  p You're logged in as #{user.name}

for & each

ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val

- var books = [];
ul
  for book in books
    li= book
  else
    li sorry, no books!

- var n = 0;
ul
  while n < 4
    li= n++

ul
  each val, index in ['zero', 'one', 'two']
    li #{index}:#{val}

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

Case

- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

Mixin

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

mixin link(href, name)
  a(href=href)&attributes(attributes)= name

+link('/foo', 'foo')(class="btn")

<a class="btn" href="/foo">foo</a>

mixin book(name, price)
  li #{name} for #{price} €
  
ul#books
  +book("Book A", 12.99)
  +book("Book B", 5.99)

example

documentation

tutorial

Sass

Variables

$font-stack:    Helvetica, sans-serif
$primary-color: #333

Nesting

.container
  width: 960px
  @media screen and (max-width: 960px)
    width: 100%

Import

 _reset.sass

// base.sass
@import reset

Parent's selector

a
  color: #0087cc
  &:hover
    color: #ff7b29

Comments

/* Обычный комментарий */
// Пропущенный комментарий

$location: chicago
$offset: left

.#{$location}
  #{$offset}: 20px

extends

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green

Operators

article[role="main"]
    width: 40px + 6px
    width: 40px - 6px
    width: 40px * 6
    width: 40px % 6px
    width: (100px / 10)
    width: (100px / 10px)

Mixins

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

width: percentage(2.5) //%
width: round(2.5px) //ближ целое
width: ceil(2.5px) //вверх
width: floor(2.5px) //вниз
width: abs(-2.5px) //модуль

%alert //селектор заполнитель
  border-radius: 10px
  padding: 10px 20px

.alert-error
  @extend %alert
  background: #f2dede
  color: #b94a48

// по умолчанию
@mixin btn($color: #fff, $color-hover: #9799a7)
  color: $color
  &:hover
    color: $color-hover

.btn
  +btn($color-hover: #9799a7)

@mixin box-shadow($shadow...)
  -webkit-box-shadow: $shadow
  -moz-box-shadow: $shadow
  box-shadow: $shadow

Transform

scale(): affects the size of the element. This also applies to the font-size, padding, height, and width of an element, too. It’s also a a shorthand function for the scaleX and scaleYfunctions.
skewX() and skewY(): tilts an element to the left or right, like turning a triangle into a parallelogram. There is no shorthand skew property.
translate(): moves an element sideways or up and down.
rotate(): rotates the element clockwise from its current position.
matrix(): a function that is probably not intended to be written by hand, but combines all transforms into one.
perspective(): doesn’t affect the element itself, but affects the transforms of descendent elements' 3D transforms, allowing them all to have a consistent depth perspective.

read

2D transformations

rotate(angle); поворот элемента от 0 до 360 градусов
scale(value) изменяет визуальный размер элемента
translate(x, y) толкает и тянет элемент в разных направлениях
skew(xAngle, yAngle); для искажения
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

Rotate

Scale

.box-1 {
  transform: rotate(20deg);
}
.box-2 {
  transform: rotate(-55deg);
}

.box-1 {
  transform: scale(.75);
}
.box-2 {
  transform: scale(1.25);
}

transform-origin - изменение точки трансформации ( 0, 100% , 20px 30px

.box-1 
  transform: scaleX(.5)
.box-2 
  transform: scaleY(1.15)
.box-3 
  transform: scale(.5, 1.15)

Scale

.box-1 
  transform: translateX(-10px)
.box-2 
  transform: translateY(25%)
.box-3 
  transform: translate(-10px, 25%)

Translate

.box-1 
  transform: skewX(5deg)
.box-2 
  transform: skewY(-20deg)
.box-3 
  transform: skew(5deg, -20deg);\

Skew

3D transformations

Перспектива для каждого элемента может быть представлена как точка схождения

элементы нуждаются в перспективе, относительно которой происходит трансформация.

Задание перспективы:

использование значения perspective в свойстве transform для отдельных элементов
использование свойства perspective для родительского элемента, внутри которого трансформируются дочерние элементы.

значение - глубина перспективы. Чем выше значение, тем дальше вид перспективы, создавая тем самым перспективу довольно низкой интенсивности и небольшое трёхмерное изменение

transform-origin определяет координаты точки схода преобразования.

У каждого элемента

У родителя

Демонстрация глубины

.box-1 {
  transform: perspective(100px) rotateX(45deg);
}
.box-2 {
  transform: perspective(1000px) rotateX(45deg);
}

Rotate

transform: perspective(200px) rotateX(45deg);

transform: perspective(200px) rotateY(45deg);

transform: perspective(200px) rotateZ(45deg);

transform: perspective(200px) translateZ(-50px);

transform: perspective(200px) translateZ(50px);

Translate

transform: perspective(200px) scaleZ(1.75) rotateX(45deg);

transform: perspective(200px) scaleZ(.25) rotateX(45deg);

Scale

transform-style: preserve-3d;

Свойство transform-style должно быть добавлено к родительскому элементу, выше любых вложенных преобразований. Значение preserve-3d позволяет преобразованным дочерним элементам появляться в их собственной трёхмерной плоскости, в то время как значение flat заставляет преобразованные дочерние элементы лежать в двухмерной плоскости.

Transition & Animation

переход изменение внешнего вида и поведения элемента всякий раз, когда происходит изменение его состояния.

Псевдоклассами :hover, :focus, :active и :target.
изменение класса

transition-property: background, width; //all
transition-duration: 1s, .2s;
transition-timing-function: linear;
transition-delay: 0s, 1s;

какие свойства будут меняться

Длительность перехода

Задержка

  transition: background .2s linear, border-radius 1s ease-in 1s;

.box {
  background: #2db34a;
  border-radius: 6px;
  transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover {
  color: #ff7b29;
  border-radius: 50%;
}

transition-timing-function

linear - одинаковая скорость от начала и до конца
ease - начинается медленно, затем ускоряется и к концу движения опять замедляется(default)
ease-in - медленно начинается, к концу ускоряется.
ease-out - начинается быстро, к концу замедляется
ease-in-out - начинается и заканчивается медленно
cubic-bezier(n,n,n,n) - задаёт функцию движения в виде кривой Безье

Pointer-events: none не действует ховер

Временная функция steps(количество шагов[, start/end]) позволяет разбить анимацию на чёткое количество шагов.

Первый аргумент steps – количество шагов, то есть изменение margin-left разделить на 9 частей, получается примерно по 19px. На то же количество частей делится и временной интервал, то есть по 1s.

start – означает, что при начале анимации нужно сразу применить первое изменение. Это проявляется тем, что при нажатии на цифру она меняется на 1 (первое изменение margin-left) мгновенно, а затем в начале каждой следующей секунды.

transition: margin-left 9s steps(9, start);

CSS3 анимации позволяют анимировать большинство HTML элементов без использования JS

@keyframes устанавливает несколько точек, в которых элемент должен совершать переход.

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

@keyframes example {
    from {
        background-color: red;
    }
    to {
        background-color: yellow;
    }
}

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}

.stage:hover .ball {
    animation-name: example; //применяется к элементу, для которого должна быть задана анимация.
    animation-duration: 5s; // длительность
    animation-timing-function: linear; // функция времени
    animation-delay: 2s; // задержка
    animation-iteration-count: infinite; //число повторений
    animation-direction: alternate; // направление в котором завершается
    animation-play-state: paused/ running /останавливает аниманию
    animation-fill-mode: forwards; //определяет, как элемент должен быть стилизован — до,
     после или до и после запуска анимации
}

div {
    animation: example 5s linear 2s infinite alternate;
}

 animation-direction: normal, reverse, alternate и alternate-reverse
 animation-fill-mode:none, forwards, backwards и both

alternate воспроизведёт анимацию вперёд, а затем назад от 100% до 0%.

alternate-reverse назад, а затем вперёд

forwards сохранит стили, объявленные в последнем указанном ключевом кадре.

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

Triggers

hover pseudo class
class changes
new element

When to animate

Orientation
Functional change
New element
Highlight
Visual feedback
System status

Read

Bootsrap

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

Bootstrap 4

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

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

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

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

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

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

Сетка Bootstrap

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

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

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

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

для колонок разной высоты

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

You can also override offsets from lower grid tiers with .col-*-offset-0

<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">

Типографика

Body

Bootstrap's global default font-size is 14px, with a line-height of 1.428. <P> have 10px margin-bottom

Цвет и фон

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

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

<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>

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

All textual <input>, <textarea>, and <select>elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

<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>

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide. you can hide the labels using the .sr-only class.

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Кнопки

<!-- 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>

Add .btn-lg, .btn-sm, or .btn-xs for additional sizes

Картинки

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive class, use .center-block

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Helper class

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="caret"></span>

Float

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

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="clearfix">...</div>

.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

Методологии

Принцип единственной ответственности означает, что каждая CSS-реализация должна иметь одну ответственность.

SMACSS

RWD

Responsive vs Adaptive

What Responsive and Adaptive web design have in common

Three Core Techniques

What we need to be Flexible?

Images

height и width высота и ширина области визуализации,

orientation определяет, находится ли устройство в альбомной (landscape) или портретной (portrait) ориентации

pixel-ratio определения устройств высокой чёткости

resolution разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI

Flexbox

SVG

Jade

Sass

Transform

Transition & Animation

Bootstrap 4

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

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

Сетка Bootstrap

Типографика

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

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